Guest Posted March 11, 2022 Share Posted March 11, 2022 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
Jia Posted March 11, 2022 Share Posted March 11, 2022 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. www.sevenstars.studio www.instagram.com/sevenstars.studio Link to comment
Guest Posted March 11, 2022 Share Posted March 11, 2022 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? Link to comment
Jia Posted March 12, 2022 Share Posted March 12, 2022 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; } Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified. www.sevenstars.studio www.instagram.com/sevenstars.studio Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment