allow user to style widget backgound per widget

Question

Is there a way to allow a user to style a widgets backgound per widget? Lets say there are 4 widgets in the sidebar, i want the user to be able to style the first 2 with a blue background, the second with a purple background and the final one to have no background but how would you allow the user to make this choice?

Answer 1

In the default theme, or if you have one that is properly written, each widget has a unique CSS class name, you can simply add it to your style sheet.

If it does not, and you want to add a unique CSS class based on the widget placement, as in the order you have drag + dropped it into your sidebar, this was answered here: How can I add an incremental class identifier to my sidebar widgets?

The code in wyrfel's answer will work in your case, but remember that the unique CSS is based on the widget placement in your admin and any removal or moving of them will effect how your CSS is applied.

The alternative is to add a static unique CSS name based on the widget ID, so it doesnt matter where it is placed, the following function should do that,

add_filter('dynamic_sidebar_params', 'sidebar_widget_styling_sws');
function sidebar_widget_styling_sws($params){
  $params[0]['before_widget'] = '<div class="widget-'.@$params[0]['widget_id'].'">';
  return $params;
}