How do I change the background color of just the lower footer area?

[444media]

I just changed the background color of my Footer at aobma.com area using the following CSS:

.x-colophon.top,
.x-colophon.bottom {
background-color: #03638a;
color: #fff;
}

.x-colophon.top a,
.x-colophon.bottom a {
color: #fff;
}

Which worked, but is it possible to change the background color of just the Lower “non-widget area” portion where the Home, Privacy Policy, Terms, Sitemap and Contact links are? Without affecting the background color of the Footer area above it (in blue)? That CSS used changed both areas to blue. There is a thin white line dividing the two footer areas. Just wondering if possible to just change the background color of only that lower area? I’d possibly like it to be a different color than the area that’s in blue above it now.

I am using Integrity stack if that makes a difference.

Thanks

[jade]

Hello @444media,

Please update this code:

.x-colophon.top, .x-colophon.bottom {
    background-color: #03638a;
    color: #fff;
}

to

.x-colophon.top {
    background-color: #03638a;
    color: #fff;
}

/* This is the bottom footer area */
.x-colophon.bottom {
    background-color: green;
    box-shadow: none;
}

Please change the value of the background color accordingly.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[444media]

Worked perfectly! Thank you again Jade!

[lely]

You’re always welcome @444media!

Cheers.