Jump to content

Change background color of one page only?

Recommended Posts

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

@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?

Edited by k3ats
more info
Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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". 

Link to comment
  • 1 year later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.