Guest Posted October 3, 2014 Share Posted October 3, 2014 I tried using Firebug, whenever I inspect elements it gives a YUI number, not a block ID. I’m trying to change the colour of specific blocks. Link to comment
colin.irwin Posted October 3, 2014 Share Posted October 3, 2014 YUI won’t be useful as it is a non-permanent identifier used by the open source YUI JavaScript library that is used extensively to drive the Squarespace front end templates. If you want to target a specific block you should first get your page structure finalised, so that the block is in its permanent location. You can then identify the block using a precise CSS selector. For instance, the following targets a specific image on one of the pages of my website: #collection-5107f604e4b085412c42d688 #content div > div > div .sqs-block-image:nth-child(1) collection-5107f604e4b085412c42d688 - identifies the page content div > div > div - goes three direct child levels of div down into the page .sqs-block-image:nth-child(1) - specifies the first .sqs-block-image at that level The thing is, on a longer page that selector could still throw up multiple matches, so you may need to use another nth-child earlier in the rule to specify “the first/second/whatever occurence of three nested divs and the first sqs-block-image inside that occurrence”. If you start moving blocks around on the page these selectors will fall apart and you’ll need to rewrite them. This page might give you some useful pointers - Complex Selectors – Learn to Code Advanced HTML & CSS. I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
sanseve5 Posted October 3, 2014 Share Posted October 3, 2014 On Google Chrome browser, open up your site and right click on the block that you want to identify. A separate, smaller window will pop up over your current browser. Next, in the smaller pop up window, hover your mouse over the the lines. You'll see boxes highlighted on your site as you go over the line codes. When you see the box highlighted on your website, double click that line (should look something like this block-yui57411403455221110832176823). Link to comment
colin.irwin Posted October 3, 2014 Share Posted October 3, 2014 block-yui isn't a persistent block id, it's a dynamic value allocated by the YUI library, so you can't rely on it as a selector. I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
Guest Posted October 3, 2014 Share Posted October 3, 2014 I'm trying to change the background colour of summary blocks. but im struggling to target it. https://richard-porter-m6or.squarespace.com/latest-articles as you can see here the summary block is exactly what i was looking for but i think the letters would pop a little more on a white background for that block while retaining the wood for the rest of the page. Thanks so much for your attention, its been driving me a little crazy, such a small detail! Link to comment
Milena Posted October 13, 2015 Share Posted October 13, 2015 Thanks Silvia, how can you get the selector then? Link to comment
colin.irwin Posted October 14, 2015 Share Posted October 14, 2015 If you use the Google Chrome browser there is a useful extension called the Squarespace Collection/Block Identifier. Enable the identifier while viewing a Squarespace web page and the collection ID and permanent block IDs are revealed. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
colin.irwin Posted October 14, 2015 Share Posted October 14, 2015 See my answer elsewhere on this thread. I'm Colin Irwin aka silvabokis. I've been a Squarespace designer & developer since 2013. I remember when it was all wild prairies round these here parts. 🐃🤠 Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written. That reminds me.. ..you might want to check out my Squarespace template finder or have a look at my other Squarespace tips Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. If you're looking for a Squarespace developer Book a chat or Drop me a line - first meeting is always free Link to comment
fuzzykit Posted August 4, 2016 Share Posted August 4, 2016 Hi @silvabokis, My site is melvin-sng-fpk3.squarespace.com. I'm trying to identify the id of each of the flags. I tried using nth-child(1), but the style I applied will affect all the flags. .sqs-block-summary-v2:nth-child(1) a { pointer-events: none;} Anything wrong? Can you please advise? Thanks! Link to comment
JoshNoe Posted April 7, 2017 Share Posted April 7, 2017 This extension does nothing, don't waste your time. Would downvote but not enough reputation. Link to comment
askrahn Posted August 18, 2017 Share Posted August 18, 2017 same here. installed. Clicking button in nav bar does nothing Link to comment
justamoron Posted August 14, 2019 Share Posted August 14, 2019 I'm using Opera with the "Install Chrome Extensions" extension installed and at first it didn't work for me either. However when I disabled Opera's Ad & Popup blocking on my Squarespace site, it started working. Try disabling any ad/popup blockers when working on your site and using the extension. Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.