3 Column Templates : Rounders : Two Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

Here are the steps to convert a Blogger default 2 column Rounders template in to a 3 column template with two sidebars on the right hand side of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

• Go to Layout -> Edit HTML
• Locate the #sidebar-wrap selector (Do a Find using your browser)
• Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #sidebar-wrap-two
• Change the float: $endSide to float:$startSide of the #sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

#sidebar-wrap-two {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Introduce a new div element, as a child of the outer-wrapper, to be the placeholder for the 2nd sidebar

• Locate the <div id='sidebar-wrap'> element.
• Copy the code shown in red, below that section (this has to be below)

<div id='sidebar-wrap'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div></div>

</div>

<div id='sidebar-wrap-two'>

<div id='sidebartop-wrap'><div id='sidebartop-wrap2'>
<b:section class='sidebar' id='sidebartop-two'>
</b:section>
</div></div>

<div id='sidebarbottom-wrap1'><div id='sidebarbottom-wrap2'>
<b:section class='sidebar' id='sidebar-two' preferred='yes'/>
</div></div>

</div>

<div id='footer-wrap1'><div id='footer-wrap2'>
<b:section class='footer' id='footer'/>
</div></div>

3) Expand the width of the parent wrappers to accommodate the new sidebar

• Locate the CSS section called #outer-wrapper
• Change its width property to 980 pixels

#outer-wrapper {
width: 980px;
...
}

4) Do necessary adjustments to margins, padding etc

• Locate the #sidebar-wrap section
• Insert a left margin of 7 pixels.

#sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0;
...
}

5) Modify and expand the background images as necessary.

The Rounders template uses images for the rounded header and footer. We need to expand these images to accommodate the new sidebar. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

• Locate the following CSS selectors.
  
• Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
url("http://thebloggerguide.googlepages.com/rounders_corners_cap_top_ex.gif") no-repeat $startSide top;
...
}

#header {
background:url("http://thebloggerguide.googlepages.com/rounders_corners_cap_bot_ex.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("http://thebloggerguide.googlepages.com/rounders_corners_cap_top_ex.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("http://thebloggerguide.googlepages.com/rounders_corners_cap_bot_ex.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

Note: Step 6 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.

6) Modify the CSS rules for the wire frame layouts editor.

• Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
• Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:830px;
}

body#layout #main-wrap1 {
width: 485px;
margin-right:10px;
}

body#layout #sidebar-wrap,
body#layout #sidebar-wrap-two {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (Let me know if you come across any problems)

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please do a post in your blog linking to this article.

Related Posts

• Blogger Three Column Templates Explained
• Rounders with Left and Right Sidebars