BEFORE
AFTER
The Extra Theme doesn’t (yet) include an option to set the background color on the titles of widget boxes in the custom sidebar widgets and sidebar module. Fortunately, it is easily done with this bit of CSS:
/* === Change background color on widget titles === */
/* https://extrabooster.com/changing-the-background-color-on-widget-titles/ */
.et_pb_widget .widgettitle,
.et_pb_widget .wp-block-group__inner-container > h2,
.et_pb_widget .wp-block-group__inner-container > h3 {
background:#D0C2B2 !important;
}
/* === END === */You can add this to the theme by pasting it into the “Custom CSS” box found in the theme options area at “Extra > Theme Options > General Settings” (at the very bottom). Just change the #D0C2B2 part to the hex value of your desired color.
Thanks!!!
Hi Dan,
Thank you for all the codes you have provided. Do you happen to have one for keeping the top accordion modules closed? I have your Divi Booster but the option doesn’t seem to work on Extra. Thanks!
Hi Sherri, sorry for taking so long to answer this. I’ve tested this feature on Extra and it is working on my test sites. Perhaps there was something stopping it working on your site specifically. If you are still having this problem let me know and I’ll be happy to look into it further. If you’re able to send me a link to the page with the accordion module, that would be really useful.
Thank you so much! It works 🙂
Great! Thanks for letting me know Katia 🙂
Thank you for this 🙂
Thanks but it changes the heading background on Footer Widgets as well. Is there a way to make the change only for Sidebar ?
Ah, I missed that. Thanks, Puru! I’ve updated the code above, so it should now apply only to the widgets in the sidebar. Let me know if it doesn’t work for you.
Oh man, I’ve spent hours looking for that solution. Thank you Dan, it’s perfect now 🙂
Thanks!! This was driving me crazy. 🙂
Thank you was just about to give up
Excellent ! Its really working thank you so much for this tutorial
How would we change the font color after we change the background color, as the default doesn’t look goos (to me) with the lighter colored text after lightening the background. (Thanks in advance!)
Hi Ed, here’s a quick post on how to change the font color of Extra’s widget titles. Hope it helps, but let me know if you have any questions about it.
Thanks! Exactly what I have been looking for. I am always coming back here for tips on Extra theme. So helpful and in layman terms too. cheers, Paul
I couldn’t get it to work. Then I realized I was using the sidebar module. So I just used .widgettitle { instead.
Hey Nelson, I’m glad you worked it out 🙂 I’ve just updated the code in the post so that it should now work on both the standard sidebar and the sidebar module. Cheers!
Hi Dan, thanks it works, but only partially in my case. On a page i’ve created and set as my homepage the header is still the default mate blue one. But when i go to a post then its working and the title header has changed. Any suggestions, kinda desperate at this point to make it work?? Thanks!!
Hey don, are you using a sidebar module on the homepage, by any chance? The code was originally just for the standard sidebar, not the sidebar module. I’ve just updated the code in the post so that it will now work on both the standard sidebar and the sidebar modules. Hopefully that will fix it. If no, it sounds like it might be a caching problem, so I’d suggest clearing any caches on your site and clearing your browser history. If that still hasn’t fixed it, let me know. Thanks!
Merciiiiiiiiiiiiiiiiii
I was searching the solution from many times, Now my site is looking beautiful. Thanks for the solution.
Thank you so much! It works
Thanks! Saved me hours of struggling 🙂
This is what worked for me
.et_pb_widget .widgettitle, .et_pb_widget .wp-block-group__inner-container>h2, .et_pb_widget .wp-block-group__inner-container>h3{
background: #3e6d6d !important;
}
Hey Pat, thanks for sharing your solution. Yeah, it looks like there have been some updates to the HTML of the widgets, which meant the old code would work on some, but not all, widget titles. I’ve updated the code in the post with your superior version. Thanks again!