Tuesday, July 21, 2009

How-to: customize sidebar headings

Since I already did one, I figure I might as well do another html/css tutorial! This one is a lot easier than the other one.

If you've ever tried changing the font, color, size, and appearance of your sidebar titles using Blogger's "fonts and colors," you'll realize that you are quite limited in what you can do. Basically, you can only change the size, color, and font (and it's only capital letters!). Also, it doesn't only apply to the sidebar headings. It will change any headings you have. In this tutorial I wanted to explain how you can spiff up those headings and make them more personalized (:

First off, I usually use the Minima template as a base. Idk if it's all the same for the other templates (I think it is) but all my base coding comes from there.

You'll need to go to Dashboard > Layout > Edit html. Scroll until you find this:

/* Headings
----------------------------------------------- */

This is where the editing will take place. This should be the only section of code:
h2 {
margin:1.5em 0 .75em;
line-height: 1.4em;
h2 means that editing the code will customize ALL h2 headings. I'm assuming you'd want your sidebar headings to be differently customizable from the rest of your headings :P So, replace that whole section of code with this:
#sidebar h2 {
background-image: url(XXX);
font-size: XXXpx;
color: #XXX;
border: XXpx solid #XXX;
By changing it to sidebar h2, now only the sidebar headings will be affected. Also, if you have more than one sidebar (like in my case) and you want each sidebar to have different style headings, you'll have to assign each element different names besides just "sidebar h2." For example, "#sidebar-left h2" and "#sidebar-right h2."

That made it almost TOO easy eh? lol xD I've included in this new code practically all the attributes you can apply to your headers. All you have to do is replace the XXX's with your own specifications. You can delete attributes if you don't need them (delete the whole line) or add new attributes if you'd like, for example: border-bottom: 1px solid;

Have fun editing!


  1. you are such a nerd and i love it. haha! ;P thanks for sharing this! when i have time, i might just play around with my sidebar! ;P

  2. thank you soo much for this!!! although i'm still hesitant to mess around with it.... i'm so not good with html stuff...as you can see from my blog haha!!

    and i agree with you... dana's is too sweet!!!

    and you are too... i really meant the beginning of my post... thank you for always supporting me with your sweet comments!!


  3. haha this sounds so much easier to do than the way I was doing it. I just added a new h5 and relabeled all my widgets with that instead of h2. lol.

    Yaay for the beach! Haha yeah that still counts ;) OoOo what kind of dogs do you have? I want a chihuahua-fox terrier someday...my cousins have one named Joey and he's the cutest thing!


If you have any questions, comments, or feedback, feel free to drop me a line and I'll get back to you asap :)