Saturday, March 30, 2013

Minimal Lite

Today I am re-launching my personal website after a re-design. Here's why I am doing it.


My aim was to design a site minimal in approach with the least possible distraction, noise and clutter. Prime purpose was to let readers focus more on content instead of being distracted by multi-block layout, cluttered design, advertisements, buttons that beg to click, lots and lots of unnecessary links, too many widgets and more... Creating a memorable experience for the reader.

Result: A simple, pure and clean minimalist website!

In order to achieve that, the site had to have:
  • A good-sized readable font
  • Column width optimal for reading
  • Pure white background for clear content visibility
  • Light color schemes
  • Minimal navigation with less clutter


What it has and what not?

Minimal Lite is characterized by:
  • A header
  • Single coloumn body layout
  • And a footer
  • Nothing else!

It does not have:
  • Navbar
  • Sidebars
  • Multi-layout footer
  • Unnecessary widgets and links


Brief description about the design

Green is the color of nature, balance, growth, hope, learning, harmony and life. It also happens to be one of my favorite colors. So, I chose it. Color hex code is: '#88c34b' and corresponding RGB code is Red: 136, Green: 195 and Blue: 75. You can convert hex color code into RGB and vice versa here. Font used universally is 'Segoe UI' and body font-size is 14 pixels. Content width is 780 pixels wide and I think this is the perfect dimension for the design.



More details about the template


Header

1. Get rid of the annoying Navbar:

Install the template.
Edit in Blogger template editor.
Find 'navbar'.
Delete the widget.


2. Horizontal Green Line at top:

Add this code just after the closing head tag </head>:

<div style='top:0px; width:100%; position:fixed; height:10px; background-color:#92D050; z-index:100;'>
</div>

If you don't want this horizontal line to be fixed, delete 'position:fixed' name value from the code.
You can also change the color, height and other variables as desired or even remove the whole code if you don't want it.


3. Header Image:

700px wide by 233px in height.
Color used is '#88c34b'.
Font used for the text in the image is: 'Rockwell', Bold.
Description font is: 'Adobe Arabic', Italic.


4. Blog Title:

Search for group description 'Blog Title' under variable definitions of <b:skin>.
Title color is #88c34b.
You can change other values as well:




Body

1. Content Width:

It is 780 pixels wide. I think this is the perfect dimension.
But, in case you are not satisfied, look for 'content.width' in the template editor.
Change the value here:

<b:variable default='960px' name='content.width' type='length' value='780px'/>


2. Links Gadget:

On the top you will find the links gadget which can be added and edited from the layout section of your blog settings.
Letter-spacing is 4px for clarity.
Font-size is 17px for better visibility.
And individual font-color is #71625A to match the design and color scheme of the site.
Added as HTML/javascript gadget below the header.
You can edit as per your requirement:



3. Post Title:

Change this under body css after variable defnitions of <b:skin>.
Find 'post.title' variable name under group description 'Post Title':
Color is the same as that of the blog title; #88c34b.
Font size is 26px.

Note: I have also changed the post title footer. Search for 'post.title' where css is written. You will find these definitions:

margin-top:21px;
margin-bottom:22px;

Alter the values as desired.


4. Body Text Font & Color:

Find the variable name 'body.font' under group description 'Page Text' at the begining of the variable definitions of <b:skin>.
Default font size is 14 px.
Font family is Seoge UI.
You will find all the values you need to change, if you wish:


5. Page Title:

The page title appears in the body/content of every page and sometimes gets repeated.
To stop displaying the page title in the content section/body, first search for ']]></b:skin>'.
Add this code just after it:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
.post-title.entry-title{
display: none;
}
</style>
</b:if>


6. Links:

Default link colors have been defined under 'Links' group description.
Search for 'link.color' followed by other link variable names:
Link hover color has been assigned the theme color of the site: #88c34b so that if hovered over a link the link color changes into green.


6. Other variable definitions:

Similarly, you will find other variable names like body.background.color, description.text.color, date.header, post.footer, image.background.color, widget.title, etc. which you can edit as per your preferences.


7. Remove Border And Shadow From All Images

