Article Series: 3 Column Step by Step Guides
Here are the steps to convert a default 2 column Dark Dots template in to a three column template with two 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 new CSS id selectors for the 2nd sidebar wrapper.
- Go to Layout -> Edit HTML
- Locate the #sidebar-wrapper and the #sidebar sections (Do a Find using your browser)
- Copy both section fully and paste below the existing sidebar sections (it doesn't have to below) and rename them to #sidebar-wrapper-two and #sidebar-two
- Change the float: $startSide to float:$endSide of the #sidebar-wrapper-two section (See the code snippet below)
#sidebar-wrapper {
width:200px;
float:$startSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... */
overflow: hidden; /* fix for ... float */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#sidebar-wrapper-two {
width:200px;
float:$endSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}
#sidebar-two {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
width:200px;
float:$startSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... */
overflow: hidden; /* fix for ... float */
}
#sidebar {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
#sidebar-wrapper-two {
width:200px;
float:$endSide;
font-size:85%;
padding-bottom:20px;
word-wrap: break-word; /* fix for ... IE */
overflow: hidden; /* fix for ... float */
}
#sidebar-two {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}
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='sidebar-wrapper-two'>
<b:section class='sidebar' id='sidebar-two' 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='sidebar-wrapper-two'>
<b:section class='sidebar' id='sidebar-two' 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 other wrappers to accommodate the new sidebar
- Locate the CSS section called #outer-wrapper
- Change its width property to 900 pixels
#outer-wrapper {
background:url("...") no-repeat 250px 50px;
width:900px;
...
}
background:url("...") no-repeat 250px 50px;
width:900px;
...
}
4) Do necessary adjustments to margins, padding etc
- Locate the #main-wrapper section
- Insert a right margin of 22 pixels.
#main-wrapper {
width: 450px;
margin-right:22px;
float: $endSide;
...
}
width: 450px;
margin-right:22px;
float: $endSide;
...
}
5) Modify the CSS rules for the wire frame layouts editor.
- Locate the section marked as /* Page structure tweaks for layout editor wireframe */
- Replace that entire section with the code marked in red below.
/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper {
padding: 0;
width: 900px;
}
body#layout #main-wrapper {
padding: 0;
width: 400px;
}
body#layout #sidebar-wrapper,
body#layout #sidebar-wrapper-two {
padding: 0;
width: 200px;
}
]]></b:skin>
body#layout #outer-wrapper {
padding: 0;
width: 900px;
}
body#layout #main-wrapper {
padding: 0;
width: 400px;
}
body#layout #sidebar-wrapper,
body#layout #sidebar-wrapper-two {
padding: 0;
width: 200px;
}
]]></b:skin>
Save the template. Switch to Page Elements view and enjoy your 3 column template!
