Modifying lightbox close icon

Design help Custom code
1

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!

G

2

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

“Chain”

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:

<style>
.w-lightbox-control.w-lightbox-close{
     background-size: 58px;
}
</style>

If it not working add live-url

2 Likes
3

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!

Cheers

G :grinning:

1 Like