Help change background color of individual pages

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 :)

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

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.

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!

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.