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.

The Scribe template uses images in its background. 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.)

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.

• 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("http://thebloggerguide.googlepages.com/scribe_bg_paper_top_ex.jpg") no-repeat top left;
...
}

#main-bot {
width:900px;
height:81px;
background:#FFF3DB url("http://thebloggerguide.googlepages.com/scribe_bg_paper_bot_ex.jpg") no-repeat top left;
...
}

#wrap2 {
width:900px;
background:#FFF3DB url("http://thebloggerguide.googlepages.com/scribe_bg_paper_mid_ex.jpg") repeat-y;
...
}

#header {
background:url("http://thebloggerguide.googlepages.com/scribe_divider_ex.gif") no-repeat bottom $startSide;
}

#footer {
clear:both;
background:url("http://thebloggerguide.googlepages.com/scribe_divider_ex.gif") no-repeat top $startSide;
...
}

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 do a post in your blog linking to this article.

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