haganwalker Posted April 19, 2016 Share Posted 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! Link to comment
paul2009 Posted April 19, 2016 Share Posted 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 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
haganwalker Posted April 20, 2016 Author Share Posted 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 Link to comment
haganwalker Posted April 20, 2016 Author Share Posted 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 Link to comment
paul2009 Posted April 20, 2016 Share Posted 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. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
Guest iamme123 Posted January 6, 2017 Share Posted 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 Link to comment
MAURICEmitchell Posted January 10, 2017 Share Posted 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? Link to comment
MAURICEmitchell Posted January 10, 2017 Share Posted 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? Link to comment
MAURICEmitchell Posted January 11, 2017 Share Posted 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 Link to comment
TeamAwareness Posted July 7, 2017 Share Posted 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! Link to comment
lizzylou6612 Posted January 23, 2018 Share Posted 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! Link to comment
sarawilde Posted June 11, 2018 Share Posted June 11, 2018 This worked on Moksha template as well - exactly what I was looking for! Thank you @Paul2009 !! Link to comment
Felix27 Posted July 19, 2018 Share Posted July 19, 2018 Excellent @Paul2009, thanks so much, it worked like a charm. Great explanation. New Yorker in Madrid. Link to comment
KwameAndCo Posted September 17, 2018 Share Posted 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. 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
Guest iamme123 Posted March 20, 2019 Share Posted 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 Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.