3 Column Templates : Rounders 3 : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template that comes by default with Blogger has only two columns. However, in the blogosphere, there is tremendous demand for three column templates. If you are one of such bloggers, this tutorial will give you the steps to modify a default 2 column Rounders 3 template in to three columns with left and right sidebars.

(For the more curious readers, the article series Three Column Templates Explained covers the behind the scene details.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need specific conversions, please contact me.

1) Define a new CSS id selector for the second sidebar.

• Switch to Layout -> Edit HTML
• Find the #sidebar-wrap selector
• Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
• Change the float to $startSide of the #left-sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
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 ... float */
}

#left-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 */
}

2) Add a new div element, which will be the placeholder for the second sidebar

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

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

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

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

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

</div>

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

3) Expand the width of the parent wrappers to accommodate the newly added sidebar

• Find the CSS section called #outer-wrapper
• Modify its width property to 980 pixels

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

4) Adjustment the required margins, padding etc

• Locate the #left-sidebar-wrap section
• Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.
  

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

5) Add the required CSS selectors for the new sidebar.

• Locate the #sidebar h2 selector
• Copy the code shown below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#left-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#left-sidebartop a {
color: #ffffff;
}

#left-sidebartop a:hover {
color: #ffffff;
}

#left-sidebartop a:visited {
color: #ffffff;
}

#left-sidebar a {
color: #99ddbb;
}

#left-sidebar a:hover,
#left-sidebar a:visited {
color: #ffffff;
}

#left-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded one as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

• 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 with the ones shown in red below.

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

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

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) 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 #left-sidebar-wrap {
width:150px;
}

]]></b:skin>

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://www.bloggerguide.lk/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Related Posts

• Rounders 3 with Two Right Sidebars
  
• Blogger Three Column Templates Explained

Wider Header for Dots Template

The Dots (or the Dots Dark) template, which is a default Blogger template, has its Header widget inside the left sidebar. Since the Header widget carries the title and the sub title (or description) of a Blogger blog, this arrangement brings about a somewhat congested appearance. This tutorial will illustrate how this Header widget can be moved to the more usual, across-the-top placement.

First let’s take a look at the Before and After views of what we are going to do.

Before:


After:


As you can see, the After view has the blog title running across the blog, instead of being stuck at the left sidebar.

(Note: Please backup your template before trying out this modification)

Go to the Layout -> Edit HTML mode and first make sure that the ‘Expand Widget Templates’ option is NOT selected. Then apply the following steps.

1) Delete the background property in the #outer-wrapper CSS selector.

#outer-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;
…
}

2) Delete the existing line “display:none;” in the #header-wrapper and add the following rules.

#header-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat bottom right;
width:700px;
height:90px;
margin:0 auto 10px;
}

For the Dark Dots template, change the URL as follows.

background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat bottom right;

3) Change the first padding value in the #main-wrapper to 10 px from 100 px

#main-wrapper {
width:450px;
float:$endSide;
padding:10px 0 20px;
…
}

4) Change the first padding value of #sidebar to 10 px from 40 px

#sidebar {
...
padding:10px 10px 15px;
…
}

5) Delete the existing <b:section> element for the header contained inside the sidebar-wrapper.

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>

<b:section class='sidebar' id='sidebar' preferred='yes'>

6) Copy the code shown below in red, in between the outer-wrapper and the crosscol-wrapper, to get the new header. (You will have to re-type your blog title after copying this code)

<div id='content-wrapper'>
<div id='header-wrapper'>
<b:section class='sidebar' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Save your template and now you should have your header going across the top of your blog.

Related Posts

• Centering the Dots Header

3 Column Templates : Rounders 4 : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

This tutorial will provide the steps to modify a Blogger default 2 column Rounders 4 template in to a three column template. This modification will add a new sidebar to the left side of the main post column.

(If you really want to know the under the hood details of what's happening here, read the article series Three Column Templates Explained.)

This guide is specific for Rounder 4. For other Rounders templates, see the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. That's because the required background images provided in this tutorial are set to that size. If you need custom sizes, please contact me.

1) First we need to add a new CSS id selector for the new 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 #left-sidebar-wrap
• Change the float: $endSide to float:$startSide of the #left-sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
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 ... float */
}

#left-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 */
}

2) Now we introduce a new div element, which will be the placeholder for the second sidebar

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

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

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

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

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

</div>

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

3) Next step is to increase the width of the parent wrappers so that the new sidebar fits in them

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

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

4) We also need to do some adjustments to margins, padding etc

• Locate the #left-sidebar-wrap section
• Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.
  

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

5) Add the required CSS selectors for the new sidebar.

• Locate the #sidebar h2 selector
• Copy the code shown below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#left-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#left-sidebartop a {
color: #ffffff;
}

#left-sidebartop a:hover {
color: #ffffff;
}

#left-sidebartop a:visited {
color: #ffffff;
}

#left-sidebar a {
color: #99ddbb;
}

#left-sidebar a:hover,
#left-sidebar a:visited {
color: #ffffff;
}

#left-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Then we have to apply the expanded background images as necessary.

All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

• 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 with the ones shown in red below.

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

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

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders4_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Finally, 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 #left-sidebar-wrap {
width:150px;
}

]]></b:skin>

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://www.bloggerguide.lk/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Related Posts

• Blogger Three Column Templates Explained