Pages

How to Change Sidebar Title Font, Size & Color

Blogger sidebar title fonts are very easily customizable like any other section. You just need to find the default CSS definitions of these titles and then we can easily implement our own styles in it.

Let's first check the default style definitions for these titles:



To find this code, go to Layout | Edit HTML and search.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

1- Change family i.e. Arial, Times New Roman etc.


Currently, sidebar title font is defined by font:$headerfont;. It means that your header font and sidebar title font is same but we can have them according to our wish by adding a font-family property.

h2 {
margin:1.5em 0 .75em;
font-family:"Times New Roman",Georgia,Serif;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Info: As you can see that I've added 3 fonts (Times New Roman, Georgia, Serif) because a visitor might not have the 'Times New Roman' font installed on his/her computer, so the browser can chose the other two fonts of first-come first-serve basis.

2- Change size.


Simply add font-size property in the default code.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
font-size:40px;
}

Note: I've added font-size:40px; in which 40px is the size. You can change it according to your wish because 40px is fairly large number.

3- Change color i.e. red, green etc.


Currently, color:$sidebarcolor; property is defining the color. It means that title color is dependent on the sidebar color i.e. sidebar color and title color is same. We can add our own color in it by removing color:$sidebarcolor; and adding color property.

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:#0000FF;
}

Remember: #0000FF is the hex code of blue color.

Tip: You can capture any color on screen and get it's hex code to use it any where, download ColorPic which is a free utility to do that.

26 comments:

  1. I get this and have done it, but it changes the date font of my posts too. How can I change the sidebar title without changing the date font?

    ReplyDelete
  2. @ The Conklins, please gimme your blog address :)

    ReplyDelete
  3. I'm also wondering the same thing as the above commenter. I want to change the color of the date above blog posts only. I do not wish to change the sidebar title color as well. Thanks!

    ReplyDelete
  4. I tried this too, but it did not use the fonts I wanted. It didn't work for my blog. Is there another way to change the font to my own?

    ReplyDelete
  5. @ Heather, find the following code in your HTML:

    h2.date-header {
    margin:1.5em 0 .5em;
    }

    This definition is responsible for the date above posts so you can just add some more properties in it like this:

    h2.date-header {
    margin:1.5em 0 .5em;
    font-size:40px;
    font-family:"Times New Roman",Georgia,Serif;
    color:#0000FF;
    }

    Of course, you can change these settings according to your taste.

    ReplyDelete
  6. @ D, which font do you want to apply?

    ReplyDelete
  7. THANK YOU SOO MUCH! i know i shouldnt use caps but ive been trying to change the font for ages. Thanks again for clear,concise directions

    ReplyDelete
  8. Tks man! but the code segment seems to be available in classic templates' HTML only, so should be a different one for an external...?

    ReplyDelete
  9. @ Lanceleo, all the tutorials on this blog are written according to the Minima template which is a popular default theme. Anyways, if you're difficulty in finding the right code, please feel free to ask for help :-)

    ReplyDelete
  10. Thank you so much!!
    I was like a crazy here looking for change the size the font in my sidebar title!!
    Thank you!!

    ReplyDelete
  11. I have changed my font size and family according to your instructions and it worked very well!! Until I added the pink bar around the sidebar heading, the same bar appears around the date... How and where are the sidebar heading and date connected? How do I remove the pink bar around the date?

    http://lerkvinnanspyssel.blogspot.com/

    ReplyDelete
  12. @ stina_m, yes sidebar title and date heading posts are both h2 tags. That's why when you applied background on sidebar title, the browser automatically adopted it for date heading also. Anyways, in your HTML, find this code:

    h2.date-header {
    margin:1.5em 0 .5em;
    font-family: Verdana;
    font-style: normal;
    font-size: 70%;
    color: #666666;
    }


    and change it to this:

    h2.date-header {
    margin:1.5em 0 .5em;
    font-family: Verdana;
    font-style: normal;
    font-size: 70%;
    color: #666666;
    background: none;
    }


    As you can see, I've just made sure that no background is present on date heading.

    ReplyDelete
  13. Great!! Thanks!! Since I´ve changed the date header quite a lot is there any reason to keep it as a h2? Can I call it say h6?

    ReplyDelete
  14. @ stina_m, you can definitely change it to h6 but make sure to change the CSS definition accordingly :-)

    ReplyDelete
  15. I have the same problem with Heather, what should I do?

    ReplyDelete
  16. Thank you Bilal! Nice tutorial :)

    ReplyDelete
  17. OMG! First time I actually managed to chnge my sidebar title font and size!!!!!
    THNAK YOU SO MUCH!
    It was drving me nuts

    ReplyDelete
  18. Hi! Thanks for this guide! Can you tell me how to change sidebar text color and font?

    Thnax

    ReplyDelete
    Replies
    1. Hi Asaka, please give me your blog address :)

      Delete
  19. hi Bilal,
    I have the same question as Asaka.

    www.thegirlandthebee.blogspot.com

    thanks!

    ReplyDelete
    Replies
    1. Hi Lita, this requires some coding work so, I'll write a tutorial next weekend. Feel free to follow the blog to get notified.

      Delete
  20. I want to change the style of only one gadget i.e. located on the left side of layout. I want to add underline of dashes below title of this gadget. And on the other hand I want to change the style of one gadget i.e. located on right side. For the gadget at right hand side, suppose its title name is "Follow us on Facebook" but due to template's default settings it shows the name in uppercase but it can be easily turned into lowercase or first letter of each word uppercase but I want the title same as I filled it while adding gadget. Can you please help me in resolving both issues?

    Thanks
    Akhil

    ReplyDelete
    Replies
    1. Hi Akhil, I charge $11 per customization. If you're OK with that, send me an email.

      levisinside0@gmail.com

      Delete
  21. Thanks for this post - it worked a treat!

    ReplyDelete