Making adjustments lightbox widget


I would like to make a couple of adjustments to the lightbox, but I have currently not found anyway to do so and would really rather not have to make a light box from scratch.

Changes I would like to make:

  • make popup background color #484848 instead of black.
  • make the arrows when there are multiple items shown blue #4da5fc
  • change the caption box color to blue #4da5fc
  • put a live link to the website being shown in the portfolio

My site:



Hi @nathanphilsteele :smiley:

at this time, you cannot make adjustments to the styles of the lightbox widget. But you can create your own lightbox interaction from scratch (I know not ideal, but doing it this way gives you ultimate control over your design):

Hope this helps :smiley:

Hi @PixelGeek ,

Will it be possible in the future to have the ease of the widget plus customization, making it a really killer feature?



1 Like

Yup. this is something we know designer want, but we do not have a ETA on this yet.

But I suggest giving it a shot and learning how to create your own. :smiley: When you learn how to create things with the interactions tool, you’ll see that you could do SO MUCH with Webflow.

Also, learning is fun! :smiley:

Check out this awesome site created with Webflow interactions and NO CODE:

1 Like

Thanks @PixelGeek , I’m thinking I might want to link other lightboxes, and figured that it would be a pretty decent headache for the whole shabang on my PORTFOLIO section. I may give it a go though.

I love the interactions! I’m proud of the fluidity of the floating brain and the shadow that changes with it on my "THINKING"page, but I’ve got nothing on that website! Thanks for the share!

Thanks again!

I was able to change the lightbox colors and text by adding code to the head code section like so:

/* turning the lightbox background to white  */
.w-lightbox-backdrop {background: rgba(256,256,256,.9);}

/* turning the slide buttons orange  */
.w-slider-dot {
background: rgba(219,97,11,0.5); font-size: 16px;}

.w-slider-dot.w-active {
background: rgba(249, 209, 80,0.5);
font-size: 16px;}

/* turning the lightbox text colors  */
.w-lightbox-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: #fff;
  font-family: "pragmatica-web", Helvetica, Ubuntu, "Segoe UI", Verdana, sans-serif;
  font-size: 18px;
  font-weight: 400;

1 Like

Thank you so much @Chris_Grover!

Does the site have to be published for one to see the changes?

I only ask because the change code doesn’t appear to be picking up in preview mode even thought I went ahead and inserted the code in the header code section of the Custom Code page.

Thanks again @Chris_Grover

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.