Change background color of one page only?

Site URL: https://www.nateburdette.com/

I'm trying to change the background color of one page: nateburdette.com/nates-world 

I've tried a few things, and I can't get it to work for this template. Anyone know the trick, whether through custom CSS or header injection? 

• Page: nateburdette.com/nates-world 
• Collection ID: #collection-5e2f261508f8621492f2bab8
• Desired background color: #f6f0ea

If you use Business Plan, add to Page Settings > Advanced > Header

<style>
  div#site {
    background: red;
}
</style>

If you use Personal Plan, add to Home > Design > Custom CSS

body#collection-5e2f261508f8621492f2bab8 div#site {
    background: red;
}

@tuanphan Worked like a charm. Thank you!

@tuanphan I have a business plan, but the code that you've outlined above doesn't work  when I inject it in Page Settings > Advanced > Header. I'm not a developer, so I might be missing something, can you explain like I'm 5 years old?

This is the page I would like to change the color of: https://www.kelseyeaton.com/thank-you (no password needed)
 
I would like the background color to be #F6F6F6, do I just put that in place of "red" in your code?

Thank you!

EDIT:  I do have a custom cursor, outlined in this forum post. Could that be causing the issue?

7 hours ago, k3ats said:

@tuanphan I have a business plan, but the code that you've outlined above doesn't work  when I inject it in Page Settings > Advanced > Header. I'm not a developer, so I might be missing something, can you explain like I'm 5 years old?

This is the page I would like to change the color of: https://www.kelseyeaton.com/thank-you (no password needed)
 
I would like the background color to be #F6F6F6, do I just put that in place of "red" in your code?

Thank you!

 

EDIT:  I do have a custom cursor, outlined in this forum post. Could that be causing the issue?

<style>
  .Main {
    background: red;
}
 header.Header.Header--bottom {
    background: red;
} 
</style>

2 hours ago, tuanphan said:

<style>
  .Main {
    background: red;
}
 header.Header.Header--bottom {
    background: red;
} 
</style>

 

AMAZING! Thank you!

For anyone else who needs a step-by-step:

I have a business plan (this code might be different for personal plans). In your menu, go to the page you want to change the background color on, then click on the cog to the right of the page name that's "Page Settings". Then go Page Settings > Advanced > Copy and Paste the code above. Add the Hex code of the color you want in place of "red". In my case it's "#f6f6f6". 

@tuanphan Hi Tuan AGAIN 🙂

I want to make only ONE header on ONE specific page (that isn't the home page) and opaque/gradient header (because on this page the header sits over a busy image). Can you PLEASE help? 🙂

On 11/26/2021 at 5:44 PM, IwanJ said:

@tuanphan Hi Tuan AGAIN 🙂

I want to make only ONE header on ONE specific page (that isn't the home page) and opaque/gradient header (because on this page the header sits over a busy image). Can you PLEASE help? 🙂

Can you share link to the page? We can check easier

Hi again, as you'll see on this page https://deep-learning-cafe.squarespace.com/contact the background colour is the same colour as the logo in the header, which means you can't see the logo...

Do you have any ideas how I can keep the background colour (blue) and have the logo visible somehow?

On 11/29/2021 at 1:16 PM, IwanJ said:

Hi again, as you'll see on this page https://deep-learning-cafe.squarespace.com/contact the background colour is the same colour as the logo in the header, which means you can't see the logo...

Do you have any ideas how I can keep the background colour (blue) and have the logo visible somehow?

The site is private. You should setup password & share url again/ We can check easier.

Can I DM you the password or post it here?

20 hours ago, IwanJ said:

Can I DM you the password or post it here?

You can add this code to Design > Custom CSS to change Contact Page Logo to white

/* contact page logo */
body#collection-61798dd19c554034ea290e2b .header-title-logo img {
    filter: brightness(0) invert(1);
}

One again, thank you so so much!!!! Your help is invaluable!

Sorry Tuan, I would also like to make the text SERVING ARTIFICAL INTELLIGENCE SINCE 2018 next to the white logo on the CONTACT page also be white?

On 12/3/2021 at 1:35 PM, IwanJ said:

Sorry Tuan, I would also like to make the text SERVING ARTIFICAL INTELLIGENCE SINCE 2018 next to the white logo on the CONTACT page also be white?

Use this code

body#collection-61798dd19c554034ea290e2b .header-title-logo a:after {
    color: white;
}