Footer background and text colour

[ErickvdH]

Hi there,

I have tried everything to change my footer background. Added the CSS according the instrucitons on this support page for example:

(footer.x-colophon.top {
background-color: #ffffff;
}
footer.x-colophon.bottom {
background-color: #4f4f4f;
}

This does not change anything. Can you please help us out. The colour needs to be (if possible rgb(2, 23, 55) and test white.

Thanks!

Our CSS now:

---

/*
// Buttons
*/

.x-btn {
font-weight: 700;
}

.x-btn.x-btn-alt,
.button.x-btn-alt,[type=“submit”].x-btn-alt {
border-color: #02aed6;
background-color: #02aed6;
box-shadow: 0 0.25em 0 0 #0b8ead, 0 4px 9px rgba(0, 0, 0, 0.75);
}

.x-btn.x-btn-alt:hover,
.button.x-btn-alt:hover,[type=“submit”].x-btn-alt:hover {
border-color: #0b8ead;
background-color: #0b8ead;
box-shadow: 0 0.25em 0 0 #097690, 0 4px 9px rgba(0, 0, 0, 0.75);
}

/*
// Dropcap
*/

.x-dropcap {
background-color: #02aed6;
}

/*
// Headings - Dark section
*/

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section h5,
.dark-section h6,
.dark-section h1 a,
.dark-section h2 a,
.dark-section h3 a,
.dark-section h4 a,
.dark-section h5 a,
.dark-section h6 a {
color: #fff;
}

.dark-section h1 a:hover,
.dark-section h2 a:hover,
.dark-section h3 a:hover,
.dark-section h4 a:hover,
.dark-section h5 a:hover,
.dark-section h6 a:hover {
color: #fff;
opacity: 0.65;
}

/*
// Sidebar
*/

.widget a {
color: #02aed6;
}

/*
// Contact Form 7
*/

.wpcf7-form {
margin: 0;
}
.page .x-breadcrumb-wrap {
display: none;
}
.tco-subscribe-form fieldset {
float: left;
}
.tco-subscribe-form fieldset:first-of-type {
margin-right: 20px;
}

.tco-subscribe-form fieldset:last-of-type {
margin-top: 0px;
margin-left: 20px;

@media screen and (max-width: 670px) {
.tco-subscribe-form fieldset {
float: none !important;
margin: 0 !important
}
}
.x-recent-posts-date {
display:none;

[jade]

Hi Erick,

The code you are using should work but it seems that there is an error in the CSS codes you currently have which is causing the code not to work. Hi there,

There seems to be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

[ErickvdH]

Hi Jade,

Thanks for your quick reply. Yes I used this tool before but sorry i have absoluty no clue how to fix these issues. Is there anything you can do for me?

Thanks!

[Prasant]

Hello Erick,

Thanks for updating the thread.

Actually the CSS you have shared is having couple of syntax errors. I have made the necessary corrections, please copy the CSS from following URL. https://jsfiddle.net/1pc536uk/

Regarding footer color, please try out following CSS as well and see how it goes.

footer.x-colophon.bottom {
    background-color: #fff !important;
}

Thanks.

[ErickvdH]

Hi Prasant,

You are the best, that did the trick. One more question, the text is still default color, do you have a CSS code for this changing it to white. Also there is a white line above the footer. I want to make this disapair or change the color.

Thanks!

[rad]

Hi Erick,

You mean display a white text in a white background? That’s not going to be readable, but yes, you could do that by changing that CSS to this

footer.x-colophon.bottom {
    background-color: #fff !important;
    color: #fff;
}
footer.x-colophon {
border: 0px !important;
box-shadow: none !important;
}
footer.x-colophon * {
color: #fff;
}

That also includes the fix for the white line.

Hope this helps.

[ErickvdH]

Thanks Rad!

[Prasant]

You are most welcome.