How to Make Twenty Ten Wider

Quick and Easy Twenty Ten Theme Adjustment

Laptop screens are wide, but not very high. This means your site might look great on a 19 in. desktop monitor, but on a laptop about all you see is the header image and a couple of lines of text.

Changing 2 or 3     CSS settings can make your site wider.

Header Image Already Removed

If the header image is already removed there are two quick settings to change.

In the CSS change the two places where 940 is set for the width to whatever you want it to be.   I chose 1020 for a recent them modification.

Those two areas will be:

#wrapper {

width: 1020px;

}

#access {

width: 1020px;

}

Header Image Width

It depends on what you want to do here as to the course of action you will take.

Stretch the existing image

If you decide to simply stretch the header image find:

#branding img {
width: 1015px;
}

Or whatever width works with your overall theme settings.   It might be the same as the width above or 5px less depending on what other styling you have in place.   The main thing is make it line up with the Top Navigation (#access)

Change the header image size

This option is a little more complicated but not difficult.   Two steps to this option.

First, go into the functions.php file and find 940 again.   This is where the width for the header image import is set.   Change that to the width you have just set for the overall theme.   In our example 1020px.   Save.

Second, go to Appearance/Header and import your header image (You will need to have changed the dimensions to this width before import or crop the image after import)

That’s all you need to do to make the theme wider.   The sidebar will automatically adjust making the content area wider.   This places more content “above the fold” on laptop screens and more content on the regular desktop screen.   If your readers are using a wide screen monitor, all the better.

Twenty Ten code really does make it easy to modify and change the look and feel of the theme and site.