Friday, August 10, 2007

Change font size of blog Header

There was a request for changing the font size to 615px. I tested that at Testing team member removal. The result wasn't pretty. I am putting a screenshot of part of the page below as obviously, I don't want the blog to remain that way and may change it anytime to its original state:

Chnange font size of Blogger blog header

Note that you can't see the whole page and there is a horizontal scroll bar at the bottom when previously, there were none.

This is the way I did it. The first thing you should do before editing or changing template is to backup the template PLUS Page Elements. Refer to Backup and edit New Blogger template and Page Elements and Backup and change New Blogger template PLUS backup Page Elements.

This is the way I did it. I opened the template editor as explained in the above 2 posts and looked for this block of code:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
font: $pagetitlefont;

I added font-size: 615px; to anywhere to the line of codes, for example, at the bottom as shown below:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
font: $pagetitlefont;
font-size: 615px;

Of course, if 615px is too large a font size for you, but you still want to change font size, you can still do it as described above, but give a different (smaller) value to the font size.

BTW, I reread the commentator's question and it appear that what she wants may be to change the graphic image width. If that is so, I may do a new post.


  1. mmm... do you know how to change the header majuscule font into miniscule?

  2. Hi OVNI,

    I am assuming by majuscule font into miniscule you mean from uppercase font to lowercase font.

    Please refer to Change blog title font from uppercase to lowercase and vice-versa.

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

  3. hi peter, how can i split my blog header into two?

    or maybe, when i go to layout, i can see another page element next and on the same level to the header? how can i do that?


  4. Hi Buraot,

    I believe it can be done. Best person to answer is is Amanda of BloggerBuster. Ask her and if you succeed in doing so, hope you will come back and let us know.

  5. Hi Peter,

    Helpful site...

    Can you help me with this?

    In the header Description..The Vigilante Investor - Clearing the Fluff, Seeking the Truth. I am trying to get this sentence into one the "truth" is on the next line...

    How do i do it?

    Also how do change the colour of the title header discription colour?

  6. Opps..

    I think i forgot to add my blog.. for you to see...

  7. What template are you using. To make the description single line you have various choices:
    1. make font smaller
    2. use wider template with wide blog Header eg 4 column Minima template
    3. Modify existing template to make blog Header wider.

    change background color

  8. Play around with this:

    #header .description {
    margin:0 5px 5px;
    padding:0 20px 15px;
    line-height: 1.4em;
    font: $descriptionfont;
    color: $descriptioncolor;

  9. hi Peter,

    Thanks a GOD-zillion. I changed the font already and it's solved!

    You are such as nice person.

  10. Hello Peter,
    Let me start off by saying, I am a fan. You have helped me so much.
    Now, I would like to know if I could add a font to my blog template. I see that there are 6 designs offered, but I would like to have different styles to choose from.
    How can I do that?

  11. Hey there,

    I am trying to eliminate all the space between my header title and my header description. I have been fussing with the margin and the heading, but I want all the space to be gone... any ideas?

  12. Hi Peter,
    Your site is full of great info. I had my picture and blog header height small. I changed the picture and now its huge. I tried resizing the pic, nothing works. Please help me in decreasing the height so it doesn't take up the top half of my page.
    Thank you

  13. I tried to view your blog
    but got a warning message:

    This Connection is Untrusted

    You have asked Firefox to connect securely to,
    but we can't confirm that your connection is secure.

    Normally, when you try to connect securely, sites will present trusted
    identification to prove that you are going to the right place.
    However, this site's identity can't be verified.

    What Should I Do?

    If you usually connect to this site without problems, this error could
    mean that someone is trying to impersonate the site, and you shouldn't

  14. Hello Peter!

    I have a simple question:

    How do you change the whole size of the header box (with everything in it).

    I am happy with the font sizes and graphics within it, but I would like the whole thing to be a little smaller!

    I have read your tips on how to change the font sizes, but didn't come across anything on how to minimize the whole header, in general.

    Thanks for your help!


  15. Look for this in the template:

    #header-wrapper {
    margin:0 auto 10px;
    border:1px solid $bordercolor;

    Change the width to px or %

  16. Hi Peter,
    I don't know why but the title of my blog has suddenly become a small size font and aligned in the centre, whereas usually it is a bigger size and aligned left (that's the standard template design and I never changed that).
    How do I change it back?
    My website is:

    Thanks so much!
    Regards Ivette

  17. Since we don't know exactly what caused your problem, and it would be too much hassle to pinpoint the problem, try the lazyman's way first like change colors and fonts using LAYOUT or, especially if you have not done much customizations, try change or upload fresh template.

    Only when these easy ways don't work, you will then buckle up to study the template to see what went wrong.

  18. Hi peter,

    I'm trying to figure out how to change the size of my post titles. I can't seem to figure it out. Sorry if you've already answered this somewhere, I just might not have come across the post yet, but I'll keep looking.

    Your blog has been extremely helpful while I'm learning all this stuff. It's very informative. I'm glad I found you. Thank you so much!!!

  19. Sign into Dashboard, click LAYOUT > FONTS AND COLORS and look for SIDEBAR TITLE COLOR. Change it to whatever color you want there.

  20. Anonymous3/19/2011

    O.K thanks you sir..
    i'll try it

  21. Anonymous5/01/2011

    i did it peter, thanks..

  22. Anonymous5/23/2011

    this is a very good idea. it works ...

  23. Thanks a lot ma bro, all blogs trik that explain in my language are false, btw thanks a weight...

    sutradara sinting


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics