Pages

How to Change Header Title Font, Size & Color

Intro!

This is a simple Blogger tut to tell you how to change the header title font. First of all, you should know which CSS code is responsible for your header title appearance:

Note: This is an outdated post for old Blogger layouts. New Blogger templates already have options to customize blog title. Just click Customize button in Template tab. Then click Advanced.

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}


How to modify the style???


Now you know the CSS of your title. You can make modifications in it and see your results. Remember, these CSS changes will be visible only on main page because your header title behaves as a link in all other pages. First, let's customize it's appearance on main page.

----------------------------------------------------------------------------------
=> Add a 'font-family' Property!
----------------------------------------------------------------------------------

I want my header title to be in 'Arial' font, the code will be:

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-family: arial, "lucida console", sans-serif;
}

Please note that I'm using 3 fonts (arial, "lucida console", sans-serif) in the above CSS. The reason is that if 'Arial' is not available on your visitor's pc then the font on 2nd position ("lucida console") will be used.

----------------------------------------------------------------------------------
=> Add Style Definitions for Header Title Font on Pages Other Than Main Page!
----------------------------------------------------------------------------------

As I told you before that your header title works as a hyperlink in all other pages of your blog other than the main page, so let's add some more CSS to customize the appearance on pages other than the main page.


#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

/* I've added a new tag which will change header title appearance on pages other than main page */

#header h1 a {
text-decoration:none; /* you can add 'underline' or 'overline' instead of 'none' */
color: #FFFFFF; /* you can add any color you want by changing 'FFFFFF' */
font-size: 25px; /* means title font size will be 25px on all pages other than the main page */
}

/* hover definitions will become alive when you bring mouse over title, this will also work on all pages other than main page */

#header h1 a:hover {
text-decoration:underline; /* title font will be underlined on mouse over */
color: #000000; /* title will become black on mouse over */
font-size: 10px; /* guess what will happen to font size on mouse over */
}

Good to Know!

I always try my best to share all the knowledge I've with you guys. You can always do experiments and share your results with me in comments. You should go to W3Schools.Org to read more about font properties.

23 comments:

  1. I am 70ish so bear with me? I have added a customized font (pea lauryn)to my blog-- http://liittlebits.blogspot.com/. When I edited my Layout HTML with the below and hit Preview, nothing happened. Also, is there a listing for the font colors somewhere that I can download for free? Lucy

    header h1 {
    margin:5px 5px 0;
    padding:15px 20px .25em;
    line-height:1.2em;
    text-transform:uppercase;
    letter-spacing:.2em;
    font-family: pea lauryn, "lucida console", sans-serif;
    }

    ReplyDelete
  2. @ visit my, actually fonts will only appear if they're installed on the computer where the website is being viewed. For example, I can't see any website which is using "pea lauryn" font because this font is not installed on my computer. To see the installed fonts on your computer go to "C:\WINDOWS\Fonts".

    You should also declare your font in double quotes because every font name which contains a space must be declared like this:

    font-family: "pea lauryn", "lucida console", sans-serif;

    I'm in a great hurry... I'll tell you about colors a little later.

    ReplyDelete
  3. Hi Bilal, Im a beginner at blogger. I want to put an icon on my blog title but i dont know how to put on the place i want..could you help me? by the way, nice blog...

    HERE'S my SITE

    ReplyDelete
  4. @ Dr.P, please tell me whether you want your title to appear along with the icon or you just want the icon to appear and the title should be hidden???? I'd love to help you out!

    ReplyDelete
  5. I want it to appear along with the icon, i.e. icon first then the title but on the same line..

    ReplyDelete
  6. This solved my problem, thanks a bunches!

    ReplyDelete
  7. thanks a lot!! i've been looking for this. it help me a lot. my header font look pale before, but finally, i can change the way it look. looking forward for another great tutorial!

    ReplyDelete
  8. hi thank you but i have a problem with the size of the header when i try to change it the menu id damaged
    =>how van i change the header image size without damaging the menu links

    Thanks

    ReplyDelete
  9. Thank you very much ...

    I am newbie at CS3 and HTML , so this information helped a lot

    ReplyDelete
  10. Hi Bilal, how do I center the header title?? Hope you can help..

    ReplyDelete
    Replies
    1. Hi Dilara, what is your blog address?

      Delete
  11. PLEASE HELP :( I want to make new changes with my blog and I would want to edit stuff so first of all I want to change the font which I just installed "Cutie Patootie Medium" or something like that though every time i place it and click preview no changes occur.

    ReplyDelete
    Replies
    1. Hi Kim, what is your blog address? From where you've installed/downloaded this font?

      Delete
  12. Um...hi..again..I'm sorry if I sound a bit demanding ...sorry...I'm just 15 trying to figure out stuffs... i hope you have read my previous comment...well... I was hoping you could already give me a copy-paste ready css for my blogger with that kind of font...sorry... again |(0///0)|

    ReplyDelete
  13. Hello,
    I am having a problem changing the Blog Title Color. I have tried everything from using CSS to changing the color in the code. I can change the size and even the blog description color but the Title will NOT change color. The template I used I uploaded. Can someone please give me other ideas on how to change the red title to black.
    Thanks,
    Jenn

    ReplyDelete
    Replies
    1. Hi Jennifer, just go to the Template tab. Click Customize button. Then open the Advanced options. You'll see options to customize blog title there.

      Regards,
      Bilal

      Delete
  14. When I go to Template, Customize, Advanced, Blog Title and make the changes, then click Apply to Blog, nothing happens. What am I missing?

    Mary
    www.marysgonepaleo.com

    ReplyDelete
    Replies
    1. Hi Mary, I don't know why the changes are not working for you. They should. Do you see changes in real time? I mean when you change the color of blog title, do you see the change in preview as well? Have you customized the template?

      Delete
  15. Yes I can view preview and see the one change that was made but what is there is not what I selected. And yes, I customized the dickens out of my template.

    ReplyDelete
    Replies
    1. Mary, I'd have to edit your template because it is customized and would require a deeper investigation plus a small fee. You can contact me at:

      levisinside0@gmail.com

      Delete
  16. ...and thank you so much for offering to help! I appreciate your presence on the web.

    ReplyDelete
  17. please help me with thw spacing of my blog header

    www.beautyboon.com

    ReplyDelete
    Replies
    1. Hi Anonymous, you are using a custom template. Please contact me through email if you want to get this fixed.

      levisinside0@gmail.com

      Regards,
      Bilal

      Delete