3 Columns : 565 : Two Right Sidebars

Article Series: 3 Column Step by Step Guides

This is a tutorial that gives steps to convert a Blogger default 2 column 565 template in to a three column template with two sidebars on the right hand side of the main post area.

(If you want to know the internals of 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-wrapper section (Do a Find using your browser)
• Copy that entire section and paste it below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
• Change the float: $endSide to float:$startSide of the existing #sidebar-wrapper section
  

#sidebar-wrapper {
background:$sidebarBgColor url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif") no-repeat $startSide top;
width:254px;
float:$startSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
background:$sidebarBgColor
url("http://www2.blogblog.com/no565/corner_sidebar_$startSide.gif")
no-repeat $startSide top;
width:254px;
float:$endSide;
padding:0;
color: $sidebarTextColor;
font-size: 83%;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix ... float */
}

2) Add a new div element, as a child of the content-wrapper, to hold the 2nd sidebar

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget .../>
<!-- existing widgets will be here -->
</b:section>
</div>

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

<!-- spacer for skins that want sidebar and main to be the same height-->

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

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

#outer-wrapper {
position:relative;
top:4px;
$startSide:4px;
background: #889977;
width:1006px;
...
}

4) Do necessary adjustments to margins, padding etc

• Locate the #main-wrapper section
• Insert a right margin of 6 pixels. (add the line shown in red)
  

#main-wrapper {
width: 460px;
margin-right:6px;
float: $startSide;
...
}

5) Copy the following CSS styles shown in red, below the #sidebar selector

#sidebar {
margin:0;
padding:2px 20px 10px;
}

#right-sidebar {
margin:0;
padding:2px 20px 10px;
}

#right-sidebar a {
color: $sidebarLinkColor;
}

#right-sidebar a:visited {
color: $sidebarVisitedLinkColor;
}

#right-sidebar a:hover {
color: $sidebarVisitedLinkColor;
}

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

• Locate the end of the skin denoted by "]]>"
• Add the following code shown in red, above that line.

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

body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header-wrapper,
body#layout #content-wrapper,
body#layout #footer-wrapper {
padding: 0;
width:720px;
}

body#layout #main-wrapper {
width:400px;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar may not be visible until some widgets are added to it)

Related Posts

• Three Column Templates Explained