[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:from there i derived .

for testing purposes i added a red background as follows: . but it didn't take.

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... :-)

In English that says 'apply a background color red to the HTML element 'widget–title'
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

--actually, that is exactly what i meant to say. though i took your comment to mean otherwise and started by eliminating the middle-man selector. it worked.

nice resource, wish i had known of it way back when i was learning all the stuff it talks about.

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!
and
are two different thinge. the first is totally invalad because it would be looking for an HTML element <widget> and <widget_text> and <widget-title> and they are all invalid HTML Elements.

but glad it it is working I will close this.