Tuesday, January 27, 2009

Modifying Blogger Template – Resizing main Blog Area

The Google blogger has a decent bunch of templates to choose from and when I had to choose one I took a couple of minutes to think.

I would be posting code snippets and occasionally diagrams or images, maybe screen captures to explain something. But primarily the content will mostly be text with a lot of code.

I did not want a dark background with white fonts – I think no one will ever want to use that for writing technical content. Somehow I did not like the fully white templates as well. Most of the templates offered looked too simple and without many colors.

I finally chose the Rounders-3 (Green version) because it was simple and slick and the colors were fine and looked professional. However there was one drawback with it which I noticed as I started to post. The space reserved for the main blog was too little and any post that I did looked obtrusively lengthy. The code snippets that I posted had to be broken down to multiple lines despite using a smaller font. Making the fonts any smaller would be make it impossible to read.

So the only options I had were to either expand the main blog area or choose another template. But then, since I liked the template and also because did not want to perform a huge face-lift to a blog with steady traffic, I chose option A.

The change, I presumed, should not be difficult to make and it was not that difficult at all.

The default template was done to fit 800x600 resolutions and hence the max size of the title and footer was at 740 px. I am not sure if there are any more people using such low resolutions, but anyways I had my Google analytics stats to answer my question. There was less than 1% of the total visitors in that screen resolution.

Convinced that it would not affect the majority of the users, and even for those affected, they only have to scroll to see the profiles section, I proceeded to make the change.
Just wanted to jot down the exact changes made, as a ready reckoning for myself and others:
1. CSS properties had to be changed for the main blog area and the Title
2. Noticed that the rounded corners were not images for just the corners, but were a strip, hence had to modify the images and adjust it to the new width

That was all that needed to be done.

I used Google sites to upload my modified images. There was a snag in accessing the images from Google sites. Read more about it here.

Actual CSS Changes

#outer-wrapper
width:940px;
change image – used
http://sites.google.com/site/codingpassion/Home/corners_main_bot.gif?attredirects=0

#main-wrap2
change image – used
http://sites.google.com/site/codingpassion/Home/corners_main_top.gif?attredirects=0

#main
change image – used
http://sites.google.com/site/codingpassion/Home/rails_main.gif?attredirects=0

.main .widget
width: 668px;

.main .Blog
width: 684px;

#header-wrapper
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_top.gif?attredirects=0

#header
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_bot.gif?attredirects=0

#footer-wrap2
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_top.gif?attredirects=0

#footer
change image – used
http://sites.google.com/site/codingpassion/Home/corners_cap_bot.gif?attredirects=0

Before


After
Post a Comment