Lightbox Background Color

[vectra (Jennifer Garcia)]

How can I change the background from a complete takeover of black to white or even adjust the opacity to be able to see the website content through it?

---

Here is my public share link: LINK
(how to access public share link)

[ChrisT]

Hi Jennifer,

there is no built in way to change the background color of the lightbox element. However, you could try add this code:

LightBox - Edit the look and feel?

Hey @seank you left an empty href for your share link, can you please edit the post and add in the link? As far as customizing the color of the lightbox background you should be able to do the following <style> .w-lightbox-backdrop { background: rgba(0,0,0,0.9) !important; } </style> Just edit the rgba color and that should do it, you may need an !important tag, might not. Let me know if you have any trouble. Thanks, Waldo

Or this one here:

Making adjustments lightbox widget

I was able to change the lightbox colors and text by adding code to the head code section like so: <style> /* turning the lightbox background to white */ .w-lightbox-backdrop {background: rgba(256,256,256,.9);} /* turning the slide buttons orange */ .w-slider-dot { background: rgba(219,97,11,0.5); font-size: 16px;} .w-slider-dot.w-active { background: rgba(249, 209, 80,0.5); font-size: 16px;} /* turning the lightbox text colors */ .w-lightbox-backdrop { position: fixed; top: 0; righ…

[vectra (Jennifer Garcia)]

This really seems like an easy thing to add (opacity setting and color picker).

[claireyi (Claire)]

@LightBox - Edit the look and feel?

<style>

.w-lightbox-backdrop { background:  rgba(0,0,0,0.9) !important; }

</style>

Hi!!! This is a dumb question but where would I add the custom code? Or is there a better way to change the lightbox background colour now?

I’m having the same issue and here’s the link: https://preview.webflow.com/preview/claires-portfolio-2584d2?utm_medium=preview_link&utm_source=designer&utm_content=claires-portfolio-2584d2&preview=6bfff5311d3f7603e0add36f5dd19a90&pageId=62cbacb0aeebe9689e69921b&workflow=preview

The lightbox is on page Let’s Go all the way to the bottom titled “interaction flow lightbox” in the last section

[jerry_bro (Jesse Chesley)]

Hey Claire,

Did you ever find a solution to this? I’m wanting to do the same thing but can’t figure out where to add it.