-1

I'm designing a site using a simple worpress theme and customising a few elements with the Simple Custom CSS plugin.

I'm trying to change the colour of the footer and I've used

.site-footer {
  background: #4E5754;
  color: #f29e0f;
}

This is coming though as it is changing the text colour but not the background - the new background colour is showing up when I inspect the page source but not changing on the actual page.

What might be overriding the CSS?

  • 4
    Create a working demo or link to your site, otherwise we're just taking guesses. http://stackoverflow.com/help/mcve – Michael Coker Jan 30 '17 at 19:29
  • its possible there is a style declaration coming from somewhere else that has a higher authority than yours. Try putting background: #4e5754 !important; and see if that lets yours work. If it works then you know your code is being overwritten from somewhere else – HisPowerLevelIsOver9000 Jan 30 '17 at 19:32
  • Possible duplicate of [In which order do CSS stylesheets override?](http://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override) – Blackbam Jan 30 '17 at 19:45

2 Answers2

1

You can use this style for this.

.site-footer {
    background: #4E5754 !important;
    color: #f29e0f;
}

Or put your style under the default stylesheet.

0

After a bit of trial and error I realised that the two colours were actually being controlled by different elements - site.footer and footer.inner

Thanks for the help everyone!