So I'm working on designing a Wordpress theme with lots of extra widgets. The ones I have added are in separate files, and called in the functions.php I have lots of css on the widgets themselves and the div classes are in the $before_widget and $after_widget etc in functions.php. My problem is that for certain widgets I don't want the same CSS, for example no background or border. I can't seem to work out how to go about this. If that makes sense. Thanks in advance!
There are 2 ways to allow separate styles on each widget. The first is to add separate classes to the widgets like this:
You can then use the .back-bg class to style the widget like this:
and with no border:
the css would be for instance:
The Second Method
You could also use the theme file where you're placing the call to the sidebar/widget. For this way you would just use the same before and after widget, but use a class or id to wrap the sidebar in the template file like this:
Then in whatever-themefile.php you could do this:
Response to Comment:
I just assumed you meant sidebar. Most refer to custom sidebars as "widgets", so let me try again.
I don't completely picture what you're wanting, but each custom widget you register will have it's own class. If the widget is used more than once, it just seems to make sense to me to use the "location" it will be placed to handle the styling (which would be the dynamic_sidebar it's place in).
If you're talking about how to add separate style to a single widget that is placed more than once in a given sidebar I would simply use the css pseudo selectors (odd/even). For example: