Denim 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 Denim 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-wrapper 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 664 by adding 200 to the default width of 464 pixels.

#main-wrapper {
width: 664px;
float: $startSide;
...
}

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

• Locate the CSS sections called #content-wrapper and #header
• Increase their width property by the same amount of pixels selected in step (1)
  

#content-wrapper {
width: 960px;
margin: 0 auto;
...
}

#header {
width: 960px;
margin: 0 auto;
...
}

That's it! Preview and experiment with different increments. Click SAVE TEMPLATE once you get the required increment.

You should now have more room to play around with, in your main post area.