Streaming live at 10am (PST)

Turn arrows and "x" dark grey in lightbox widget?

Hi,

How do I turn the arrows and “x” dark grey in lightbox widget?

This is the code I was given (the white background does work when published):

/* 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; right: 0; bottom: 0; left: 0; color: #fff; font-family: "pragmatica-web", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif; font-size: 18px; font-weight: 400;

Best,

Nathan

https://preview.webflow.com/preview/bluelakecreative?preview=68cfbfda25786cb12e08e263487bbcaa
http://bluelakecreative.webflow.io/

The arrows and the close button are set as background img, I was thinking you can try target them via custom css and set you own icons as background img.

Hi @AntonioBalderas,

Could you go into some detail?

Best,

Nathan

Upload the icon to webflow and copy the link

.w-lightbox-close { background-image: url("replace with your own icon url"); }

2 Likes

Awesome! @AntonioBalderas