This post is by Songy of Style Discovery, who often writes handy blog tips as well as covering Australian fashion. Since many bloggers use the Blogger templates, one of the most popular is Minima (it's what I used to use when I was on Blogger). Here Songy shows us how to widen the template.
There are plenty of Blogger template help sites available online so I was just going to ignore my urge to help people but I couldn't.There are things that bug me a lot and one of them is seeing blogs with header images out of place – sticking out of Blogger header boxes..This is for you Nell, Carla and anyone with the similar header situation. I wouldn't even call it a problem. These bloggers may not care!?
This is only a concern for those using Blogger's default template Minima.
There are several options in making the header image fit snugly into the Blogger template header box but I'm giving you two here.
First, size your image so that it fits in the box. How? The header box can stretch vertically but not so well horizontally. So make sure your header image is no more than 648px wide. Don't ask me why it's 648 instead of 650. I can tell you but it will bore you to tears. I'd stay well away from the ‘Shrink to fit' option'. Arbitrary shrinking never quite works with all images.
If you want your header image to be wider than 648 px then you need to make some changes in the ‘Edit HTML' page Before you make any changes though make sure you back up your current template.
What you need:
- header image that is wider than 649px
- Firefox browser (try to do this in IE or in Chrome you will age about 10 extra years)
I'm assuming you know the size of your header image (if you don't, get Picasa 3). In Nell's case it's 760 px wide. The header box will then have to be 12px wider than 760 px (why? boring.. CSS stuff you don't want to know). Minima template's default width is 660 so you will want to change that to 772.
- Go to Layout>Edit HTML and do a search (Ctrl+F) for #header-wrapper.
- Change 660px to 772px and Save Template.
- Upload the header image (Page elements menu>Edit Header image) – can't see the link and it's cut off? Read on…
That's swell but the body content is now out of whack. This means you need to change the body content width as well to make this layout work.
- Go to Layout>Edit HTML and do a search (Ctrl+F) for #outer-wrapper.
- Default is 660 so for the outer-wrapper you want it to be the same as the Header which is 772px.
- Here we need to figure out how much increase is required for #main-wrapper which is currently 410. Let's do some simple math. 772 (new)-660(default)=112 (additional). 410(default)+112(additional)=522(new main-wrapper). Change 410px to 522px.
- #sidebar-wrapper, I will leave it as is.
Here it is: fixed header fitted snugly around the header box and the main wrapper to match. Any questions? Email me at songyknox at gmail dot com. Ciao.