Tuesday, April 22, 2008

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

(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 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 610 by adding 200 to the default width of 410 pixels.
#main-wrapper {
width: 610px;
float: $startSide;
...
}

3) Increase the width of the other wrappers to accommodate the expanded main wrapper.
  • Locate the CSS sections called #outer-wrapper, #header-wrapper, #header .description and #footer
  • Increase their width property by the same amount of pixels selected in step (1)
#outer-wrapper {
width: 860px;
margin: 0 auto;
...
}

#header-wrapper {
width: 860px;
margin: 0 auto 10px;
...
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:860px;
...
}

#footer {
width: 860px;
clear: both;
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.