Jump to content

How do you target a specific row/ find the row's block id?

Go to solution Solved by tuanphan,

Recommended Posts

The easiest way to find the block number:

If you’re using Google Chrome, download this Squarespace Block Identifier extension for Chrome. This extension is designed to help you find the Block Identification Number of each Block on your Squarespace Site.

Open up the page with the block you want to identify, click on the Identifier Tool in your Chrome Extensions and it will instantly reveal the Block Identification Numbers (which will be something like #block-53c818fd6d3f39517aed or #block-yui_3_17_2_1_1556302617094_72323)

Click on the Block you want to use and it will automatically copy the Block number for you!

If you don’t use Google Chrome:

Firstly, I recommend downloading it even if it’s just to use this extension, it will save you a bunch of time.

Otherwise, you can right click on the block and then click Inspect. Somewhere in the code for that certain object it will say ID=block etc. Though there are a lot of “ID’s” so make sure you look for the correct one, it needs to start with block.

TIP: Make sure the Block number starts with Block. If it starts with anything else, it’s not the correct ID.

Link to comment
  • Solution

Row has no id.

You can add a spacer block above row, then target spacer block id, then use this code to target row

#spacer-block-id + row {
css code
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

@Tuanphan,

This is great—but the "row" part of your selector didn't work for me. Instead, I had to use "div":
I'm using 7.0 — maybe that's the difference?

#your-spacer-block-id + div {
  your css code
}

As a note—I can never seem to get the right block I'D without using this browser extension:
Squarespace ID Finder

I put the spacer directly above the row I wanted (it's important to check the "Elements" in your browser inspector to make sure it's correctly placed before (above) the row you want to select.

Link to comment

@peach

Please post the URL for the page on your site where this effect should occur.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Quote

As a note—I can never seem to get the right block I'D without using this browser extension:

What other method(s) do you try to use that don't work? Using the inspector?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 year later...
On 10/23/2020 at 11:57 AM, tuanphan said:

Row has no id.

You can add a spacer block above row, then target spacer block id, then use this code to target row

#spacer-block-id + row {
css code
}

 

Hi, I tried this and it didn't work for me, any idea why?

#block-yui_3_17_2_1_1653562497252_8176 + row{
  .sqs-row {
    display: flex;
    flex-direction: column-reverse;
  }
}

https://synthesizer-helicon-94zy.squarespace.com/

password: gloo

Link to comment
6 hours ago, abibacon said:

Hi, I tried this and it didn't work for me, any idea why?

 

#block-yui_3_17_2_1_1653562497252_8176 + row

This selector means find the block id then a row sibling. Blocks do not have have row siblings.

Also note that spacer blocks do not have any layout rows or columns so there is nothing to target in them except a single div.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.