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)
-   -   Widget Title Box Image? (http://forum.bytesforall.com/showthread.php?t=6321)

Antonino Giglio Mar 17, 2010 11:01 PM

Widget Title Box Image?
 
Is it posible to insert an image of in the Widget Title Box to use it as background?

Thanks!!! ;)

juggledad Mar 18, 2010 05:04 AM

Yes, but you need to use a CSS Insert

Lets say you wanted to put the email.png (which is in the atahaulpa images folder) as a background to the 'Categories' widget. If you look at the generated code for a page, you see the widget looks like this:
HTML Code:

<div id="categories-3" class="widget widget_categories"><div class="widget-title"><h3>Categories</h3>
the ID in the first part has a number that increases as you use the widget so you can uniquely identify each occurance, but we will ignore it. To get the image you can use the CSS RULE
HTML Code:

{background: url("http://yourdomain.com/wordpress/wp-content/themes/atahualpa/images/email.png")
but now you must create the CSS SELECTOR.

If you just used 'div.widget-title' you would effect all the widgets. If you just use 'div.widget_categories' you would put the background behind the entire widget, so you must use a combination 'div.widget_categories div.widget-title' so your final CSS insert would be

HTML Code:

div.widget_categories div.widget-title {background: url("http://yourdomain.com/wordpress/wp-content/themes/atahualpa/images/email.png") }
hopw this helps

debeerj Mar 18, 2010 07:51 AM

I want to change the background color of a custom widget that I added. Can I use the widget ID instead of the class and replace it in your code.

juggledad Mar 18, 2010 10:29 AM

debeerj - yes you can, the ID is how you target a specific element (in your case the widget)

AussiAnni Oct 12, 2010 07:51 PM

I want to add a small icon that is right aligned and on top of the background colour with the text still visible. So ultimately the title bar would look exactly as it is but with a little icon on the right hand side.

I have messed around with the css a bit but just couldn't nail it.

*edit* It's OK I worked it out by adding padding and making the background colour transparent. I feel so clever lol


All times are GMT -6. The time now is 06:31 PM.

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