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

laurafiks Level 4

laurafiks

Posted
Posted

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

  • Replies 3
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

laurafiks
laurafiks

a delayed response, but thank you for your help!

Posted Images

Beyondspace Level 14

Beyondspace

Posted
Posted
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 - PDF Lightbox popup - ...) </>  🗓️ Delivery Date Picker (Date picker form field)
Gallery block 7.1 workaround </> No-code customisations for Squarespace

  • Solution
inside_the_square Level 9

inside_the_square

Posted
  • Solution
Posted

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

 

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources