Jump to content

How do I discover a block ID?

Recommended Posts

  • Replies 11
  • Created
  • Last Reply

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.

Link to comment

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

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.

Link to comment

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
  • 1 year later...

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

Link to comment
  • 9 months later...

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
  • 8 months later...
  • 4 months later...
  • 1 year later...

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

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.