How To: Theme – Identification Band 4-column

Configuring style.css to change column widths.

First, make a copy of the style.css
Name it, for example, copy styleORIG.css

So now you have 2 x .css files.
Use the style.css to work on and put the styleORIG.css somewhere safe so that you can always go back to using it if you mess up the style.css beyond recognition.

The 4 Columns.
In the css, from left to right, the four colums are:
1. Left sidebar;
2. this column where a post (content) goes, is not give a column name;
3. Righter right sidebar;
4. Lefter right sidebar.

1. Left sidebar

Scroll to the following section

/*
* Left sidebar
*/
#menu-left {
float: left;
margin: 16px 8px 20px 8px;
width: 220px;
font-size: 11px;
}

I am leaving the Left sidebar width as it is. I have not tried changing it, so i can not tell if it works or not. It probably does.

2. this column where a post (content) goes, is not give a column name.

Scroll to the following section

#content {
float: left;
width: 220px;
margin: 16px 8px 20px 8px;
overflow: hidden;
text-align: left;
}

Increase the width to 250px

3. Righter right sidebar

Scroll to the following section

#menu-right-right {
float: right;
margin: 16px 8px 20px 8px;
width: 220px;
font-size: 11px;
}

Reduce the width to 140px

4. Lefter right sidebar

Scroll to the following section

* Lefter right sidebar
*/
#menu-right-left {
float: right;
margin: 16px 8px 20px 8px;
width: 220px;
font-size: 11px;
}

Increase the width to 270px

Nearly finished. Please note, the new widths are only a suggestion for the purposes of this How To.
Save file.
And have a look.
And go and take a look at one of your pages.
If it is not sitting pretty where it should be, dont worry, read on.

Introduction

All four colums are 220px each.

columns 1 2 3 4
orig. width 220 220 220 220 = 880px
new width 220 250 140 270 = 880px

So when you change the column widths, make sure that that your 4 columns still total 880px

Configuring style.css to change the pages width.
Introduction
The pages sit astride column 2 and 3.
So, if you reduce the original total width (ie 440px) of col 2 and 3, you will have to reduce the width of the page, so that it can still sit neatly on the page where it is supposed to.

To change the width of pages

Scroll to the following section

#content-big {
float: left;
width: 456px;
margin: 16px 8px 20px 8px;
overflow: hidden;
text-align: justify;
}

Reduce the width to 390px

finis

P.S.
For an example you can take a look at my column width changes (while the site lasts)
http://parentsawake.com/