Jump to content

Change Lightbox Description Font Color

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.chrispcreations.com/ads#/jdholiday/

The light box description font is difficult to read. I tried to change the description font color to white by putting the following code into the specific page's advanced settings:

<style>
div.sqs-gallery-block-grid .meta .meta-description p {
 color: hsla(0, 0%, 0%, 1);
}
</style>

Didn't work—is there a way I can make the description font white, or the hover overlay 100% opacity?

Screen Shot 2020-03-11 at 11.01.19 AM.png

Screen Shot 2020-03-11 at 11.01.29 AM.png

Link to comment

or you can also add this code to Page Header

<style>
  .yui3-lightbox2 .sqs-lightbox-meta * {
    color: white !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
7 hours ago, tuanphan said:

or you can also add this code to Page Header


<style>
  .yui3-lightbox2 .sqs-lightbox-meta * {
    color: white !important;
}
</style>

 

This worked like a charm, thank you! Any chance I can also bold the title or increase the title font size so it's more prominent than the description?

Screen Shot 2020-03-12 at 10.19.20 AM.png

Link to comment
  • Solution
<style>
  .yui3-lightbox2 .sqs-lightbox-meta * {
    color: white !important;
}
  .yui3-lightbox2 .sqs-lightbox-meta h1 {
    font-size: 30px !important;
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.