Jump to content

Adding drop shadow to image in an image card

Recommended Posts

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

Link to comment
  • Replies 3
  • Views 4k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>

 

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
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.

171234751_ScreenShot2022-03-12at10_13_47AM.thumb.png.4e8879119dc3ef93e87dc5c19826ffad.png

 

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;
}

 

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

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.