Modifying lightbox close icon

Hi all.

We would like to modify the close-icon on the lightbox

Apologies if this is very simple! - we’ve added the following to the site-wide custom code header and to the actual page

.w-lightbox-close { background-size: 58px !important; }

But doesn’t seem to work so guessing we’ve done it wrong!

Also if we wanted to add text next to the buton would it be that we create a hidden div block, and create our own lightbox?

Many thanks for the support and time here!


To customize the lightbox you should know well CSS (And whats happen when webflow will update the code in the future?)


About your button - the class of webflow is more specific - so you should use .w-lightbox-control.w-lightbox-close selector (Select element with class one and two). No need for !important her. Copy-paste this:

     background-size: 58px;

If it not working add live-url


Hi Ezra, It now works!

Such a brilliant reply, thanks for explaining exactly what was happening, so I can apply that knowledge to other things.

Many many thanks!


G :grinning:

1 Like