Tag Widget Title

Community Forums Forums Design Tips and Tricks Tag Widget Title

This topic is: not resolved

This topic contains 4 replies, has 3 voices, and was last updated by  newbie999 1 year, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #8452

    newbie999
    Participant
    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 1 year, 11 months ago by  newbie999.
    • This topic was modified 1 year, 11 months ago by  newbie999.
    • This topic was modified 1 year, 11 months ago by  newbie999.
    • This topic was modified 1 year, 11 months ago by  newbie999.
    • This topic was modified 1 year, 11 months ago by  newbie999.
    • This topic was modified 1 year, 11 months ago by  newbie999.
    #8683

    TishaOehmen
    Participant
    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

    #9880

    newbie999
    Participant
    Post count: 8

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

    #9890

    Chris Cree
    Participant
    Post count: 147

    It might be easier to add a display: none; property for those individual widget titles in your CSS. For example
    [css]#tag_cloud-2 .widget-title,
    #categories-7 .widget-title {
    display: none;
    }[/css]

    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.


    #9986

    newbie999
    Participant
    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.