Blogger template help – Widening Minima template

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.

3200434345_dd15596449_o

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.

 

click for large view

 

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.

 

click for large view

 

  • 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.

Resources:

IFB: Pimp your Images

Leave a Reply

Your email address will not be published.

19 Responses

  1. Ashe Mischief

    This is an excellent tutorial! Many things, like the size of our banners, can really make an impression on our viewers and readers. Taking the time to fix something like this (that looks like a very fast & easy fix compared to other issues!) can make a world of a difference!

    Thank you, Songy!

    Reply
  2. Rose

    Very helpful :] I was just starting out with Blogger after many months of blogging at a self-hosted WordPress account. I really liked the Minima theme but it was too narrow for me. I never thought I could widen it up a bit until I came by your blog. Thanks! :]

    Reply
  3. songy

    @Couture Allure

    thank you for that! 3 col layout is simple enough I guess. I will try to post that soon for you. In the mean time if you want a quick and dirty fix I could send you an xml file which you can upload. I used to have that layout before I switched over.

    Cheers
    Songy

    Reply
  4. Rodlie Ortiz

    Songy, you are a dream!! Thanks for helping me so much. I was about to give up on it. This is a great post, and you’re very generous. Three cheers!

    Reply
  5. Fashion Models

    Thank you friend.
    Can you provide me a template for modeling blog.

    Reply
  6. Jas

    Thanks so much I’ve been wanting to not ‘shrink’ my header for a while now and widening the posts section is fabulous too! Thanks a bunch!
    .-= Jas´s last blog ..(More) Banana Love =-.

    Reply
  7. izreen

    fantastic tutorial!
    i’m new to blogging & was having fun playing around with my site design until i faced this problem! it’s been bugging me this past week & in the process, held me back from actually publishing my blog!…of course like you said, for some it wouldn’t be a problem, especially when mine was a mere 2px too wide (or something like that!). couldn’t find a perfect solution after googling & surfing and was thrilled to find your site!
    excellent tutorial & a life saver for blogging-dummie perfectionists world wide 😉

    Reply
  8. Ingeborg Hansen

    Hi
    Thank You for giving us the exact amount of pixels to be used in the Minima header.
    I have spent hours to find out.
    Another thing I would like to do: linking to other homepages on blogger – ist it possible at all.
    I mean to write a link in my text ?
    Kind regards
    Ingeborg
    .-= Ingeborg Hansen´s last blog ..En aften på terassen =-.

    Reply
  9. Ilya

    Hi, i have a question.. i also use the template ”minima”.
    When i choose minima lefty all the columns are in the middle, and i really like that.. but the pictures in my posts are cutted(?) on the right sight. With minima lefty stretch is the picture in the size i want.. but is the left column not in the middle but on the left sight.. i mean this blog: fashiontoast.com looks like the template minima but she didn’t have the problem as i have. Im really sorry for the bad english, i hope you understand me. x

    Reply