Jump to content

Change background color for specific page - Brine

Recommended Posts

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!

Link to comment
  • Replies 10
  • Views 7.7k
  • Created
  • Last Reply

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:

alt text

I hope that helps

your-page-id.png.05c6f3021f688272d5492c6391b30efc.png

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 8 months later...
  • 5 months later...
  • 6 months later...
  • 4 months later...
  • 1 month later...
  • 1 month later...

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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
  • 6 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • 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.