Customize the width of body and sidebar of WordPress blog

You can easily customize your WordPress theme’s width of content area and sidebar widget area by manipulating the CSS file.

 

Why we need to create custom size content area and sidebar?

 

980 pixel days are gone. Do you still have a monitor with that resolution at home? Frankly, we get 12% of visitors with screen resolution <1200 pixels. Most uses mega resolution monitors; some are even greater than ours. So, with a big monitor, the 980 pixel wide website looks like a Lilliput. Admit it. It is the matter of fact.

Secondly, with the wide area, you will be able to put bigger pictures, more Advertisements, particularly 330 box and the bigger banner can be placed nicely.

 

Before starting; make the principles clear:

 

• Use a clean theme with good CSS structure, all themes can be made of any size, but with a well structured CSS, it will be easy.
• Install WordPress locally on your Windows 7 PC. We wrote in Windows 7 Tutorials section how to do it. Try on your computer first, then simply open your Theme folder (on server) in Windows 7 explorer and knock out that old with this custom CSS style sheet or you can copy paste from WordPress theme editor.
• You have to edit the header, footer, content area and the sidebar. If it is a complex theme, your head will be enough saturated, so create a chart in paper with pen and write what it was and what is done.
• Header area will be of same width as footer, take it as abcd pixels wide.
• Body is divided in to two areas: content area + side bar. So, the equation should be : abcd pixels = content area’s width + Side bar’s width.

Now, say you thought to make the theme of 1160 pixels width. Then width of the header (not your banner area, if defined), footer, total body will be 1160 pixels. Now, you have to divide body to content area, say 380 pixels width and rest will be (1160 – 380) =  780 pixels will be of content area.

Now, some things which were of good width at 980 pixels will look odd in 1160 pixels theme. Say the footer widgeted area, if you have such. So, you have to calculate a bit and put the new values.

 

I have made my WordPress theme of custom size as you have written, by why the theme is getting pushed to one side when viewed on a smaller resolution screen?

 

This is where you now need to define the minimum width of the theme; that it, if you make the browser window smaller, it will somewhat adapt with vertical scroll bars. It is nothing, but you need to add a value to the wrap declaration, it is happening because you have wrap defined. Find out the wrap. There should be three wraps: header, footer and body. Add this code in red after starting of each second bracket; well we are giving full example:

 

#wrap {

<span style="color: #3366ff;">(you will have other things here)</span><span style="color: #ff0000;">min-width: 1160px;</span>margin: 0 auto 0;position: relative;&nbsp;&nbsp;

 

No more pushing to one side with custom width.

 

More on custom width theme

 

Nowadays, many good themes are available (both free and paid) that allows to create custom width from your dashboard; if your not good to take the risk, you can try them. Two themes are coming in mind: Platform pro of Pagelines and Suffusion made by Sayantan Sinha. Sayantan’s Suffusion offers more than expected among current free themes.