Wordpress Widget Area Background Color

Question

I'm looking to change the background color of my wordpress widget area row. I'm looking for the last css code to add to my style.css that turn the black over to the cream color: #fcf8ee

I currently have:

 .widget { background-color: #fcf8ee; color: #000; } 

 <div class="footer-widgets" id="genesis-footer-widgets"> <h2 class="genesis-sidebar-title screen-reader-text">Footer</h2> <div class="wrap"> <div class="widget-area footer-widgets-1 footer-widget-area"> <section id="text-2" class="widget widget_text"> <div class="widget-wrap"> <div class="textwidget"> <p>...</p> </div> </div> </section> </div> <div class="widget-area footer-widgets-2 footer-widget-area"> <section id="text-4" class="widget widget_text"> <div class="widget-wrap"> <div class="textwidget"> <p>...</p> </div> </div> </section> </div> <div class="widget-area footer-widgets-3 footer-widget-area"> <section id="text-3" class="widget widget_text"> <div class="widget-wrap"> <div class="textwidget"> <p>...</p> </div> </div> </section> </div> </div> </div> 

widget area screenshot

I've already tried .widget-wrapper .footer-socket-wrapper and .widget-title What am I missing?

Answer 1

I've had a look at your site (the address could be gleaned from the image attachment) and edited the post to include a streamlined version of your footer code. Using the browser's devtools/inspector , you can see that the background color is applied to the entire .footer-widgets area, and so it's a simple fix selecting this to get the desired result:

.footer-widgets {
    background-color: transparent;
    color: #000000;
}

You could specify the same background color as the page, but if you set the background color as transparent, then you don't have to worry about changing this line of code should your page's background color ever change.

.widget selects a number of children, but you need to get the parent. Gaining familiarity with devtools is the best way to learn about and debug issues like this. Good luck!