Jump to content

targeting squarespace images with custom CSS and HTML

Recommended Posts

Hello,

I am trying to combine squarespace images with custom javascript and CSS. Specifically I am trying to have a certain picture display when the corresponding tab is "active" or clicked" the tabs portion of the section is custom built but the images need to be through squarespace and can not be custom built out. I need the first image to be set to display: block and the second and third images to be default to display: hidden to start and change to an "active" class in the css when their tab is clicked. I am having a lot of trouble targeting the images through the squarespace made CSS as I was not the one who wrote the custom code. I will provide screenshots of all relevant information. I am not sure if i can provide a link because the site is not live and its a copy. I only have the address with the name.squarespace/jejejkd-1. Is that safe to put up publicly? Sorry for new questions.

 

 

 

 

 

 

Screen Shot 2021-05-24 at 9.11.10 PM.png

Screen Shot 2021-05-24 at 9.18.49 PM.png

Screen Shot 2021-05-24 at 9.20.18 PM.png

Screen Shot 2021-05-24 at 9.22.12 PM.png

Edited by Patrick123
Link to comment
  • Replies 8
  • Views 3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

1 hour ago, Patrick123 said:

Hello,

I am trying to combine squarespace images with custom javascript and CSS. Specifically I am trying to have a certain picture display when the corresponding tab is "active" or clicked" the tabs portion of the section is custom built but the images need to be through squarespace and can not be custom built out. I need the first image to be set to display: block and the second and third images to be default to display: hidden to start and change to an "active" class in the css when their tab is clicked. I am having a lot of trouble targeting the images through the squarespace made CSS as I was not the one who wrote the custom code. I will provide screenshots of all relevant information. I am not sure if i can provide a link because the site is not live and its a copy. I only have the address with the name.squarespace/jejejkd-1. Is that safe to put up publicly? Sorry for new questions.

 

 

 

 

 

 

Screen Shot 2021-05-24 at 9.11.10 PM.png

Screen Shot 2021-05-24 at 9.18.49 PM.png

Screen Shot 2021-05-24 at 9.20.18 PM.png

Screen Shot 2021-05-24 at 9.22.12 PM.png

Use this extension to target the images

https://chrome.google.com/webstore/detail/igjamfnifnkmecjidfbdipieoaeghcff

so in your code, instead using document.getElementsByClassName("sqs-block-image"), we can use

document.querySelector("image-block-id");

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

so I would do the same thing the other person did with the tabs but use querySelector("image-block-id)?Also you mean literally put that within the parenthesis right? That helps to be able to target the correct thing at least. 

 

Link to comment
2 minutes ago, Patrick123 said:

so I would do the same thing the other person did with the tabs but use querySelector("image-block-id)?Also you mean literally put that within the parenthesis right? That helps to be able to target the correct thing at least. 

 

Assume the extension get you the id:#block-yui_3_17_2_1_1620931628669_10882

then it will be

document.querySelector("#block-yui_3_17_2_1_1620931628669_10882")

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

ok, I got that. If I am trying to target something with CSS and like this, how would i find what classes to use for the images?  I know I can use the data-section-id to target the section then use classes to specifically target an img, but there are so many.

 

 

section[data-section-id="60a510a9343ab0590654b05e"].page-section {
    padding-right: 0 !important;
  }

Link to comment
6 minutes ago, Patrick123 said:

ok, I got that. If I am trying to target something with CSS and like this, how would i find what classes to use for the images?  I know I can use the data-section-id to target the section then use classes to specifically target an img, but there are so many.

 

 

section[data-section-id="60a510a9343ab0590654b05e"].page-section {
    padding-right: 0 !important;
  }

Use the id for css selector as well

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

so something like this? this didnt select the picture i do not think

 

 

section[data-section-id="60a3da130d5d245c20f19406"] #block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

Link to comment
On 5/25/2021 at 10:41 AM, Patrick123 said:

so something like this? this didnt select the picture i do not think

 

 

section[data-section-id="60a3da130d5d245c20f19406"] #block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

something like this

#block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

use this code to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
On 5/26/2021 at 2:03 AM, tuanphan said:

something like this

#block-yui_3_17_2_1_1621883144215_12316 {
      display: none !important;
 }

use this code to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hate to resurrect an old thread, but I had difficulty targeting SquareSpace images as well. With that code that is posted here it only targets a div - not the actual image itself. I wanted to create an inset feathering/box-shadow effect for one image, but it looks pretty wonky when applied to the containing div instead of the image itself.

Also, I tried targeting the div's child, hoping to apply the effect to the image itself. But still no luck. For example:

#block-yui_3_17_2_1_1621883144215_12316 > * {
      // code here
 }

#block-yui_3_17_2_1_1621883144215_12316:first-child {
      // code here
 }

#block-yui_3_17_2_1_1621883144215_12316:nth-child(1) {
      // code here
 }

It's possible that it's a background image issue. In which case it'd be great to know how to target a background image and apply box-shadow or drop-shadow. I'll think about this more, but if anyone has any idea how SquareSpace images are loaded into the divs and how they can be targeted, I'd appreciate it. Thanks!

Edited by gitgud
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.