[Support request] Different color background for different pages

[Charles]

Is it possible to have a different color background for different pages?

I want my home page to have one color but other pages to have a different color.

How would I do this? Does this require special coding?

[Fernando]

Hi Charles,

Yes, this is definitely possible. You would need custom code to achieve this, and there might also be third party plugins that offers this kind of functionality.

Here is a sample CSS you may add by going to Appearance > Customize > Additional CSS:

body.page.page-id-1365 {
    background-color: rgb(0,0,0);
}

Kindly replace the page id(1365) with the id of the specific page: https://share.getcloudapp.com/7Kuqll05

Moreover, here is a link you may refer to for more information regarding this: https://cleversequence.com/how-to-change-the-background-color-of-a-single-page-in-wordpress/#:~:text=WordPress%20Page%20Builder-,Step%204%3A%20How%20To%20Change%20The%20Color%20Of%20A%20Single%20Page%20In%20WordPress,-Now%2C%20you%20should

Here is an online color picker: https://www.rapidtables.com/web/color/RGB_Color.html

I also found this Plugin, however I’m not sure how it works: https://wordpress.org/plugins/change-background-color-for-pages-posts-widgets/

Hope this helps! 🙂

[Charles]

Yes, that helps, but what if I want to change all the pages in my blog to be a different color from the rest of my site? So, I’m not just changing one page, but all my blog posts.

[Fernando]

I see.

If that’s the case, you may use a CSS like this:

body.single-post {
    background-color: var(--contrast);
}

This would target all Single Post pages(Blog posts).

You may replace var(—contrast) with rgb(0,0,0) or retain it.

contrast is a Global color from Appearance > Customize > Colors. You may choose a different Global color by replacing contrast with the CSS variable name of the Global color you wish to use. This would simply allow you to control it from the Customizer.

Example: https://share.getcloudapp.com/qGu7AmQ9

Hope this clarifies. 🙂

[Author]

Posts