[SOLVED] is possible to give each widget header a different background pic?
i want to add a little background graphic to the right edge of each widget. the graphics are all the same size and configuration, but i want to make a class(?) for each widget so i can specify which graphic goes in each.
is this possible? if so, any tips or tricks to get me heading in the right direction? i'm pretty good with html and css, but wordpress in general and theme customization specifically are both fairly new to me...and i know nothing about [hp. thanks in advance. :-) |
I generally just target the widget with it's own id. If you have a situation where several widgets will be styled one way and several another then setting a class would indeed be helpful. There are plugins that let you specify classes for widgets. You should be able to find with a quick search on wordpress.org.
|
The HTML for widgets is controled by the plugin that it is associated with it. While most add a class of 'widget' not all do, so you might have to edit the plugin's code to add your class
|
thank you both for your replies.
i got the widget info via firebug as follows: Code:
<div id="text-3" class="widget widget_text"> Code:
#text-3 widget widget_text widget-title for testing purposes i added a red background as follows: Code:
#text-3 widget widget_text widget-title {background-color: red;} is my derivation incorrect? i've not that much experience with designating styles for compound cascading elements. or do i have to find the the style sheet for the text and modify text-1, text-2, etc., directly on the dedicated widget style sheet? here is the url: http://pbn.mtouchette.com; "text-3" is the "Quick Links" area. more thanks... :-) |
HTML Code:
#text-3 widget widget_text widget-title {background-color: red;} that is a sub-element of an HTML element 'widget_text', which is a sub-element of the HTML element 'widget', which is a sub-element of an HTML element with an ID of text–3. Not quite what you were meaning to say I would guess. I suggest you run through a CSS tutorial (good one can be found at HTTP://htmldog.com)so you'll have an idea of how to write CSS. |
Also, once you get the syntax figured out and since they are classes, you need to add a . before some of the selectors (EG .widget .widget_text .widget-title
|
Quote:
Quote:
the closest thing to my issue was the section on grouping and nesting. however, it didn't mention anything about how to determine when one should go straight from point a (text–3) to point c (widget_text), or take the long way 'round and include all--or just some--things in between. i'd've kept including it had you not already intimated i should do otherwise. so, i'm still a bit foggy in that respect. @larry, thanks. i was wondering whether or not to include # and . after the first selector designation. i probably tried it both ways, but with the extra selector in there it was moot. i was able to combine your tip with what i learned above to make it all work. thank you both for your time and assistance. :-) |
be careful of your assumptions!
HTML Code:
#text-3 widget widget_text widget-title {background-color: red;} HTML Code:
#text-3 .widget .widget_text .widget-title {background-color: red;} but glad it it is working I will close this. |
All times are GMT -6. The time now is 05:39 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.