Jump to content

Change Lightbox Background Color

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Not sure if you have same tags in your template but you may try:

.yui3-lightbox2 .sqs-lightbox-slideshow

background-color: rgba(255,255,255,0.7);

It should give you a little bit transparent white lightbox

Link to comment
  • 4 months later...
  • 1 year later...
Guest danrhope

Hi thereI'm totally new to both squarespace and web design in general. I would like to achieve a darkening of the background when I open a lightbox video in Wexley.

Can I achieve this somehow with the information given on this thread?

Many thanks


Link to comment
  • 9 months later...
  • 6 months later...

I have tried almost everything to change the background and text color of the lightbox and none of the solutions proposed on these forums have worked. It is presently showing as white on white, so the text is there but illegible. I am using the Vow template. I have tried editing in the CSS template, adding code (

) within the lightbox code block, everything on these forums, and nothing has worked.

Any suggestions would be super helpful. Thanks!

Link to comment
  • 1 year later...

Here you go:

/*SquareSpace Lightbox*/
.sqs-lightbox-overlay.light {
    background: rgba(255,255,255,.98) !important;
    color: #3e3e3e;

.yui3-lightbox2 .sqs-lightbox-close:before {
    position: absolute;
    color: #445b6d;
    font-size: 40px;
  right: 5px;
  width: 40px;
  height: 40px;
    line-height: 100%;}

.yui3-lightbox2 .sqs-lightbox-previous:before, .yui3-lightbox2 .sqs-lightbox-next:before { 
    color: #0ab0ff;
    font-size: 33px;
  font-weight: 900;}


Link to comment
  • 6 months later...
On 5/14/2015 at 1:17 PM, 360degreesla said:

Hi, I am using The Avenue template with a grid style gallery block. I want to make the lightbox background white for consistency as this whole website is white.

Is this possible with code?

alt text


how did you get a lightbox to work?

Link to comment
On 7/4/2020 at 1:37 PM, phardy said:

how did you get a lightbox to work?

What is your problem? Can you describe? We can take a look

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


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.