Changing $before_widget for certain widgets

Question

There are 2 ways to allow separate styles on each widget. The first is to add separate classes to the widgets like this:

First Method

register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul class="black-bg"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

You can then use the .back-bg class to style the widget like this:

#sidebar .black-bg {
background:black;
}

and with no border:

register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul class="no-border"><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

the css would be for instance:

#sidebar .no-border {
border:none;
}

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:

register_sidebar(array('name'=>'sidebar1',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));
register_sidebar(array('name'=>'sidebar2',
 'before_widget' => '<ul><li>',
 'after_widget' => "</li></ul>",
 'before_title' => '<h2 class="widgettitle">',
 'after_title' => "</h2>"
  ));

Then in whatever-themefile.php you could do this:

  <div class="black-bg">
    <?php if ( function_exists ( dynamic_sidebar(1) ) ) : ?>
    <?php dynamic_sidebar (1); ?>
    <?php endif; ?>
  </div>

The style:

.black-bg {
background:black;
}

And…

  <div class="no-border">
    <?php if ( function_exists ( dynamic_sidebar(2) ) ) : ?>
    <?php dynamic_sidebar (2); ?>
    <?php endif; ?>
  </div>


.no-border {
border:none;
}

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:

/*EVEN*/
#sidebar .black-bg:nth-child(even) {
background:transparent;
border:none;
}

/*ODD*/
#sidebar .black-bg:nth-child(odd) {
background: black;
border:1px dotted silver;
}