Hi rwdroge,
What you would need to do is find the class name of the area you want to format then add a custom style to your custom.css or Quick CSS option in your theme options that targets that class name.
For example, on http://bijvanatten.nl you have the widget "Volg ons", "Nieuwsbrief", "@BijVanAtten", and "Populair". Now the words "Volg ons", "Nieuwsbrief", "@BijVanAtten", and "Populair" are considered the widget title and have the class name "widgettitle" applied to them. So if you wanted to change the background color of those you would add this CSS.
.widgettitle { background-color:#000000; }
What that does is tell the browser to set the background color of the widget title to black. You of course could change the color.
If you wanted to change the background color of the boxes you would have to locate the class name of the DIV, FORM or UL that surrounds the content. For example, "Volgs on" content has a DIV that surrounds them called "socialmedia-buttons" so in order to style that content I would use this.
.socialmedia-buttons { background-color:#EEEEEE; border:1px solid #CCCCCC; }
This would add a light grey background with a slightly darker grey border around the icons.
Now widget titles always use the same class name. The name you use for the content box is a bit trickier because each widget receives its own class or ID name depending on what it is. For instance, I used "socialmedia-buttons" for the "Volgs on" but the name for "Nieuwsbrief" iwould be "ns_widget_mailchimp_form-2". So you would have to look at the source code in order to find them.
To get you started, here's the class or ID names you would need to add to your custom CSS:
.socialmedia-buttons {
background-color: #000000;
}
#ns_widget_mailchimp_form-2 {
background-color: #000000;
}
.widget_twitter ul {
background-color: #000000;
}
.tw-tabs {
background-color: #000000;
}
Hope this helps!
Regards,
Mya