Streaming live at 10am (PST)

Lightbox Override Styles not working


#1

Hi all,

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:

  1. 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.

  2. Created custom style CSS in the header of the page, matching the specifications. On publish, the video lightbox close button still has not changed.

Can anyone shed any light on this, please?

Thank you so much!


#2

Your question is quite broad and doesn’t give us any demo on what you have already done. Perhaps you could provide a share link?


#3

Hi Sam,

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.

https://preview.webflow.com/preview/hawaii-video-memories?preview=7c36c1a35d518596ccec9a3055976594

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.

Thank you, kind sir!


#4

That is a beautifully designed site. May I know how and where you have done/placed the override style/code currently?


#5

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:

<div class="w-lightbox-control w-lightbox-close"></div>

Video lightbox with multi-state button
#6

Hi Sam,

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 :wink: 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?

Thanks again, sir!

Steve


#7

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.


#8

Ah ha, that makes sense. At least in your explanation - I’m not sure it makes sense why it’s like that, but all good. I know for next time now :slight_smile:

Thanks again,

Steve

Steve Holmes
Creative Director

energi.design
München