Adding drop shadow to image in an image card

Site URL: https://butterfly-ferret-rtd3.squarespace.com/home1-1

Hi all! (*waves*)

First time trying to code and first time on the forum. It's a big day! 🙂

I've been using this tutorial from Inside the Square on how to add a drop shadow to images in Squarespace, but something isn't going as planned because I've tried adding the code to the page header and inserting it as a code block, and nothing is happening. (*Scratches head*)

Here's the code I'm trying to use:

<style> #block-e49aade36849999cf32d .sqs-block-image img {box-shadow: 15px 15px #1E3128} </style>

I also tried this one but it didn't work either.

<style> #block-e49aade36849999cf32d .design-layout-card img {box-shadow: 15px 15px #1E3128} </style>

And here are the steps I've taken:

• Identified my image block using Squarespace Collection / Block Identifier (recommended by Inside the Square).
• Tried the Page Heading Code Injection (Page Settings > Advanced > pasted in code > Save). Nothing changed.
• Went into the page, added a Code block directly below the image (selected HTML, pasted in the code, clicked out of the block). Crickets!
• Switched the Code block to CSS. More crickets.
• Duplicated the section, removed the background (now it's just white) in case the code objected to the background image for some reason, and tried it all again. Still nothing.
• Checked the Squarespace help article on Code Blocks (as far as I can tell, I've followed all the steps correctly ... except, obviously not, because nothing's happening).
• And, finally Squarespace chat sent me here. And, goodness am I glad to be here. It's been a long trip!

The specific image I'm trying to add the drop shadow to is the one of Scott - under the dark green testimonial slider.

So! I'm definitely missing something here. If anyone can help me solve this riddle wrapped in a mystery inside an enigma I will jump for joy - literally. 🙂

Many thanks 🙂

Twinkle

5 hours ago, Twinkle said:

Site URL: https://butterfly-ferret-rtd3.squarespace.com/home1-1

Hi all! (*waves*)

First time trying to code and first time on the forum. It's a big day! 🙂

I've been using this tutorial from Inside the Square on how to add a drop shadow to images in Squarespace, but something isn't going as planned because I've tried adding the code to the page header and inserting it as a code block, and nothing is happening. (*Scratches head*)

 

Here's the code I'm trying to use:

<style> #block-e49aade36849999cf32d .sqs-block-image img {box-shadow: 15px 15px #1E3128} </style>

I also tried this one but it didn't work either.

<style> #block-e49aade36849999cf32d .design-layout-card img {box-shadow: 15px 15px #1E3128} </style>

 

And here are the steps I've taken:

• Identified my image block using Squarespace Collection / Block Identifier (recommended by Inside the Square).
• Tried the Page Heading Code Injection (Page Settings > Advanced > pasted in code > Save). Nothing changed.
• Went into the page, added a Code block directly below the image (selected HTML, pasted in the code, clicked out of the block). Crickets!
• Switched the Code block to CSS. More crickets.
• Duplicated the section, removed the background (now it's just white) in case the code objected to the background image for some reason, and tried it all again. Still nothing.
• Checked the Squarespace help article on Code Blocks (as far as I can tell, I've followed all the steps correctly ... except, obviously not, because nothing's happening).
• And, finally Squarespace chat sent me here. And, goodness am I glad to be here. It's been a long trip!

 

The specific image I'm trying to add the drop shadow to is the one of Scott - under the dark green testimonial slider.

 

So! I'm definitely missing something here. If anyone can help me solve this riddle wrapped in a mystery inside an enigma I will jump for joy - literally. 🙂

 

Many thanks 🙂

Twinkle

Hi, you cannot use code blocks to customise other elements on the page. You can only do this by adding code to the page settings or the custom css area. Try adding this code to page settings and let me know how it goes 🙂

<style>
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset {
  box-shadow: 15px 15px #1e3128;
}
</style>

Thanks for your reply @Jia. That was actually one of the first things I tried -- Page Settings > Advanced > pasted in code > Save -- no dice! 

Any other ideas?

4 hours ago, Twinkle said:

Thanks for your reply @Jia. That was actually one of the first things I tried -- Page Settings > Advanced > pasted in code > Save -- no dice! 

Any other ideas?

That's odd...it shows up on my end.

Have you tried adding the code to custom css (Design > Custom CSS)?

.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-inset {
  box-shadow: 15px 15px #1e3128;
}