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

Asked by haganwalker

Question

haganwalker    22

haganwalker
Posted (edited)

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
Scoobie reacted to this

Share this post

Link to post

10 answers to this question

Recommended Posts

  • 4

paul2009    29,125

paul2009
Posted (edited)

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 Extension, Datepicker Extension and Age Verification Extension. Need a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.


		

	


		
	


	

		

			
Share this post

			


Link to post

			
			
			

			
		

	




	



					
				
					
					
					







	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				0
			
    • 

		
	
	




	

	

		

			

haganwalker
			  

	
		
	
			 22
	
		
	

		

		

			


	
		haganwalker
		
	

		

	

	
	

		



	

	

		

			
    
				
				
				
					
    • 
				
				
			




		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

@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
			
    • 

		
	
	




	

	

		

			

haganwalker
			  

	
		
	
			 22
	
		
	

		

		

			


	
		haganwalker
		
	

		

	

	
	

		



	

	

		

			
    
				
				
				
					
    • 
				
				
			




		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

@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
			  

	
		
	
			 29,125
	
		
	

		

		

			


	
		paul2009
		
	

		

	

	
	

		



	

	

		

			
    
				
				
				
					
    • 
				
				
			




		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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 Extension, Datepicker Extension and Age Verification Extension. Need a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.


		

	


		
	


	

		

			
Share this post

			


Link to post

			
			
			

			
		

	




	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				0
			
    • 

		
	
	




	

	

		

			

TeamAwareness
			  

	
		
	
			 0
	
		
	

		

		

			


	
		TeamAwareness
		
	

		

	

	
	

		



	

	

		

			
    
				
				
				
					
    • 
				
				
			




		

			Posted 
			
				
				
			
		

	


	


	

		
		

			

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
			
    • 

		
	
	




	

	

		

			

Kwamzilla
			  

	
		
	
			 36
	
		
	

		

		

			


	
		Kwamzilla
		
	

		

	

	
	

		



	

	

		

			
    
				
				
				
					
    • 
				
				
			




		

			Posted 
			
				
				
			
		

	


	


	

		
		

			
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. 
		
			
		

	



				
			
		

	

	
		

			

		

		

			



		

	







	

		
			
				Go To Question Listing
			
		
	

	




	

	




						


					

					


				

			

			
		

		
		



	×
	

		

			

			

				



			


	






	×
	

		

			
    

  • Create New...
    • 
				
			



	




		
		

	






























	














		
		
		
		
		
		
     
      	

      	


      
		

          	
          	

                

                    
Support 

                    
                

                

                    
Community 

                    
                

                

                    
Developers 

                    
                

                

                    
Resources