Search below similar code in your template:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img 
{
 padding: $(image.border.small.size);
 background: $(image.background.color);
 border: 1px solid $(image.border.color);
 -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
 box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}


Replace the entire piece of code with the code given below:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none;
  border: none;
  background: none;
  -moz-box-shadow: 0px 0px 0px transparent;
  -webkit-box-shadow: 0px 0px 0px transparent;
  box-shadow: 0px 0px 0px transparent;
}




Footer

1. Post Subcription Links:

Delete unnecessary footer post subcription links.
This will remove 'Subscribe to: Posts Comments (Atom)' from the posts' footer.
Find 'post.feeds' in the template editor.
Delete this whole section below:

<!--Post feed links -->
    <div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </b:loop>
    </div>

And boom! They are gone forever.


2. Body Feed Links:

This will delete 'Subscribe to: Posts (Atom)' from the body footer.
Find 'feed-links'.
Delete this whole section:

<div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>

DONOT delete the line above this section i.e.: <b:includable id='feedLinksBody' var='links'>


3. Attribution:

Be free of the default traditional attribution and add your own custom attribution.
Search for 'attribution' until you get this code below.
Delete the attribution widget.
And add this code below as a HTML/javascript gadget at the bottom from the layout settings of your blog:

<div id='footer' align='center'>&#169; 2013 <a href='http://www.yourdomain.com/'>Your Site Name</a>
<br/>
<a href='http://www.shaleensinha.com/'>Minimal Lite</a> designed by Shaleen Sinha
</div>

Make appropriate changes like your domain url, name and text accordingly.


4. Comment Box Width:

Within “Blog1” widget, expand ‘comment-form’ and ‘threaded-form’ includable.
Find ‘comment-editor’
Go for the “width='100%'”
Then find this code:

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>

Change the value of width from % to your desired length in pixels.
I have kept it 690px.

Note: You need to follow the above instruction four times (4) wherever you find height='410' because the comment box appears in various div sections.



Extras

Archives Page

1. Search Function:

Centrally aligned.
Searches your site for keywords entered through Google.
Look for 'var domainroot'.
Type in your domain name:

<script type="text/javascript">
   var domainroot="yourdomain.com"
   function Gsitesearch(curobj){
    curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
    }
  </script>
<div style="font-size: 16px; letter-spacing: 4px; text-align: center;">
<form action="http://www.google.com/search" method="get" onsubmit="Gsitesearch(this)">
<div class="search">
Search this site:<br />
<input class="texta" name="q" type="hidden" />
<input name="qfront" style="height: 14px; text-size: 12px; width: 180px;" type="text" />
</div>
</form>
</div>

You can also change the dimension and look of the search box or text by tweaking with the style attribute.

2. Others:

Search by labels are added manually and so are the links to the posts, using <ul> lists.
Change the links in the subscription section to have your RSS and email subscription links.



Connect Page

1. Email Subscription Box:

It is centrally aligned.
Form box is 300px wide.
Input box is 170px in length:

<div align="center">
<span style="font-size: 20px;">Subscribe via Email</span>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURFEED', 'popupwindow', 'scrollbars=yes,width=560,height=550');return true" style="border: 1px solid #ccc; margin-top: 5px; padding: 4px; text-align: center; width: 300px;" target="popupwindow">
Enter your email address:<br />
<input name="email" style="width: 170px;" type="text" /><br />
<input name="uri" type="hidden" value="ThoughtsInThree" /><input name="loc" type="hidden" value="en_US" /><input type="submit" value="Subscribe" /><br />
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a>
</form>
</div>

You can individually change the attribute values for fonts and form dimensions.

2. Others:

No image has been used for how-to-connect options like rss, email or facebook.
The link-texts are manually coded using css for their individual colors.
Here's a great site for color selection from any picture or logo: ImageColorPicker


Download

You can download this template. It is for free! Yes! You can download, install and tweak it for your own website without asking for permission:


Note: Do backup your previous template before installing. Proceed at your own risk. I am not responsible if you don't find your dashboard next time in case anything goes wrong. Still, if you have problems/questions regarding this template and need support, then email me.


Enjoy!



No comments:

Post a Comment