Add a Third Column to Blog.

The increasing resolution on Monitors worldwide has led to a greater demand for utilizing the total real estate available on the computer screen. Many bloggers do not like the empty white space on either sides and wish to add a third column.......

Many bloggers are reporting that 6% to 9% of their viewers are on 800 x 600 monitors. The latest stats. from here show that in July 2006 there were 17% users on 800 by 600 res. They would hence like to add a third column or one more sidebar to their template. Here I have done it for the Harbor template.

INCREASE BLOG WIDTH

The first thing to do is to increase the width of the blog using measures I have outlined in How to change width of Blog. This is a picture of the important divisions of the original Harbor Template. Click on image to enlarge it.


First backup the template as shown in How to Change Template. Then add this code in the CSS after the <b:skin><![CDATA[ tags after increasing the width to 1024px as shown :


#outer-wrapper {
max-width:890px; /*<----INCREASE THIS to 1024px */ padding: 0 30px 50px; width:100%; width/* */:/**/auto; width: /**/auto; } Save Template and see the increase in width below :

DEFINE NEW COLUMNS

The size and placing of the new columns will have to be specified in the CSS first. The new sidebar is defined by

#rightsidebar-wrapper {
width:32%;
float:right;
word-wrap: break-word; /* fix for long text breaking sidebar float
in IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}
#rightsidebar {
margin:0;
padding-top: 100px; /* reduced from 170px of leftsidebar */
}


Notice that the right sidebar wrapper has been floated right. Now we need to create one big column to include both the post and the left sidebar columns. After creating it we will give it a float left property. So it will float left and contain the left sidebar floating left within it and the posts column floating right within it. For this add this code and we will call it 'twocol'.


#twocol {
width:67%;
float:left;
word-wrap: break-word; /* fix for long text breaking sidebar float
in IE */
overflow: hidden; /* fix for long non-text content breaking IE
sidebar float */
}

Since the right sidebar wrapper is 32% we have sized this at 67%. Save Template.

IMPLEMENTING THE COLUMNS IN THE BODY

We have defined the sizes and the positions of the columns in the CSS. Now we have to add them in the body of the template. Scroll down till you come to this line :

<div id='main-wrapper'>

and add the following code just above this line.

<div id='rightsidebar-wrapper'>
<div id="rightsidebar">
</div></div>
<div id="twocol">

Notice that the right sidebar wrapper along with its sidebar has been added before the main wrapper and the twocol division has been opened but not closed. To close it add this code

</div>

just before the footer wrapper code starts here :

<div id='footer-wrapper'>

Thus the twocol includes both the main wrapper which is floated right inside it and the left sidebar which is floated left. It is closed before the footer wrapper so as not to include it. Save Template.

ADDING THE WIDGETS TEMPLATES

We have added the third column but it is empty. To populate it with widgets or Page Elements add these lines :

<b:section class='sidebar' id='rightsidebar' preferred='yes'>
</b:section>

at the position marked by xxxxxxxxxxxxxx below :

<div id='rightsidebar'>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>

Save Template. We have now added the Add Page Element link in the new right sidebar column. Click on Page Element subtab under Template tab and then click on Add Page Element link in Right Sidebar to add a PageElement in the right sidebar. See picture below



I have added a text Page element in the right sidebar so as to outline it.

Technorati Tags:third column, template, blogger hacks, css, harbor template