Custom Colors For Light & Dark Overlays on Image Blocks

Is it possible via CSS (or some other way) to override the default semi-transparent white & black overlays on an image block to be custom colors? So that when I select light overlay a solid #F4F1E0 shows and with dark overlay a solid #343432 shows?

So far I've used the following code to get all overlays to become solid #F4F1E0. 

/* Change the background color - image block */
.yui3-lightbox2 .sqs-lightbox-slideshow{
background-color: #F4F1E0
}
/* Change the close button - image block */
.yui3-lightbox2 .sqs-lightbox-close{
color: #343432
}

Thanks in advance!

Hi, you can change the background color with this custom CSS:

.yui3-lightbox2 .yui3-lightboxoverlay-content .sqs-lightbox-overlay {
  background: black;
  &.light {
    background: white;
  }
}

Change the background color values as you wish.

But the close icon is the same colour by default for the dark and light overlay with no parent identifier to say whether it's dark or light. So being able to change it would require some javascript which is a little too complex for a forum post I think because it will require an event listener or mutation observer for the lightbox to appear and then detect if the background overlay has the class 'light' then add that class to the parent lightbox element.

I hope that helps.

Andrew
Square Ace

Thanks. Is there a way to make it a solid color as opposed to a semi-translucent color? And for some reason, when clicking an image, the image pop ups immediately but the color pops us slightly later. Is that normal?

Yes it can be a solid color:

.yui3-lightbox2 .yui3-lightboxoverlay-content .sqs-lightbox-overlay {
  background: black;
  opacity: 1 !important;
  &.light {
    background: white;
  }
}

The colour delay sounds odd. For me the lightbox and color background load quickly and the image is slightly delayed. If you've added other custom code for the lightbox that may be causing it.

Thanks for all your help! I've changed both black & white to the custom colors I want. The Dark Overlay displays as the solid color I want but the Light Overlay displays a semi-translucent white instead of a solid #F4F1E0. If it helps, my site is here. Password is whistleandhum. I've had similar issues with other code.