[SOLVED] Putting images in place of widget titles
 

Let me start by saying this theme ROCKS!!! Have only been using it for 1 day so far and love it.

I am trying to replace the titles of widgets on the right side with images. I saw a thread that mentioned putting the image tag in place of the title in the widgets, under Appearance, but there's a small problem... One of the widgets I have there is the Links widget, which when you look under the Appearance > Widgets, there isn't a title option for that widget.

So how can I configure the widgets to use images instead of titles?

Thanks.

Add a CSS Insert

div.widget-title h3 {
display: none;
}

div#recent-comments div.widget-title {
background: url(/path/to/recent-comments.gif);
}

div#meta div.widget-title {
background: url(/path/to/meta.gif);
}

div.widget-links div.widget-title {
background: url(/path/to/links.gif);
}


Looks into the source code of a rendered page or use Firebug to figure out the ID or class of each widget. Use the ID if you have several instances of the same widget (i.e. text widget) and want to apply different images on them

Flynn,

Thanks for the quick help!!! Folllow-on question :)

You have as one of your snippets:

div.widget-links div.widget-title {
background: url(/path/to/links.gif);
}

Right now I have several 'links' sections showing up, broken up by category. So for instance, one of them is 'Daily Blogs.' When I look in the page source, it shows:

<div id="linkcat-9" class="widget widget_links"><div class="widget-title"><h3>Daily Blogs</h3></div>

How would I distinguish that specific 'link' category? And would it be widget_links in this case vice the widget-links in the snippet? Would it end up being:

div.linkcat-9 div.widget-links div.widget-title {
background: url(/path/to/links.gif);
}

Also, silly question I am sure, but what is the case that you would use the div# notation?

Thanks again.

Use

div#linkcat-9 div.widget-title {
background: url(/path/to/links.gif);
}

# for ID's
. for classes

Added:

height:60px;
background-repeat: no-repeat;

and it works as expected. Thanks:)