Style lightbox Right, Left and Close controls

Design help General
1

Hi there,
Could anybody help with the necessary code to style the lightbox controls? I just want to use the same svg icons throughout the site and keep a consistent design. That could be terrific for non-professionals until the team can implement these options. Thanks everybody for the great work

1 Like
2

Here is some info I wrote on another forum post:

When you want to overcharge a Webflow element that is not accessible for styling, instead of adding custom code to override the CSS property, create a DIV on a draft page and give it the exact same class name that the element you're targeting has. Then add your own styles and test.

For example, it works well when you want a little bit of control on the Lightbox thumbnails. Use the class name w-lightbox-thumbnail on a dummy DIV and add :hover properties.

Back to the page where your Lightbox is, you should notice your styles override Webflows' default ones.

Your alterations affect all the page site wide and remain active until the dummy hack element is erased and unused styles are cleaned from the style manager tab.

Here are the elements names and properties:

.w-lightbox-backdrop, .w-lightbox-container {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.w-lightbox-content {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.w-lightbox-view {
  position: absolute;
  width: 100vw;
  height: 100vh;
  opacity: 0;
}

.w-lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border: 5px solid rgba(0,0,0,.4);
  border-radius: 50%;
  -webkit-animation: spin .8s infinite linear;
  animation: spin .8s infinite linear;
}

.w-lightbox-control {
  position: absolute;
  top: 0;
  width: 4em;
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  -webkit-transition: all .3s;
  transition: all .3s;
}

w-lightbox-left, .w-lightbox-right {
  display: block;
  opacity: .5;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 84vh;
}

For the thumbs, from parent to childs:

.w-lightbox-strip {
  padding: 0 1vh;
  line-height: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.w-lightbox-item {
  display: inline-block;
  width: 10vh;
  padding: 2vh 1vh;
  box-sizing: content-box;
  cursor: pointer;
  -webkit-transform: translate3d(0,0,0);
}

.w-lightbox-thumbnail {
  position: relative;
  height: 10vh;
  background: #222;
  overflow: hidden;
}
3

That’s awesome! Really useful trick. So fast, so easy, so effective! Thanks a lot Vincent!

4

Ah! I didn’t know if you’ll be able to make it with all this somehow technical info, was ready to elaborate but it seems you’ve got it to work (: great!

6

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