Setting background colour of one page (Farro template) - previous answers don't work

Site URL: https://chrysalis-collie-n4gg.squarespace.com/

I am trying to set the background of one specific page on my website to be a certain color. For now, let's use red rgb(100,0,0) as a placeholder. I have tried solutions posted elsewhere on this forum, but they all don't work quite right.

I have a premium site and am using the code injection option into the header to add custom css within <style></style> tags. I have found the collection ID of my page in question.  The specific page is: https://chrysalis-collie-n4gg.squarespace.com/our-story (not certain if this will work for others, it's my trial site.

The code snippet I was trying initially was:

<style>

#collection-5f3b2c45ab40561612eeb9bb body {background-color: rgb(100,0,0);}

</style>

(or something very close to that - I have tried so many things now I'm not certain)

To make a long story short, this gave a red but not the "right" red. It turned out that the overall background colour I had set for the site (a pale blue) was partially transparent so was somehow showing through on top of the red. So I changed the site's overall background colour to be fully opaque. At this point, the above code snippet did nothing.

After some more reading around and experimentation I came to this:

<style>
  #collection-5f3b2c45ab40561612eeb9bb 
  .Header {
  background: rgb(100,0,0);
}
.Main {
  background: rgb(100,0,0);
}
.Footer {
  background: rgb(100,0,0);
}
  }
</style>

Now most of the page displays red. However:

1. There's still a light blue border/padding around things (see attached screenshot of the corner of my browser window). I've been trying for hours and no idea how to make this also turn red, or why I can't override the background for this page to be all red like in the first type of example. I have also tried throwing in some !important commands in there too, and explicitly calling a fully opaque red with rgba(100,0,0,1), but neither make a difference to this remaining blue border.

2. It turns out that this second example changes the header, main, and footer on ALL pages on my site. Not just this one. 

As a third option, I tried to just force red to all divs on that page:

<style>
  #collection-5f3b2c45ab40561612eeb9bb div { background: rgb(100,0,0);}
</style>

That affects only the page in question (hooray) but I still get blue borders/padding around things I can't get rid of...

Any advice would be appreciated!

Your site is private. Can you setup password & share url?

6 hours ago, tuanphan said:

Your site is private. Can you setup password & share url?

Thanks so much! Sorry I had notify replies set up but didn't get a notification for some reason.

The password is: ;WKy%,:PC3#8bjX:

The main url of the site (with the light blue background as intended) is: https://chrysalis-collie-n4gg.squarespace.com/

I want to change the background on this page (my about me): https://chrysalis-collie-n4gg.squarespace.com/our-story

You can see where it is red (yay) and where there's still blue borders I can't get rid of.

Note content etc is placeholders, I am testing out the template before deciding about switching my main site.

4 hours ago, katieburk said:

Thanks so much! Sorry I had notify replies set up but didn't get a notification for some reason.

The password is: ;WKy%,:PC3#8bjX:

The main url of the site (with the light blue background as intended) is: https://chrysalis-collie-n4gg.squarespace.com/

I want to change the background on this page (my about me): https://chrysalis-collie-n4gg.squarespace.com/our-story

You can see where it is red (yay) and where there's still blue borders I can't get rid of.

Note content etc is placeholders, I am testing out the template before deciding about switching my main site.

body#collection-5f3b2c45ab40561612eeb9bb {
    border-color: blue;
}

1 hour ago, tuanphan said:

body#collection-5f3b2c45ab40561612eeb9bb {
    border-color: blue;
}

 

Thanks again - getting there! I appreciate your response.

That fixes the overall page border. But there's still the light blue in between various elements of the page (e.g. between header and main content) so I'm guessing there's probably further specifications I need to change. Do you know what those might be or where I should dig to look?

The CSS I have now for this is:

<style>
#collection-5f3b2c45ab40561612eeb9bb div { background: rgb(100,0,0);}
body#collection-5f3b2c45ab40561612eeb9bb { border-color: rgb(100,0,0); }
</style>

Add to Page Header (in Page Header, no need to use collection id)

<style>
  header.Header.loaded {
    background: #640000;
}
  main#main {
    background: #640000;
}
  footer.Footer {
    background: #640000;
}
</style>

4 hours ago, tuanphan said:

Add to Page Header (in Page Header, no need to use collection id)

<style>
  header.Header.loaded {
    background: #640000;
}
  main#main {
    background: #640000;
}
  footer.Footer {
    background: #640000;
}
</style>

 

Thanks again - that set it on all pages of the website, but I was able to modify it by adding collection id to each part to set it only on the page I want. 🙂 I appreciate your help! I sent you a donation via your webpage.

For anyone else reading, this is the final code that did it (and I'll change to my desired colors later):

<style>
  body#collection-5f3b2c45ab40561612eeb9bb { border-color: rgb(100,0,0); }  
  #collection-5f3b2c45ab40561612eeb9bb header.Header.loaded {
    background: #640000; }
  #collection-5f3b2c45ab40561612eeb9bb main#main {
    background: #640000; }
  #collection-5f3b2c45ab40561612eeb9bb footer.Footer {
    background: #640000; }  
</style>

I mean add to Page Header, not Code Injection Header