Style a Lightbox

Webflow doesn't let you control all the elements of a Lightbox directly, but it's easy to address this by targetting the elements directly with CSS Custom Code.

The lightbox demo

Change the close icon

Check the code contained in the HTML Embed Component below.
(First Clone this site using the link in the Navbar ↑, then open this page in the Designer and double click on the striped area below. Or just grab the line of code below.)

❮❯ code

.w-lightbox-close { background-image: url(URL_OF_THE_NEW_IMAGE)!important; }

Change the images for the arrows

❮❯ code

.w-lightbox-left { background-image: url(URL_OF_THE_NEW_IMAGE)!important; }
.w-lightbox-right { background-image: url(URL_OF_THE_NEW_IMAGE)!important; }

Change the background color

❮❯ code

.w-lightbox-backdrop { background: rgba(57, 38, 76, 0.9); }