Problem Description:

In our eCommerce themes, only some of the widgets have a pre-defined background color (testimonials and text widget) that are affected by the secondary content background control found in the WordPress Customizer. If you want to change each widget individually, you must do so with Custom CSS and child-selectors.

Note that the Slider widget inherits background colors/images from the post options panel.

Answer:

To understand using the browser inspector in more detail, see  How to Find the ID or class name for an element to use in Custom CSS

1. Setup your widgets in the order you plan to leave them

2. Using a webkit browser (we recommend Chrome or Firefox), right click the widget’s title and choose Inspect Element from the context menu.

3. You will see an HTML stucture similar to the following, taken from our Department theme demo

home-widget-child-select

4. The home page widgets are listed in a container with the home_page_downs id, each within a separate <li>.

  • If you want all content widgets of s specific type to be one color, you can use the widget type’s class, such as “product-content-widget” or “services-content-widget”
  • If you want each widget to be a unique color, you must use child selectors.

 

Using the class name:

 

.product-content-widget{background-color: blue !important;}
 
.services-content-widget{background-color: black !important;}

 

The above makes all product widgets blue and all services widgets black, but allows any other arguments in the original background property on those styles to be retained.

Using child selectors:

In our example above, we want to make the second Product Content widget (the 4th widget in the list) have a special color. We can’t just use the product-content-widget style because that would also change the first one. By selecting the 4th child (li element) of the home_page_downs container, we can target it specifically:

#home_page_downs li:nth-child(4){background-color: yellow !important;}

This technique works for selecting any li within #home_page_downs with the exception of the first or the last, which use li:first-child{} and li:last-child{} instead.

For more on using nth-child, see CSS Tricks : nth-child