RandyS Posted June 27, 2014 Share Posted June 27, 2014 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? Link to comment
dannyvaritek Posted June 27, 2014 Share Posted June 27, 2014 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: 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: 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 comment
RandyS Posted June 28, 2014 Author Share Posted June 28, 2014 This is very helpful thank you! Link to comment
paige1570047875 Posted November 6, 2014 Share Posted November 6, 2014 Thanks, and I know this is old, but what if I want to alter the html? Link to comment
liles13 Posted November 20, 2014 Share Posted November 20, 2014 There is no longer a “collection ID” in the web address. Do you have any answers outside of this? Version 7 is messing everything up. Link to comment
bovieco Posted November 20, 2014 Share Posted November 20, 2014 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. Link to comment
liles13 Posted November 20, 2014 Share Posted November 20, 2014 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 comment
ChrisBup Posted December 16, 2016 Share Posted December 16, 2016 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. Link to comment
orderxaos Posted December 23, 2016 Share Posted December 23, 2016 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 comment
312elements Posted April 27, 2018 Share Posted April 27, 2018 Seriously love this forum. I was worried I wouldn't be able to hide the nav on my retargeted FB landing page and the answer was right here all along. Link to comment
mythofechelon Posted October 3, 2018 Share Posted October 3, 2018 In the current version of Squarespace, each page's has a unique ID that starts with "item-". So, to use a CSS example, "#item-5ba3a3eecd83667b828a82a7". Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.