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

Design help Custom code
1

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;

1441×892 495 KB

Best,

Nathan

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

2

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.

3

Hi @AntonioBalderas,

Could you go into some detail?

Best,

Nathan

4

1369×142 45.2 KB

Upload the icon to webflow and copy the link

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

2 Likes
5

Awesome! @AntonioBalderas