How to Change Footer background and text Colour

Hi,
You should be able to do this in the stylesheet file for your theme.
From the backend, go to Appearance > Editor

The stylesheet edit page should be the first page you land on, if not select it (from the list on the right, stylesheet.css).

if you don’t know how to edit CSS, here is a good place to get some basic know-how: https://www.w3schools.com/cssref/pr_background-color.asp

Most footers will be something like:

#footer{
background-color: #add_color_code_here;
}

yours looks more like this:

footer .col-sm-6 {
background: #707070; /*That is the color code in your social icons*/
color:#FFF; /*This may make the font color white*/
}

Of course there may be a few more classes you need to change in order to change the color on a specific element. (If it’s not something you can control in your theme options in the first place).

Have fun.

If it’s all too overwhelming, feel free to contact a developer like me.

Thanks for that but this didn’t seem to work!

There isn’t anything like the codes you suggested

In your style.css file, put this code at the end of the file.

footer{
background-color:C6C6C6!important;
}

still no change?

footer .wrapper{
background: #c6c6c6;
}

footer .wrapper a{
color:#fff;
}

??

I’m not sure which bit of the page you refer to. The answers above refer to the footer div which is from “Pages / Search / Archive” down to the horizontal grey line, the #subfooter div is the bit right at the bottom where it says “Downtown ? 2014. Designed…”

If the latter, try this in your custom css:

#subfooter .container
{background: #707070; color:#FFFFFF; padding-top:12px}

Thanks for that Lorro and JR!

They both worked.

I think you can see the issue I now have!
Is there any way I can possible change the headings in the footer so they don’t have a white box and Can i remove that white space at in between the footer and sub footer?

Thanks so much guys

Anyway to make it so the footer colour goes to the end of the page aswell?

Try this in your custom css:

footer .widget h4 span {background-color:#707070}
#subfooter {padding: 0}
#subfooter .container {max-width:1140px}

I’ll leave it to you to test in other browsers and display resolutions.