Scribe 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 Scribe 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.

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 200 pixels. (In fact, you can pick an arbitrary size and experiment to see if that is enough for you)

2) Increase the width of the post area

• Go to Layout -> Edit HTML
• Locate the #main 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 630 by adding 200 to the default width of 430 pixels

#main {
width:630px;
float:$endSide;
...
}

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

• Locate the following CSS sections
• Change their width property to 900 pixels

#outer-wrapper {
...
width:900px;
...
}

#main-top {
width:900px;
...
}

#main-bot {
width:900px;
...
}

#wrap2 {
width:900px;
...
}

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

• 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)
• Locate the following CSS selectors.
  
• Replace the URLs of the images to the ones shown in red below.

#main-top {
width:900px;
height:49px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_top_w.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_bot_w.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("$imageHost/scribe_bg_paper_mid_w.jpg") repeat-y;
...
}

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

#footer {
clear:both;
background:url("$imageHost/scribe_divider_w.gif") no-repeat top $startSide;
...
}

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>