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;
}

Hello, I've tried everything and still can't get a non-linked page to change the color. I've tried inserting the code in the advanced settings for that page and have also tried adding code to the main CCS in the design backend but nothing works. 

Im trying to change the color of a non linked page with business account on Squarespace 7.0

On 6/1/2023 at 10:08 AM, BloomingFire said:

Hello, I've tried everything and still can't get a non-linked page to change the color. I've tried inserting the code in the advanced settings for that page and have also tried adding code to the main CCS in the design backend but nothing works. 

Im trying to change the color of a non linked page with business account on Squarespace 7.0

Can you share link to page?

Hi @tuanphan I'm using this code to change the color of single pages and the header (like https://mightywithin.squarespace.com/phoenix-rising-integrative-medicine) but it doesn't change it on mobile. Any suggestions?

<style>
.Main {background-color: #FAF9F7 !important;
}
</style>

<style>
.Main {background-color: #FAF9F7 !important;
}
.Header--top {background-color: #FAF9F7 !important;
}
</style>

On 9/30/2023 at 9:46 PM, MightyWithin said:

Hi @tuanphan I'm using this code to change the color of single pages and the header (like https://mightywithin.squarespace.com/phoenix-rising-integrative-medicine) but it doesn't change it on mobile. Any suggestions?

<style>
.Main {background-color: #FAF9F7 !important;
}
</style>

<style>
.Main {background-color: #FAF9F7 !important;
}
.Header--top {background-color: #FAF9F7 !important;
}
</style>

Use this code

<style>
  main.Main {
    background-color: #faf9f7 !important;
}
.Mobile-bar.Mobile-bar--top {
    background-color: #faf9f7 !important;
}
</style>

Thank you so much! You're a life saver.

Hello,

I'm trying to change the background on this page

https://www.catdossett.com/christmas-mountain-choose-and-cut

I have a calendar embedded that has black text I can't change (my site background is black) but I also can't get any of the codes above to work to change the background.

On 10/31/2023 at 8:24 PM, CatDZ said:

Hello,

I'm trying to change the background on this page

https://www.catdossett.com/christmas-mountain-choose-and-cut

I have a calendar embedded that has black text I can't change (my site background is black) but I also can't get any of the codes above to work to change the background.

Add this to Website > Website Tools (under Not Linked) > Custom CSS

body#collection-653933aec8af250afb3f938b #siteWrapper {
   background-color: black !important;
}