change layout width in SEO WP themes

this tutorial shows you how to change the width of the overall layout as well as the sidebar and the main content columns in the new SEO WordPress Themes.

First, some basics about the layout:

There´s a “container” around the whole layout. This container has a fixed pixel value as width. The header, the center part and the footer have the same value of the container width and need to be updated when you change the width of the container.

The columns within the center part (main content column and sidebar column(s)) have fixed widths and use background images to create the rounded borders. I had to do it this way, because of IE5/6 compatibility issues. Hence, if you change the overall layout width, you also need to adapt the sidebar column(s) and/or the main content column.

Everything you need to update is within the stylesheet (style.css). The layout styles are on top of the stylesheet and there are comments that explain what to do, so with a basic understanding of HTML and CSS, you can do it without this tutorial. The default layout widths are:
2 column themes:
overall layout width: 780 pixels
main content column: 540 pixels
sidebar column: 230 pixels
space between columns: 10 pixels

2 column themes:
overall layout width: 920 pixels
main content column: 490 pixels
sidebar columns: 210 pixels each
space between columns: 5 pixels (on each side = total of 10 px space)


possible widths for background images used in layout:
Since the rounded borders had to be done using background images, I created background images in many different sizes (widths) in order to still give you a reasonable flexibility. For each theme, you have:
8 different widths for sidebar widgets (150, 170, 190, 210, 230, 250, 270 and 290 pixels)
30 different widths for the main content column (390, 410, 430, 450, 470, 480, 490, 500, …, 640, 650, 660, 680, 700, 720, 740, 760 and 780 pixels)
8 different heights for header/ footer/ top navigation

Let´s move on with a practical example, step-by-step. In this example, let´s change the layout width of a 2 column theme from 780px to 800px:

Step 1 - container width: find the CSS ID “#container” (line 25) and edit the “width” property, changing the default 780px to 800px.
width: 780px; –> width: 800px;

Step 2 - header/topmenu/footer: update the “width” properties of the CSS IDs “#header”, “#footer” and “#topmenu”, using the same value as for the container.

Since header, topmenu and footer are composed by 3 parts (left border, center, right border), you also need to change the center portion of these 3 whose width is 20px less the container width. In other words, find the IDs “#headercenter”, “#footercenter” and “#tmcenter” and update their “width” properties (container width - 20px). For example:
width: 760px; –> width: 780px;

Step 3 - content/sidebar columns: Finally, we want to resize the content or sidebar colums in order to fit into the layout. Since we added 20 pixels to the default layout width in our example, we can either add those 20 pixels to the sidebar or to the content column. We just need to make sure that there are background images available in the new width (see above) for either the content or the sidebar columns.

1 - content column: first, update the width for the CSS ID “#content”, adding 20px:
width: 540px; –> width: 560px;

second, update the width of the background images in the CSS IDs “#contenttop”, “#contentmiddle” and “#contentbottom”, adding 20px, too. These background images are named in a way so that you only need to change the number in the filenames.
images/contenttop-blue-540.png –> images/contenttop-blue-560.png
images/contentbg-blue-540.png –> images/contentbg-blue-560.png
contentbottom-blue-540.png –> contentbottom-blue-560.png

2 - sidebar column:
left sidebar: update the width for the CSS ID “#leftmenu”, adding 20px.
width: 230px; –> width: 250px;

right sidebar: update the width for the CSS ID “#rightmenu” and also update the “margin-left” property of “#rightmenu” (see comment inside stylesheet)
width: 230px; –> width: 250px;
margin-left: -230px; –> margin-left: -250px;

widget backgrounds: to update the backgrounds for the sidebar widgets, scroll down in the stylesheet until you find the comment “/* - - Subheadings - - */”: there are a couple of different style classes following this comment that uses background images. These are:
.nav ul li h2, .nav ul li h3, .nav ul li h4
.nav ul li
.nav ul ul
#calendar_wrap, .textwidget, .customwidget
Simply change the number in the filenames of those images:
widget-blue-230.png –> widget-blue-250.png
widgetbottom-blue-230.png –> widgetbottom-blue-250.png
widgetbg-blue-230.png –> widgetbg-blue-250.png

Do you think I should make a video about all this? I probably should.

Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

2 Comments »

  1. Comment by:
    Dr. Sudeep Shroff

    Thanks. You make things simple, yet comprehensive.

  2. Comment by:
    rakesh

    hi
    can i make two different width for left and right sidebar?
    what should i do with background?

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.