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

Change background color for specific page - Brine


haganwalker
Go to solution Solved by paul2009,

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
Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

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 Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

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

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

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 Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

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!

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.

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

×
×
  • Create New...