Article Series: 3 Column Templates Step by Step Guides
Here are the steps to convert a Blogger default 2 column Denim 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 Blogger Three Column Templates Explained.)
Note: Back up your template before you start any modifications.
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 full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #sidebar-wrapper-two
- Change the float: $endSide to float:$startSide of the existing sidebar section (See the code snippet below)
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for ... IE */
word-wrap: break-word; /* fix for long ... */
overflow: hidden; /* fix for long non ... */
}
#sidebar-wrapper-two {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling ... */
word-wrap: break-word; /* fix for long ... */
overflow: hidden; /* fix for long non ... */
}
margin-$endSide: 14px;
width: 240px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for ... IE */
word-wrap: break-word; /* fix for long ... */
overflow: hidden; /* fix for long non ... */
}
#sidebar-wrapper-two {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling ... */
word-wrap: break-word; /* fix for long ... */
overflow: hidden; /* fix for long non ... */
}
2) Introduce a new div element, as a child of the content-wrapper, to be the placeholder for the 2nd sidebar
- Locate the <div id='sidebar-wrapper'> element.
- Copy the code shown in red, below that section (this has to be below)
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebar-wrapper-two'>
<b:section class='sidebar' id='sidebar-two' preferred='yes'>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
3) Expand the width of the other wrappers to accommodate the new sidebar
- Locate the CSS sections called #header and #content-wrapper
- Change their width property to 1000 pixels
#header {
width: 1000px;
margin: 0 auto;
...
}
width: 1000px;
margin: 0 auto;
...
}
#content-wrapper {
width: 1000px;
margin: 0 auto;
...
}
width: 1000px;
margin: 0 auto;
...
}
4) Do necessary adjustments to margins, padding etc
- Locate the #sidebar-wrapper section
- Change its right margin to 11 pixels.
- Add a left margin of 11 pixels.
#sidebar-wrapper {
margin-$endSide: 11px;
margin-$startSide: 11px;
width: 2404px;
...
}
margin-$endSide: 11px;
margin-$startSide: 11px;
width: 2404px;
...
}
Note: Step 5 is only needed if your Layout Editor does not show the newly added sidebar. There was an issue where the Firefox browser didn't show a 3 column template fully in the edit mode. But Blogger reports that the issue has been fixed now.
5) Modify the CSS rules for the wire frame layouts editor.
- Locate the end of the skin denoted by "]]>"
- Add the following code above that line.
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
padding-top: 0;
width:740px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:740px;
}
body#layout #main-wrapper {
width:400px;
}
body#layout #sidebar-wrapper,
body#layout #sidebar-wrapper-two {
width:140px;
}
]]></b:skin>
body#layout #outer-wrapper {
padding-top: 0;
width:740px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:740px;
}
body#layout #main-wrapper {
width:400px;
}
body#layout #sidebar-wrapper,
body#layout #sidebar-wrapper-two {
width:140px;
}
]]></b:skin>
Save the template. Switch to Page Elements view and enjoy your 3 column template!
