Change background color for specific page - Brine

haganwalker · April 19, 2016

Hello!

I'm working with the brine template and am trying to change the background of a specific page to look somewhat more consistent on mobile. The link is: www.glodrinks.com/mobile

I cannot figure out for the life of me how to make the body's background around the video black. I've followed several CSS samples on here and none of them seem to work. Several people point out using the collection ID, but I can't seem to find that either. Any help would be greatly appreciated.

Thanks!

Edited April 19, 2016 by haganwalker
Initial Revision

paul2009 · April 19, 2016

Hi @haganwalker

This is what you need to add using the CSS Editor:

#collection-57164f0822482effba75abbb {
.Main {
   background-color: #000;
 }
}

Here's a quick explanation about the collection ID.

Each page (known as a "collection" in Squarespace) has a unique identifier. The ID is unique for each page on each site. To find it you need to use your web browser's developer tools. Every new browser has them or you can just right click the page and choose view source. This almost always works unless your browser has been locked down. When you do this, you'll see the code that is behind your page.

When you're not logged in to your site, look at the source, or use the inspector in the development tools to look at the code. Near the top search for

<body

and then immediately after that you should see the collection ID. Because it's an ID, prefix it with a hash character and the code you place after it in curly braces will only apply to that page:

I hope that helps

Edited April 19, 2016 by Paul2009

haganwalker · April 20, 2016

@paul2009,

Thanks so much for your help - once you pointed out where to look for the collection ID, this was pretty simple. You do have one error in your code - the bracket on line 5 shouldn't be there, but besides that, all worked just as expected! Much appreciated.

Hagan

haganwalker · April 20, 2016

@paul2009,

Thanks so much for your help - once you pointed out where to look for the collection ID, this was pretty simple. You do have one error in your code - the bracket on line 5 shouldn't be there, but besides that, all worked just as expected! Much appreciated.

Hagan

paul2009 · April 20, 2016

Yes, I agree @octopus. Sometimes the shortest answer is the best! In this case though they were confused about Collection IDs and I thought it was worth the effort in trying to explain them.

Because Squarespace don't encourage customising sites I don't they explain the basics of customisation very well yet. It's only by following the well explained answers like yours, Jason's and Eric's (and many others) that users get a deep enough understanding. It makes my day when you teach me something new. New knowledge and understanding is so much better than a code snippet. So a big thanks from me.

iamme123 · January 6, 2017

@paul2009 @octopusI'd recommend using this Chrome browser extension to find the collection ID and Block IDs for you:

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

MAURICEmitchell · January 10, 2017

Hi Guys and girls,

I am having this same issue with the thorne template. Would anyone know the code injection to apply to that template?

MAURICEmitchell · January 10, 2017

Hi Guys and girls,

I am having this same issue with the thorne template. Would anyone know the code injection to apply to that template?

MAURICEmitchell · January 11, 2017

Octopus, this didn't work for me i am afraid. I also dont need to change the complete background i just want to change the color of the intro section? would you be able to help me with that

TeamAwareness · July 7, 2017

This also works on the Ethan Pasternak template.

My site is not yet live, so I can't verify that the collection id can be found in the same manner. I inspected an element on the page and browsed through the Styles window until I found it. Works like a charm!

lizzylou6612 · January 23, 2018

Hey y'all I'm struggling with this -- I cannot seem to make this code work!! UGH

I'm trying to change the background to a single page of my index

https://www.elysiancreativestudio.com/process/

The bottom page that says "Still Have Questions?" is the one I'm trying to change. Please help!

sarawilde · June 11, 2018

This worked on Moksha template as well - exactly what I was looking for! Thank you @Paul2009 !!

Felix27 · July 19, 2018

Excellent @Paul2009, thanks so much, it worked like a charm. Great explanation.

Kwamzilla · September 17, 2018

This worked really well for me but I wonder, is there a less clunky way?i.e.Is there a code that we could put into the header of each page individually rather than having to go to "Custome CSS"?I ask because I would like to use this effect for multiple indexes and it would be more efficient if I could just copy and paste each time.

iamme123 · March 20, 2019

There's a Chrome browser extension that will find the page's collection ID for you as well to make that easier:

https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

Edited March 20, 2019 by iamme123
Initial Revision

Change background color for specific page - Brine

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Posted Images

10 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Support

Community

Developers

Resources