Jump to content

Custom CSS for Banner Slideshow to add a drop shadow to title image title and description

Go to solution Solved by inside_the_square,

Recommended Posts

Hi! I'm hoping to find help here. I'd like to add a drop shadow to the text overlay for a banner slideshow I'm using so that the text is readable. I've seen a couple custom CSS options but nothing seems to be working. I've attached a screenshot example here. I would like to be able to add a drop shadow on both the title and description of the text.  Thank you for any help!

Screenshot 2024-05-23 at 1.28.33 PM.png

Link to comment
  • Replies 3
  • Views 720
  • Created
  • Last Reply

Top Posters In This Topic

22 hours ago, laurafiks said:

Hi! I'm hoping to find help here. I'd like to add a drop shadow to the text overlay for a banner slideshow I'm using so that the text is readable. I've seen a couple custom CSS options but nothing seems to be working. I've attached a screenshot example here. I would like to be able to add a drop shadow on both the title and description of the text.  Thank you for any help!

Screenshot 2024-05-23 at 1.28.33 PM.png

Can you share your URL so I can check it?

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
  • Solution

Hey @laurafiks - this is a great question! This code will add a red text shadow to a banner slideshow title and a blue shadow to the description. Adjust the shadow values as needed:

 .user-items-list-banner-slideshow .list-item-content__title{
text-shadow: 5px 5px red
} 
.user-items-list-banner-slideshow .list-item-content__description{
text-shadow: 5px 5px blue
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment
  • 1 month later...

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.