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

How to target a specific page with custom css

RandyS

Asked by RandyS,

Followers 1
Go to solution Solved by dannyvaritek,

Question

RandyS    130

RandyS
Posted (edited)

Are there unique ID's for each page that I can tap into? For example, If I wanted to edit the background color of just my blog page, how would I? The Squarespace styling system only allows global changes to background color. I realize I'd use custom CSS, but I can't seem to locate a unique page ID that I can tap into. Any ideas where I can find that?

Edited by RandyS
Link to post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

10 answers to this question

Recommended Posts

  • 8

dannyvaritek    245

dannyvaritek
  • Solution
Posted

Unique page ID's are called 'Collection IDs'. In order to use custom CSS on a specific page, you can put your CSS in style brackets in the 'Page Header Code Injection' portion of your Advanced Settings on your page editor.

I inserted this custom CSS to alter the background color of my page (using the Bedford Template):

`

`

You can find your collection-ID by looking here:alt text

I'm on the page editor for the page that I want to edit. The last string of characters after 'collectionID=' is your page's unique ID. Copy that, and replace my collection-ID number above with yours.

You insert your code here:alt text

Now, you can insert that code above into your header injection. Be sure to change my collection ID to yours, and change the color "red" to any RGB or HEX string. Hope this works for you!

Link to post
  • 1

bovieco    33

bovieco
Posted (edited)

I found out how to get the collection ID. Go to your website then right click the link of interest and select Inspect Element. It’ll bring up the source, carefully skim through for collection ID.

Edited by bovieco
Link to post
  • 1

ChrisBup    62

ChrisBup
Posted (edited)

Update for Squarespace 7: when you inspect the code (or view source), find the opening body tag (there's only one). It will look something like this:



<body id="collection-5845e3a2725e25b8059f35f4" ...







That id (which is also used as a class on that same body tag) is the one you're looking for. You would then use either the id or the class to target elements on that specific page in your CSS as shown above.


Although you don't need to use the Page Header Code Injection. You can simply go to Design > Custom CSS and put it there. That way, all your custom CSS can live in one place.



			
				


	Edited  by ChrisBup
	
	

			
		


		

		
	


	

	

		
Link to post

		
			
		
		
		

		
	




	



					
					
					
				

					

					
					







	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				1
			
    • 

		
	
	




	

	

		

			

orderxaos
			  

	
		
	
			 0
	
		
	

		

		

			


	
		orderxaos
		
	

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				



			



		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			

collection ID didn't work for me, and I left my code in the "Custom CSS" to keep it all in one place versus putting it directly on the page.


My problem was adding a Margin that disappeared due to some bug on "page" templates in Flatiron.


here is what worked:  




<style>
#page-58409f6e37c5815c82a8bc9f  {
  margin-right: 30px !important;
}
</style>












			
		


		

		
	


	

	

		
Link to post

		
			
		
		
		

		
	




	



					
					
					
				

					

					
					






					
					
					
				

					

					
					






					
					
					
				

					

					
					







	
		



	
	
    
	
		
	
		
			
  • 
				
			
    • 
		

			
  • 
				0
			
    • 

		
	
	




	

	

		

			

liles13
			  

	
		
	
			 51
	
		
	

		

		

			


	
		liles13
		
	

		

	

	
	

		




	

		

			

				
    
					
					
					
					
					
				



			



		

			Posted  
			
			
				
				
			
		

	


	


	

		
		

			
I tried this already, but A), there are many collection ID's embedded in the page, and its hard to find out which is the correct one, and B) I went through and copied them all, tried them one at a time on my page, and none of them worked


			
		


		

		
	


	

	

		
Link to post

		
			
		
		
		

		
	




	



					
					
					
				

					

					
					






					
					
					
				

					

					
					






					
					
					
				
			
			



		

	


	
	
	
	
	
		
		

			
				
					


	


	
		Guest
	


	

		

			 This topic is now closed to further replies. 
		
			
		

	



				
			
		

	

	
		

			
				

					


				

			
			

				


	

	
		Followers
		1
	


			

			
		

	







	

		
			
				Go to question listing
			
		
	

	




						


					

					


	

		
			
			

		
		
		


	


				

			

			
		

		
		



	×
	

		

			
				

					


			

			


	






	×
	

		

			
    

  • Create New...
    • 
				
			



	




		
		

	
	






























	














		
		
		
		
		
		
     
      	

      	


      
		

          	
          	

                

                    
Support 

                    
                

                

                    
Community 

                    
                

                

                    
Developers 

                    
                

                

                    
Resources