Jump to content

CSS for changing slideshow Title and Description

Recommended Posts

Hi,

I'm trying to figure out how to set a specific text size/font/color for my slideshow titles and descriptions. I have basic knowledge of CSS, I just can't figure out how to identify the elements I'm trying to change in code. Basically:

???? {color: font-size:opacity:etc:}

Would really appreciate if anyone could help me fill in the question marks! (Also I'm using Wexley template if that makes a difference).

Thanks

Link to comment
  • Replies 7
  • Views 14.1k
  • Created
  • Last Reply

Okay, figured it out and sharing for anyone else with the same question. Obviously my specific setting are just for the example, you can play with the values.

To change the slideshow image title:


.sqs-gallery-block-slideshow .meta .meta-title {
font-family: georgia;
font-size: 18px;
color: #ffffff;
}

To change the image description in the slideshow (you can see here I've also set the opacity of the text so that it's not transparent like the background):


.sqs-gallery-block-slideshow .meta .meta-description p {
 font-family: Georgia;
 font-style: normal;
 font-size: 18px;
 color: white;
 opacity: 1;
}

And finally, to change the background of the image slideshow wrapper (the background box behind the text):


.sqs-gallery-block-slideshow .meta .meta-inside {
 background: #000000;
 opacity: 0.7;
}

Just insert these codes in your custom CSS and you should be good to go!

Link to comment
  • 1 year later...
  • 4 months later...
  • 1 year later...
  • 8 months later...

Thanks @socialitestyle , this is really helpful.

However, this part isn't working for me:

"To change the image description in the slideshow (you can see here I've also set the opacity of the text so that it's not transparent like the background):"

The text is following the wrapper opacity so it doesn't display well for me.

Anyone else experienced this and maybe found a solution?

Link to comment
  • 6 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.