Jump to content

Targetting specific image into the CSS?

Recommended Posts

  • 8 months later...
  • Replies 6
  • Views 19.8k
  • Created
  • Last Reply

I just found a solution to target individual images in CSS. If you right click the image in the browser and inspect you will see something like: data-image-id="548969e9e4b05708750ebe59". This looks to be a persistent id that can be used to reference the image. So an example in CSS:

[data-image-id="548969e9e4b05708750ebe59"] {
   border-radius: 20px;

This will target that specific image. Perhaps you could tweak this for any block that you are wanting to modify. The key is finding the persistent id (the one without “yui”)

Link to comment
  • 2 weeks later...

Hmm. I am no expert on Squarespace's system. My discovery is based completely on observation and what worked for me. So there are two things that might be going on:

  1. Either the id that you have is incorrect.
  2. Or, more likely, the change won't appear until you sign out. When I added the border radius to my image, the image was still square until I signed out. I don't know why. My guess is the data-image-id doesn't show up when you are signed in.

Does this help?

Link to comment
  • 1 year later...

I recently needed to do the same thing, although it was a group of 3 images in the footer area of my site.

There are two (pretty easy) ways to do this that I found that involve using the "Filename (Optional)" field when you click edit on each individual image. You can essentially use this like a class name in CSS because Squarespace uses it for the "alt" attribute on the image in your code. You can easily target specific alt attributes. If you named your image "my-awesome-image.jpg" then you would be able to add the following code to your Custom CSS to target it:

[alt="my-awesome-image.jpg"] { border: 5px solid red; }

If you don't care about your site being semantically correct you can give several images the same "filename" in their editor and target them all at once with one line of CSS. If you used the filename "add-drop-shadow" then your custom CSS would be:

[alt="add-drop-shadow"] { box-shadow: 0px 0px 10px black; }

Something to note: You might need to add the !important tag to your css to make it take priority. Some themes may override your styles even if your target them correctly.

[alt="add-drop-shadow"] { box-shadow: 0px 0px 10px black!important; }

Link to comment
  • 1 year later...
  • 4 months later...


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

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.