I saw a previous thread regarding CSS to override the lightbox controls (left, right, close, etc) and am trying to implement (something which worked in the past) but I am not seeing any changes.
I tried both ways of achieving this:
Created a new page, created a new div called w-lightbox-close and styled it accordingly, with hover state also. Upon publish, when I open my video lightbox, the close button has not changed.
Created custom style CSS in the header of the page, matching the specifications. On publish, the video lightbox close button still has not changed.
Apologies, I thought I had shared a link already… If you preview the link below and go to Portfolio, click any thumbnail to launch the video lightbox, you can see the upper right close icon isn’t styled as per the override style I have created.
Not sure if I have done something incorrect, but if I have created an object within WF with a w-lightbox-close style and have styled it accordingly, why it’s not showing up IN the lightbox.
Found it. I think you cannot add additional elements (like divs and buttons) to the Lightbox element. Those additional elements exists but they remain in the same place, and doesn’t get used/copied to the actual Lightbox (which is a separate instance) that Webflow opens.
The way to do this would be insert styles via custom code, overriding the classes shown here:
Thanks for the compliment! I am really enjoying the aesthetic and UX of this site… not quite sure yet how I’m going to scale it all down for tablet and mobile, but I guess that’s all part of the fun This is one of those sites where I should have started with mobile…
I managed to get the custom close buttons into the video lightbox now, thank you! It really helps knowing the name(s) of the div(s) style(s) which need customising… But I was also under the impression that if I created an item on the page with the exact same div naming structure and made changes there, it would override the styles — but it seems, the only way I can get it to work is by adding hand-coded styles to the header of the page. Is this right?
Yes, like I tried to explain earlier, the lightbox component(s) you add to your site are hidden and never opened. Webflow creates a new separate lightbox with copied attributes from the hidden lightboxes, but those additional elements that you add are not copied over and used/shown.
So the only way to customize the lightbox is to use custom CSS/JS.