[Support request] Help change background color of individual pages

[crosby87]

Hi,

I am using seperate containers of my website, so on my blog the background is grey and the content background is white (this was basically default setting). I like this and I would like to keep it as it is.

For some specific pages, however, I would like both the content and background color to be white.

Please see example of a specific page I am talking about: https://imgur.com/undefined

As you can site the content is white, while the background on the two sides is grey. How can I set the color of the background completely white for some specific pages?

I think I need to use hooks just not sure what code should I use, what type of hook etc.

Thanks for your help in advance!

[Ying]

Hi there,

You screenshot doesn’t work, I guess you mean the body background is grey?

You can try this CSS:

body.page-id-116 {
    background-color: #fff;
}

In above CSS,page-id-116 is your contact page, you’ll need to find out what’s the page ID of the page you want to change.

If you are using Chrome, go to the page, right-click > inspect, you’ll find the page id there:
https://www.screencast.com/t/IVAkRbBLr

Let me know 🙂

[crosby87]

Thanks for the answer.

I tried the above code with the page’s own ID, but it doesn’t seem to work.

Is there any way you could give a code that I can use in Elements Hooks? That way I could apply this specific code to multiple pages that I select, correct?

Here’s the screenshot again (sorry for before): https://imgur.com/RahKYHo

[David]

Hi there,

create a new Hook Element.
Add this code to the element text area:

<style>
body {
    background-color: #fff;
}
</style>

Set the Hook to: wp_head and set the Priority to 50 ( That will hook the style in later so it comes after the Customizer settings ).

Then set your Display Rules to the pages you need.

[crosby87]

Hi David,

Many thanks for the reply – amazing customer service!

The code works perfectly.

I created a layout element as well whereby for some specific pages I removed the Sidebar. Thats the only thing I did, but the position of the blog post’s title suddenly changed.

Now it basically touches the menu: https://imgur.com/9VGZgLP

Could you please tell what causes this (only thing I did is remove sidebar) and how I can increase the spacing again?

Many thanks!

[David]

In the Layout Element – set the Content Container back to default. The width you have set will still apply.

Using either the Full Width or Contained options removes the Themes padding – they should be used if you want to rebuild all the content of page using something like GenerateBlocks or a Page Builder.

[Author]

Posts