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!
11 comments:
Great work..thanks.. i was able to edit my blog..
http://mba-a-complete-story.blogspot.com/
Thanks!!
It worked for me too:
http://krisma-news.blogspot.com/
Marcello
thanks. it's great. it worked for me.
http://estarapapax.blogpsot.com
these wrapper tags dont exist in my code whatsoever.. i used dark dots as my template but theyre not there. (i didnt delete them either)
any suggestions?
www.planiterf.org
Your template is an old Classic template. These guides are for the new Layouts template format. So they won't work with the Classic templates.
thank you so much
Oh, thank you so much! Awesome job explaining how to do this. Much appreciated. Now I have to see if you explain how to make a headline bar in Dots...
of all the blogs ive read about this topic, this is the only guide that works. thank you very much! you rock!
i have a problem, though i followed all the steps, i find the sidebars showing up BELOW all the posts but in the proper left and right sidebar arrangement... y is that... please help....
i just wonder how you can do this, best work, i will try to use to my new blog, just look at a moment to my blog http://www.sekarygiorg.blogspot.com, thanks!
Post a Comment
Thanks in advance for all your comments and suggestions. They are very much appreciated.
IMPORTANT:
If you have a specific technical question, please email me with a description of the problem and the blog's URL.