How to Make Your Blog Template Wider

Many mainstream websites now default to a width of about 940px - a safe width for 19" monitors. Since a limited number of web users have monitors of a smaller width, this is something you may wish to consider. Setup your Layout, widgets, and create at least one blog post before proceeding so you can see the changes you are making.

If your XML template has background images, changing widths may cause these images to no longer fit. You may have to disable some background images if increasing the width of your blog is important to you. As you make each change and Preview the result, make a note of which object was changed when a background image is no longer usable. See more at the bottom of this post.

Also, always type a comment on the line of code you changed that includes the original value. This not only helps if you want to start over, but it’s good to know which lines of HTML code you have changed. To change the width of your blog, follow these instructions. Only change the "width" or "min-width" line of code and ignore the other lines of code.

Get into your blog Layout and click Edit HTML. Click Download Full Template to save a fresh copy of your template to disk.

Press Ctrl-F to open the "find" box, and with your cursor in the "find" box, press the space bar and then type width. Press Next.

Changing Entire Blog Width to 940px

Your first stop should be the header-wrapper code and/or the body code. Both are shown below. If they have a width or min-width specified, it will be 660px or another large number. Change the value to 940px as shown below. Click Preview.


#header-wrapper {
width:940px; /* changed; value was 660px */
margin:0 auto 10px;
}

body {
margin: 0;
text-align: center;
min-width:940px; /* changed; value was 660px */
background: #4386ce url(http://whatever/image.gif) repeat-x $startSide top;
color: $textColor;
font-size: small;
}


Press Next again by the "find box" and you should see the outer-wrapper. The outer-wrapper also contains the entire blog width. Make the change as shown below, and preview your blog.


#outer-wrapper {
width:940px; /* changed; value was 660px */
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


If you find a DIV called #content-wrapper which has the wide width, change it as well, and Preview.


#content-wrapper {
position: relative;
width:940px; /* changed; value was 660px */
background: #4386ce url(http://whatever/image.gif) repeat-y $startSide top;
}


Changing Main Area and Sidebar Widths

Now we must tell Blogger how to divvy up the width between the main portion of the blog (main-wrapper) and the sidebar (sidebar-wrapper). From the "find" box, press Next until you find the main-wrapper. The code for side-wrapper will probably be 4 or 5 items further down. The sum of the widths of main-wrapper and side-wrapper must be less than 940px or overlapping will occur due to margins.

My main-wrapper is 675px and my sidebar is 256px - for a total of 931px. Enter your desired width values for main-wrapper and side-wrapper and then Preview your blog for overlapping. When no more overlapping occurs, tweak the width values to suit.


#main-wrapper {
width: 675px; /* changed; value was 410px */
float: $startSide;
overflow: hidden;
}

#sidebar-wrapper {
width: 256px; /* changed; value was 220px */
float: $endSide;
overflow: hidden;
}


You may find other IDs and classes that have a width, such as #header .description. If your blog looks fine on Preview, do NOT change any other widths.

Disabling Background Images

Some XML Blogger templates include a footer in order to present a decorative image for the bottom of the blog. As mentioned above, increasing the width of the blog will mess up these background images and you will have to disable them.

When disabling background images, don't delete any code but just disable the image from displaying by adding several XXXXX immediately after ".gif" in the code. As you customize your template, you may not be sure which background image is which. Hopefully you took notes as you changed widths. In any case, disable one at a time and then Preview. If your change did not disable one of the unusable background images, remove the XXXXX and go to the next background image. For the Thisaway template, I had to disable background images for the following DIVs:

#content-wrapper, #main, #sidebar, #sidebar-wrapper, #footer-wrapper