Jump to content

How can I change the color used in the lightbox background?

Recommended Posts

Hi everyone,

I just switched to Atelier - which looks great and after a bit of fiddling around I've got text colors and everything the way I want. Here's where I'm stuck -

On my pages with a gallery "box" added I have them set up to open in a pop up window - each image that is. I can't find where or how to change the background color from black to white. It's just to harsh of a difference with the layout all in white and I'd like to make them the same.

Help! Thanks is advance@

Link to comment
  • Replies 4
  • Created
  • Last Reply

Adding this code snippet to the Custom CSS Editor should do the trick:


.sqs-lightbox-overlay { 
 background: white !important;
 opacity: 1 !important;
}

Then, secondarily, if you'd like to change the color of the controls that display inside an overlay, add this second line as well:


.yui3-lightbox2 {
 .sqs-lightbox-close,
 .sqs-lightbox-previous,
 .sqs-lightbox-next,
 .sqs-lightbox-meta-trigger {
   color: black;
 }
}

Template Developer at Squarespace, @esquareda on Twitter.

Link to comment
  • 6 months later...
  • 2 weeks later...

Hi bplamotte, just came across this looking for another lightbox solution. Not sure if you ever got an answer to your second question about transparency. Here's what I used to change my lightbox background to a warm gray, see the opacity setting below the color.

.yui3-lightbox2 .sqs-lightbox-overlay { background: #b2afa6 !important; opacity: 1 !important;}

Link to comment
  • 2 years later...

Archived

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

Guest
This topic is now 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.