BEFORE
AFTER
If you’d like to change the background color of pages in the Extra Theme, you need to use some custom CSS.
For example, you can make all pages have a red background, you can use the following CSS:
/* Change background color for all pages */
.page article { background-color: red; }
You can add this to the theme by pasting it into the “Custom CSS” box found in the ePanel at “Extra > Theme Options > General Settings” (at the very bottom).
If you’d prefer to change the color on a single page, you can instead do the following:
/* Change page background only for page with id 88 */
article#post-88 { background-color: red; }
For this you need to know the page’s id. You can find this in a number of places. For instance, it is part of the URL shown in the address bar when you are on the page edit screen (note that it isn’t shown when you first create a new post – you need to save it as a draft before the id shows up).
Hello,
I’m building a site with Extra and I can’t figure out how to change the color of the main footer. Not the bottom bar…the main footer.
I tried your solution because I thought maybe it’s considered part of the “page background” but it didn’t work. In Divi theme, there is an option to change the footer background color under “footer layout” but it’s not in Extra theme options.
Hi Mindy, is this for the footer menu on the site linked in your comment (the one with the Home, Services, and Work links)? If so you can change the background using this CSS:
#et-footer-nav { background-color: #f00 !important; }Technically there is a #main-footer element which contains both this menu and the bottom bar, but the #et-footer-nav currently has a white background which overrides anything you set on the #main-footer element itself.
I hope that makes sense / helps!