Tag Widget Title

[newbie999Participant Post count: 8]

I want to use images for titles for my sidebar widgets. This isn’t a problem with text widgets. For non-text widgets (such as my tag cloud) it is controlled by the H4. I don’t want to change all non-text widgets in the same way but rather be able to control them individually.  Even if I leave the title field empty it either puts in “tags” or “categories” there depending on what’s displayed in my tag cloud. How would I control just that title field? I want to ultimately put an image there and have the pinkish/”find more” be completely gone. I’ve tried what’s below but it seems to be just putting my test image over the existing pink title field that says read more.

#tag_cloud-2 .widget-wrap .widgettitle {
background-image:url("http://www.livecrafteat.com/wp-content/uploads/2012/12/sidebar_test.png") !important;
}


http://www.livecrafteat.com

• This topic was modified 4 months, 3 weeks ago by  newbie999.
• This topic was modified 4 months, 3 weeks ago by  newbie999.
• This topic was modified 4 months, 3 weeks ago by  newbie999.

• This topic was modified 4 months, 3 weeks ago by  newbie999.
• This topic was modified 4 months, 3 weeks ago by  newbie999.
• This topic was modified 4 months, 3 weeks ago by  newbie999.

[TishaOehmenParticipant Post count: 15]

I would try:

<code>#tag_cloud-2.widget.widget_tag_cloud .widget-wrap h4.widgettitle {

background-image:url(“http://www.livecrafteat.com/wp-content/uploads/2012/12/sidebar_test.png”) !important;
}</code>

You’ll also need to put a space “&nbsp;” in the title of the widget to get the “find more” to drop out and leave just the image. If that doesn’t work, let me know.

---

Tisha Oehmen, Paradux Media Group
Twitter: @TishaOehmen

[newbie999Participant Post count: 8]

The “&nbsp;” gets rid of the default title but the CSS didn’t seem to change anything.

[Chris CreeParticipant Post count: 115]

It might be easier to add a display: none; property for those individual widget titles in your CSS. For example

#tag_cloud-2 .widget-title,
#categories-7 .widget-title {
	display: none;
}

Use whatever widget ID’s you want to adjust. Then you can “cheat” by adding a text widget above each of them with the title image only coded up as straight HTML in the body of the text widget instead of as a CSS background.

---

Google+ | Twitter | Facebook | About.me

[newbie999Participant Post count: 8]

Thanks Chris. That’s a decent workaround. The problem then is how do I eliminate all the extra space between the two widgets? Since I’m using a text widget as a title/header for the widget below it leaves a bunch of white space when compared to other widgets. I’d like it to be consistent down my sidebar.

[Author]

Posts