Styling Blogger Main Content Space | Mission 13

Previously, we saw how we can restyle the header part of the “Simple Blogger Template” we are designing. Today, we will see how we get going in designing the next section – Main Content Area and Sidebar Area to look better than before.

This tutorial has lots of tweaks and customization to make things look nice and professional. We are not going to use any images or patterns to design, but just pure hex colors. We are going to restructure the main area to 2 columns instead of the 3 columns. That is, we are going to remove one sidebar from our previous template design and realign the sidebar as well.

PREVIOUS MISSION – Mission 12 – Re-Styling the header section of Blogger template and make the header clickable.
NEXT MISSION – Mission 14: Re-designing the Blogger footer section.

MISSION 13 OBJECTIVES:

1. Restructuring the content area to two columns – One Right sidebar and One Blog Main Area.
2. Making the sidebar and content area fixed when using Ctrl with Plus or Minus (+/-) to increase and reduce the browser resolutions.
3. Importing a new font family for the template.
4. Changing other styles overall.

Thus making the content area(body/blog main area with sidebar) professional or beautiful.

Note: This is our templates version 1.1 as we will have been making considerable changes now.

Here is a snap shot of the header:

Click to Enlarge

EXPLANATION:

1 Restructuring the content area to two columns – One Right sidebar and One Blog Main Area.

We are now going to remove the middle sidebar(Sidebar2) from the scene. Make the left sidebar to float to right.

Important: Before attempting it, remove all the widget/gadgets from the sidebars.

Note: In our previous template, we see that the sidebar 1 comes first then the content area/blog area in the HTML code. You can check it out by “Without expanding the template widget“.

Now, we need to reorder it to first content area/blog main area and then the sidebar 1.
So, we are moving the sidebar 1 area above the sidebar 2 as shown in the snapshot and commenting out the sidebar 2 codes as shown below:

Here is the CSS which makes sidebar to float right:

CSS:

.sidebar-wrapper {
width: 300px;
display: inline; /* handles IE margin bug */
float: right;
margin:0px 7px 10px 0px;
padding:10px;
position:relative;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border-top:10px solid #9c728e;
border-bottom:10px solid #9c728e;
}

Here is the CSS for the main-wrapper to float it to left:

CSS:

#main-wrapper {
/* Main wrapping */
float: left;
padding:10px;
display: inline; /* handles IE margin bug */
width:640px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
position:relative;
border-top:10px solid #9c728e;
border-bottom:10px solid #9c728e;
}

2 Making the sidebar and content area fixed when using Ctrl with Plus or Minus (+/-) to increase and reduce the browser resolutions

In the previous template design, if you use Ctrl button and Plus(+), the sidebars would float and get aligned wrongly out of space.

The structure you need to understand is:

content-wrapper-starts
main-wrapper
sidebar-wrapper
content-wrapper-ends

Here, the content-wrapper never had a width specified.
Now, we are going to specify a width for the content-wrapper in the CSS as shown below:

CSS:

#content-wrapper {
/* Main Content Resides here(Blog content & sidebar )*/
margin: 0 auto;   /* Centering the Blogger Layout(Important)*/
overflow:auto;
background: #f0edcc;
width:997px;
}

That is going to fix everything up. We also specify overflow to auto. Overflow is for the scroll bars.
Now, in the new template, you can test if it slides away while using different screen resolutions of browsers.

3 Importing a new font family for the template.

We shall import a new font family to this template from Google Font API.
Search for </head> tag in the template and add the following above it:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'/>

That’s it.

We use the font in the template using the below CSS:

CSS:
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
margin:0; padding: 0; border: 0;
background: #fff;
font-family: 'Droid Sans', sans-serif;
color:#111;
font-size: 14px;
line-height:18px;}

That’s it. The font family is Droid Sans which got imported.

4. Changing other styles overall

Other styles, we have done are:

a) New background color to content-wrapper:

CSS:

#content-wrapper {
/* Main Content Resides here(Blog content & sidebar )*/
margin: 0 auto;   /* Centering the Blogger Layout(Important)*/
overflow:auto;
background: #f0edcc;
width:997px;
}

b) Common sidebar widget title styles:

CSS:

sidebar h2 {
padding-left:5px;
margin-bottom:3px;
border-left:5px solid #444;
font-family:"Comic Sans MS", cursive, sans-serif;
background:#5e79ff;
color:#fcfcfc;
}

c) Border around all the widget area:

CSS:

#sidebar1 .widget {
border:1px solid #aaa;
padding:3px;margin-bottom:2px;
background:transparent;
/* Common Sidebar Widget Settings Here */
}

d) Two top and bottom thick borders each for sidebar and main area:

CSS:

.sidebar-wrapper {
width: 300px;
display: inline; /* handles IE margin bug */
float: right;
margin:0px 7px 10px 0px;
padding:10px;
position:relative;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
border-top:10px solid #9c728e;
border-bottom:10px solid #9c728e;
}

#main-wrapper {
/* Main wrapping */
float: left;
padding:10px;
display: inline; /* handles IE margin bug */
width:640px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
position:relative;
border-top:10px solid #9c728e;
border-bottom:10px solid #9c728e;
}

e) Title of the article now has two curly braces:

HTML:

 <h3 class='post-title'>
     <b:if cond='data:post.link'>
       {<a expr:href='data:post.link'><data:post.title/></a>}
     <b:else/>
        <b:if cond='data:post.url'>
         {<a expr:href='data:post.url'><data:post.title/></a>}
        <b:else/>
          {<data:post.title/>}

f) Overall Links Settings and Font Size of the post tile has increase:

CSS:

a, a:visited {
color: #2dcbd6;
text-decoration: none;
}

.post h3 {
margin: 0px;
padding: 10px 0px 0px 0px;
color: #bd684a;
text-decoration: none;
font-size:18px;
}

g) Comment Links have some styling:

CSS:

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding-left: 0px; background:#a2afbd;
}

That’s all, we have changed today, if you have any questions regarding anything we have done or any other doubts regarding the designs, you can contact me or comment here to get a solution. Thanks for checking out this tutorial, and before we end today’s tutorial check out the demo once again from below.

Hope you liked this tutorial and the design. If you feel that the design can be made better than now, please let us know your ideas and creativity. We are in the process of fine tuning the template for a professional look.

— to be continued —