Invert lightbox colors

Hello,

I don’t see an option to customize the colors of the lightbox. I needed a white background to match the design of my site, so I am currently using the custom CSS code below to do that, however, I am having some difficulties removing the gray hover “background” behind the Previous/Next arrow buttons’ active area, once the mouse pointer is over them. (please, see the attached video) Could you help me with removing that? Thank you!

/* Lightbox White Background Below (pswp) */

.pswp__bg {
  background: #fff;
}

.pswp__img--placeholder--blank {
  background: none;
}

.pswp__top-bar,
  .pswp__ui--fit .pswp__top-bar {
    background-color: rgba(0, 0, 0, 1);
}

Sorry, the forum is not permitting .MP4 video files as attachments, so I’ve converted the video to animated .GIF

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the URL of the product to check it myself and help you out accordingly.

Best Regards.

Hi, the site is not live yet… However, you can check it on your own demos, if you set a lighter pswp__bg background color (preferably white, of course). I’m attaching a screenshot with this attribute changed on your default demo via Chrome’s DevTools and the same resulting gray rectangle on the hoover active area.

.pswp__bg {
  background: white;
}

Attachments:

You must be logged in to view attached files.

Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.pswp--has_mouse [class*="pswp__button--arrow--"] {
    background: white;
}

Best Regards

Well, unfortunately the above code is not working – you can indeed change the background hot zone color using this property (to any color), but I guess the animation/transition is placing this gray color/transparency somehow…

I got a working solution, but sometimes you can’t have the cake and eat it, too. I wanted a black top bar, but I settled for very light gray instead to have visible buttons, otherwise they are black on black (because of the invert property). Here is the code I’m using:

/* Lightbox White Background Below (pswp) */

.pswp__bg {
    background-color: white;
}

.pswp__img--placeholder--blank {
  background: none;
}

.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
    background-color: rgba(0,0,0,.1);
}

.pswp--css_animation .pswp__preloader__donut {
    border: 2px solid #000;
}

button.pswp__button--arrow--left::before, button.pswp__button--arrow--right::before {
 background-color: #90083C;
}

.pswp__button, .pswp__button--arrow--left::before,
.pswp__button--arrow--right::before {
    filter: invert(100%);
}

.pswp__top-bar .pswp__name,
.pswp__caption__center {
    color: black;
}

.pswp__counter {
    color: black;
}

Hello,

We are Glad that your issue has been Resolved.

Please let me know if any further assistance you want from me or give me permission to close this ticket?

Best Regards

[Author]

Posts