Making Blogger Templates adjust to Page Width

It will come as no surprise to readers that this Blog is created by Blogger. It is, after all, shown on the links and in the bar across the top of the screen. I edit in Blogger, and then the pages are loaded onto the serentycomputing.com web servers automatically.

My one big issue with the Blogger system has been that it caters to the lowest common denominator. the 640 x 480 screen that was the original IBM VGA screen resolution. 640x480 went the way of the Dodo years ago. But then it came back with netbooks like the Asus Eee PC. I own the Eee 702, with a screen resolution of 800x480.

This makes a web site difficult to design. You do not want to make it impossible to browse with a netbook, but using as much screen space as possible is a goal. Blogger uses a format (for almost all templates) the uses a narrow format suited to 640x480 but is a narrow "neck tie" down the middle of the screen on better monitors.

I was inspired by a Youtube video about customising your blogger template. It gave me clues, and I went fishing in my template file. If you use blogger, when you edit a post or manage your dashboard you have a tab for "Template". This site is based on the "Rounders 3" template. It narrows the page to fit 640x480 browsers. The "Neck Tie" I spoke about above.

First be sure to copy the content of the template to a safe place. save a copy to your local machine using a text editor.

I went through the template and deleted all references to "url(http://www.blogblog.com/rounders3/corners_cap_xxx.gif)" these are the grapics that round the corners of each box on the screen. If you want a fixed format, you can fix these, rather than deleting, but I simply removed them.

Then I found @media all { and changed it from a number of pixels to 95%.
I found #sidebar { and changed it from 220px to 25%
I changed #main { from 485px to 72%

The result is a "Rounders 3" template that re-sizes to fit the client screen size. It is not perfect, but I am very please with the result.

I just HATE wasting pixels!

Enjoy!