Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Putting images in place of widget titles (http://forum.bytesforall.com/showthread.php?t=2174)

ken.miller Jun 24, 2009 08:02 PM

[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.

Flynn Jun 25, 2009 11:46 AM

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

ken.miller Jun 25, 2009 12:43 PM

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.

Flynn Jun 25, 2009 01:14 PM

Use

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

# for ID's
. for classes

ken.miller Jun 25, 2009 01:38 PM

Added:

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

and it works as expected. Thanks:)


All times are GMT -6. The time now is 07:19 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.