Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
haganwalker

Change background color for specific page - Brine

Question

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 by haganwalker
Initial Revision

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 4

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

Edited by Paul2009

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

@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

Share this post


Link to post
  • 0

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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include
I am a Squarespace Developer and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form ExtensionDate Picker Extension and Age Verification ExtensionNeed a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links.

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...