In a previous tutorial, I’ve shown you how to change the background color of a single page in WordPress.
Now, I’ll show you how to change the background color of your entire WordPress site, which is even easier.
All you have to do is to add some CSS code in WordPress:
body {background-color: #ECB6BD;}
You can change the background color code (#ECB6BD) with whatever you want. You can generate one here.
If the change doesn’t take place, clear your browser and site cache.
If it still doesn’t work, add !important
to the CSS code, like this:
body {background-color: #ECB6BD !important;}
You can also check out the video tutorial.
This Won’t Work for Sites with Full-Width Layout
The reason why it won’t work is because the containers will cover the whole body
of the site.
So, you need to have a boxed layout, as you can see in the above image.
You could change the background color of the containers that cover the body
, but you’ll have to find the proper CSS selectors yourself. The selectors differ from theme to theme.
For example, for the WordPress theme used above, I changed the whole background color by adding this code:
.site {background-color: #ECB6BD;}
This is the easiest scenario.
Other WordPress themes use other CSS classes or ids for the site container, and most of the times, you’ll need to find different CSS selectors for different parts of the theme (e.g. header, footer).
Take a look at this theme, for example:
I used the same CSS code as above, but it didn’t change the background color for the whole site container.
The header, widgets, and footer kept their initial background color, so they need to be handled separately.
Unfortunately, there’s no one-size-fits-all solution for this.
That’s a Wrap
I hope you found this tutorial useful and comprehensive, and you managed to change the background color of your WordPress website.
If you have any questions or thoughts, drop a comment or send a message via contact or Facebook page.
You can also hit the follow button on Twitter and subscribe to the YouTube channel.
Don’t forget to share the post to help out others!
Leave A Comment