Rounders with a wider post area

Article Series: Wider 2 Column Templates - Step by Step Guides

Here are the steps to increase the width of the main post area of the Rounders template by a desired amount. This is useful if you frequently upload images/embed videos etc that are wider than the default width of the post column. (For other Rounders templates, check the series home given above)

The Rounders template uses images for the rounded header, footer and borders of the main post area. We need to expand these images when increasing the width of the post area. This tutorial uses custom images hosted on The Blogger Guide companion web site. (Note: The images used by templates must be hosted online.)

(Note: Ensure that you back up your template before doing any changes, to be able to restore if anything goes wrong)

1) Decide the amount of pixels by which you want to increase the width of the post area. In this article, I will be expanding it by 240 pixels. (Note: You need background images that are expanded by the same size as the amount of pixels by which you expand your template. The steps here will only work for an expansion of 240 pixels)

2) Increase the width of the post area and its background images

• Go to Layout -> Edit HTML
• Locate the #main-wrap1 CSS selector (Do a Find using your browser)
  
• Increase its width property by adding the amount of pixels picked in step (1). Here we change it to 725 by adding 240 to the default width of 485 pixels
• Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
• Change the URL of the background property to the one shown in red below

#main-wrap1 {
width:725px;
float:$startSide;
background:$mainBgColor url("$imageHost/rounders_corners_main_bot_w.gif") no-repeat $startSide bottom;
margin:15px 0 0;
...
}

• Locate the #main-wrap2 CSS selector
• Change the URL of the background property to the one shown in red below

#main-wrap2 {
float:$startSide;
width:100%;
background:url("$imageHost/rounders_corners_main_top_w.gif") no-repeat $startSide top;
padding:10px 0 0;
}

• Locate the #main CSS selector
• Increase its width property to 725
• Change the URL of the background property to the one shown in red below

#main {
background:url("$imageHost/rounders_rails_main_w.gif") repeat-y $startSide;
padding:0;
width:725px;
}

• Locate the following CSS selectors and change their width properties as shown in red below.

.main .widget {
margin-top: 4px;
width: 708px;
padding: 0 13px;
}

.main .Blog {
margin: 0;
padding: 0;
width: 724px;
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.

• Locate the CSS section called #outer-wrapper
• Increase its width property by the same amount of pixels selected in step (1)
  

#outer-wrapper {
width: 980px;
margin: 0 auto;
...
}

4) Replace the other background images with expanded ones as necessary.

• Locate the following CSS selectors.
• Replace the URLs of the images to the ones shown in red below.

#header-wrapper {
background:url("$imageHost/rounders_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

That's it! Click SAVE TEMPLATE and you should now have more room to play around with, in your main post area.

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/04/wider-2-column-templates-step-by-step.html">Wider Two Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>