so what is required to make a three column template? well the answer is very simple to make a three column template you require:
a) a nice template (two columned)
b) common sense
so how to go about it ?
well follow the steps as given below and you will have a three column template in no time at all:
1) understand the css structure
this can be better understood by the following analogy. you have a main outer box (outer wrapper), then inside that you have three small boxes, the post box the header box and the sidebar box. now these boxes again have sub-boxes. simple right? well now thats exactly how CSS is used to present your blog, only a box here is specified by the div tag
now lets check how your CSS looks like
in the head section look for a something that looks like "body {" this structure tells you how to display your page as a whole ...remember the big box that encloses all the other boxes?
well you have jus got to the right CSS block...now keep going down..
you wqill find three div specifiers
#outer-wrapper {
#main-wrapper {
#sidebar-wrapper {
Now is where the actual hack starts. warning before you do anything backup your template.
2) in the outer wrapper look for the width ..it is usually specified in pixels. note the number.
now note the width of the other two wrappers as well
now what you have to do is basic math. divide the outer wrapper width into three parts ...two parts of equal but small size for the sidebars and a majo big chunk for the main post. :)
going fine? got the numbers?
now alter the width values. now if there are margin values that are specified take that into account while calculating as well.
3) now we edit the CSS to specify that we actually want two sidebars ...how ? first copy the sidebar structure complete
next past it underneath and change the name from
#sidebar-wrapper { to #sidebar-wrapper-new {
now alter the float property depending on whether you want it left or right...there is no center option, its left most(specified simply by left), left and right.
4) now we have to alter the body code. go to the body section:
depending on where you want to place the sidebar, place the following div tag after or before the main wrapper div tag.
with in angular brackets, div and id='sidebar-wrapper-new'.
now save the template.
now if your math is strong and your calculations where right, then viola, your three column template is ready. go to the page elements and customize your new sidebar.