How to Add Images to Gadget Titles Using CSS

In a previous post, I showed how to change or add a custom background and banner to your blog, which was pretty simple, and only required one CSS code. This next step is what I call CSS Intermediate; it has very basic CSS coding, but finding and editing the code can be tricky. Now, I'll show you how to add images to the titles of gadgets like the ones you see on the right and left of my blog.

To begin, go to the Extras section on The Cutest Bog on the Block (TCBotB for brevity's sake) and choose a set that you like, or, if you're feeling creative, you can make your own. Download, extract and then upload your images to an image hosting site, such as Photobucket. Once this has been done, it's time to get a little more complex.



In order to find your individual gadget codes for CSS, go to Template > Edit HTML. Scroll all the way to the bottom and you will see the actual gadget IDs for all of your gadgets, listed in the order that they appear on your blog. So, in my case, the CSS gadget ID for my "Blog Archive" gadget is "BlogArchive1." It is important that you are able to find your own individual codes, as the code names can be different for each blog.

Look here for your Gadget ID

Next, we will use these gadget IDs to write codes that will replace the Titles with images.Using my "Blog Archive" and "Followers" as an example, the codes for the gadgets you want to change should look similar to this:

#BlogArchive1 h2 {
background: url(your image url) no-repeat bottom left;
height:100px;
width:750px;
padding-top:10px;
font-size:0px;
}

 

#Followers1 h2 {
background: url(your image url) no-repeat bottom left;
height:100px;
width:750px;
padding-top:10px;
font-size:0px;
}

For the image url, remember to put in the "Direct Link."

Only use "Direct Link"!

Now that you have the code go to Template > Customize > Advanced > Add CSS, and put your code in, and press "Enter" after the last bracket. You may have to resize your images in Photobucket, as it's been my experience that they can be pretty big on your blog.

If your image seems cut off at the top, you can adjust the "height" value.

Before (top) and After (bottom)

If your image is on the right gadget sidebar (your right as you are looking at your computer screen), and seems cut off on one side, you can adjust the "width" value.

Before (top) and After (bottom)

However, if your image is on the left gadget sidebar (your left as you are looking at your computer screen), and is cut off on one side you will have to add right:00px to your code for that gadget, and change the value until it shows the whole image. For example, this happened to my "About" gadget title image, which was being cut off by my post section, so I had to change the CSS code to this:

#Profile1 h2 {
background: url(your image url) no-repeat bottom left;
height:100px;
width:0px
padding-top:0px;
font-size:0px;
right:30px;
}

IMPORTANT: Only the change the values in red. In order for these images to serve as gadget titles, you must already have a text title in place, even if it's just the default title! This is a very important detail that can be easily overlooked.

For instance, in the screenshot below, the "Title" box is empty, and therefore the image has nothing to replace in the header of this gadget, so it will not appear.

No title = No image

In this screenshot, the "Title" box has the default title, and therefore, the image has something to replace in the header, allowing the image to be seen

Title = Image

And now you have nifty gadget titles to match your background and banner!