3 Column Templates : Scribe : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

Here are the steps to convert a Blogger default 2 column Scribe template in to a 3 column template with sidebars on left and right hand sides 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 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 #right-sidebar
• Change the float: $startSide to float:$endSide of the #right-sidebar selector
• Change its width property to 200 pixels (See the code snippet below)

#sidebar {
width:150px;
float:$startSide;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for ... */
}

#right-sidebar {
width:200px;
float:$endSide;
padding:8px 0;
margin:0;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix for ... */
}

2) Introduce a new div element, as a child of #wrap3, to be the placeholder for the 2nd sidebar

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

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
</b:section>
</div>

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

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

• Locate the following CSS sections
• Change their width property to 900 pixels

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

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

4) Do necessary adjustments to margins, padding, floating etc

• Locate the #main section
• Insert a left margin of 7 pixels.
• Change its float property to $startSide
  

#main {
width:430px;
float:$startSide;
padding:8px 0;
margin:0;
margin-left:7px;
...
}

5) Modify and expand the background images as necessary.

• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Locate the following CSS selectors.
  
• Replace the URLs of the images to the ones shown in red below.
  

#main-top {
width:900px;
height:49px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_top_w.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_bot_w.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_mid_w.jpg") repeat-y;
...
}

#header {
background:url("$imageHost/scribe_divider_w.gif") no-repeat bottom $startSide;
}

#footer {
clear:both;
background:url("$imageHost/scribe_divider_w.gif") no-repeat top $startSide;
...
}

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

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 add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://bguide.blogspot.com/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://bguide.blogspot.com">The Blogger Guide</a>

</body>
</html>

Related Posts

• Blogger Three Column Templates Explained