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

How do I discover a block ID?

Question

11 answers to this question

Recommended Posts

  • 1

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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.

Edited by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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).

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • -1

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...