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;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;}

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 {
width:XXXpx;
background-image: url(XXX);
background-position:XXX;
background-repeat:XXX;
display:block;
font-family:XXX;
font-size: XXXpx;
line-height:XXXpx;
text-transform:XXX;
color: #XXX;
border: XXpx solid #XXX;
background-color:XXX;
font-weight:XXX;
text-align:XXX;
margin-top:XXXpx;}

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!

---