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

7 comments:

Engineer_4m_hyd said...

is there any way to use existing image rather than hosting it again in Google sites .

Karthik Padmanabhan said...

The rounded corner images in the template I used are single length images, matching the width of the content area.

You can try using the same image and just increase the width, but it would look stretched out.

Except for these rounded corner images (which are gif's with transparency), I think the rest can be used as is.

Phoenix Web Solutions said...

Any idea how to add an extra column for gadgets? I have one on the right but not on the left.

OB said...

how to change the width of the corner image? even if it looks stretched, it might just be ok.

otherwise is it ok to link with your GIF's?

Karthik Padmanabhan said...

@ MMA Explosion - Sorry dude for such a belated reply - I was just held up with many things. Anyways, just in case you have'nt found it already - gadgets are basically 'widgets' which can be added into 'sections'.

From your question I understand that you are looking for a 3 column template - reserving the left and right for gadgets.

If you have such a template, but if it only has one side reserved for gadgets, what you could probably do is move these gadgets around to wherever you want.

If you view your template HTML source via your Modify Layout - Edit HTML, you would notice things like this:

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:section>

This is a section that has the followers widget in it. You can copy this whole section and move it to another part of your template.

Hope that helps...

Karthik Padmanabhan said...

@Mouchy - As I had mentioned in my earlier comment, the corner images are fixed width ones, prepared entirely based on the original template content. If you were to use them as image tags (<img>), you could specify the width explicitly, like width="695".

Please feel free to link with my images if you want to...

Vishal said...

Thanks Karthik.

I used your tips to improve my blog layout. Increased the width of few of the items. Also, for the rounded iamges, I just deleted the image. So I dont have the rounded corners, but thats fine with me and it was much easier.

Visit my blog http://hublidharwad2020.blogspot.com