Add an image to your widget headline

If you look at my sidebar you’ll see that “Categories” and “Latest Tutorials” have a purple splash behind the headline. That is an image. I created it in photoshop. You can put whatever type of image you want, within reason, in your widget headline. The default line height for the widget headline is 1.385 em’s. Obviously if you want to put in an image that’s bigger than that then you’ll have to change that property.

In your custom.ss file add the following code. You can put it anywhere you want but I recommend putting it at the top. Remember, once you make the change, save it, and upload the new file to your server. Always describe what you’re doing by putting your descripton between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*custom image in widget headline*/
.custom .sidebar h3 {
background: url(images/name of your file.jpg) no-repeat ;
line-height: 3.6em;
padding-left: 2em;
color: #000000;
}

The image can be a jpg, gif, or png

I changed the line height to accomodate my image size

The padding was to move “Customize Thesis” over a little bit

The color was to make the headline text darker

Tagged as: add an image to your widget headline, custom.css, headline, image, widget