Article Series: 3 Column Step by Step Guides
Here are the steps to convert a default 2 column Son of Moto template in to a three column template with sidebars on the left and 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 section (Do a Find using your browser)
- Copy that full section and paste above the existing sidebar section (it doesn't have to above) and rename it to #left-sidebar
- Change the float: $endSide to float:$startSide (See the code snippet below)
#left-sidebar {
width: 226px;
float: $startSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}
#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix ... float */
}
width: 226px;
float: $startSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}
#sidebar {
width: 226px;
float: $endSide;
color: $sidebarTextColor;
word-wrap: break-word; /* fix for ... in IE */
overflow: hidden; /* fix ... float */
}
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='main-wrapper'> 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-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
</b:section>
</div>
<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>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'>
</b:section>
</div>
<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>
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 918 pixels
#outer-wrapper {
margin: 0 auto;
border: 0;
width: 918px;
...
}
margin: 0 auto;
border: 0;
width: 918px;
...
}
4) Do necessary adjustments to margins, padding etc
- Locate the #main section
- Insert a left margin of 14 pixels.
#main {
width: 400px;
margin-$startSide:14px;
float: $startSide;
...
}
width: 400px;
margin-$startSide:14px;
float: $startSide;
...
}
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 body section.
- Replace the URL of the background image to the one shown in red below.
body {
...
background: #692 url($imageHost/sonofmoto_outerwrap_w.gif) top center repeat-y;
...
}
...
background: #692 url($imageHost/sonofmoto_outerwrap_w.gif) top center repeat-y;
...
}
- Locate the #outer-wrapper section.
- Replace the URL of the background image to the one shown in red below.
#outer-wrapper {
...
background: #ffffff url($imageHost/moto_innerwrap_w.gif) top right repeat-y;
...
}
...
background: #ffffff url($imageHost/moto_innerwrap_w.gif) top right repeat-y;
...
}
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 #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}
body#layout #main {
width:400px;
}
body#layout #sidebar,
body#layout #left-sidebar {
width:150px;
}
]]></b:skin>
body#layout #outer-wrapper {
padding-top: 0;
width:720px;
}
body#layout #header,
body#layout #content-wrapper,
body#layout #footer {
padding: 0;
width:720px;
}
body#layout #main {
width:400px;
}
body#layout #sidebar,
body#layout #left-sidebar {
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 image provided by me. But if you change your template according to this tutorial and use that image, please do a post in your blog linking to this article.
