Friday, August 1, 2008

Increased the width of a fixed layout blogger template

I got bugged since the blogger template I chose for one of my blogs was fixed to allow it to be viewed in well in 640x480.

I dug into the HTML and did the following to increase the width...

  1. Go to Layout > Edit HTML
  2. Keep Expand Widget Templates deselected
  3. Find the part which says #main-wrapper {
  4. Change the part under this which say something like width: 410px; to width: 570px; (800 - 600 = 160 pixels... Assuming you want to fit it in 800x600 from 640x480)
  5. Find the part which says #outer-wrapper {
  6. Change the part under this which says something like width: 660px; to width: 820px;
  7. Find the part which says #header-wrapper {
  8. Change the part under this which says something like width: 660px; to width: 820px;
  9. Find the part which says #header .description {
  10. Change the part under this which says something like max-width:700px; to max-width:800px;
  11. Do a Preview to check if you've got what you want
  12. Save the code and you're done :)
Tada!