Change color of div in footer

[weisbart]

How do I change the background color of a div in my footer?

I have a couple of different divs in my footer and I’d like for each of them to have a different background color (instead of changing the background color of the entire footer as I’ve seen answered elsewhere).

It’s not working to add background-color:D5DD2A to the div style.

Thanks - Erin

[jade]

Hi Erin,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[weisbart]

Thanks. Added.

[Prasant]

Hello @weisbart,

Thanks for sharing website URL.

You can add following CSS under X > Launch > Options > CSS to change footer background color:

footer.x-colophon.top {
    background-color: #ddd;
}

footer.x-colophon.bottom {
    background-color: #ededed;
}

Thanks.

[weisbart]

Hi @Prasant.
Thank you. I don’t want to change the background of the entire footer. I have different divs within the footer and I’d like to be able to change the colors of the divs separately.
Thanks - Erin

[mldarshana]

Hi There,

In that case, use the Inspect Element tool in your browser to check the underlying divs and add the CSS rules accordingly.

Follow the examples below.

.x-colophon.top #custom_html-4 {
    background-color: orange;
}
.x-colophon.top .x-column.x-sm.x-1-3:nth-child(2) {
    background-color: #336699;
}
.x-colophon.top .x-column.x-sm.x-1-3:nth-child(2) {
    background-color: red;
}

Thanks!