Sidebar Cosmetic Surgery

I didn't like the dotted line border that the Rounders template placed below my sidebar widget titles. I like the little graphic image that the Harbor template uses instead. It's a simple fix and this post serves as a way to document it.




In the template, change the following:


#sidebar h2 {
color: $postTitleColor;
border-bottom: 1px dotted $postTitleColor;
}


To:


#sidebar h2 {
color: $postTitleColor;
background:url("http://www.blogblog.com/harbor/divider.gif") no-repeat center bottom;
padding-bottom:7px;
}


In the rounders template, the lines to change are found directly above:

/* Footer
----------------------------------------------- */


These images of the top sidebar show that things are not quite so easy there.




The image on the left shows that the .gif image is a poor color match and appears distorted.

On the right you can see my effort to modify the image.



The modified image is dark and appears OK except that I have introduced a light background. This, I'm sure is due to my lack of ability with Photoshop Elements.

If someone can tell me how to properly change the divider.gif image to black without messing up the background, I will make the template changes and post them here for all to see.