Docs

[cdnmike]

Hi,

I added the following css to my site to change the video lightbox background from white to gray:

.ilightbox-overlay.light {
background: gray;
}

It works on mobile but doesn’t seem to work on desktop and can be viewed here:
http://x-theme.reportadvantage.com/home-4/

Hope you can help!

Thanks

[Joao]

Hi There,

Please try:

.ilightbox-overlay.light {
   background: grey !important;
}

Clean your browser cache and test it again

Thanks

Joao

[cdnmike]

Hi,

It still doesn’t work for the desktop. I am using http://mobiletest.me to test the mobile out and it works on there.
I even changed the background from grey to white in the css and the mobile went from grey to white without flushing the browser cache so it’s just the desktop for some reason.

Could there be another reason?

Thanks

[Jade]

Hi there,

I have checked your page but I am not certain how to trigger the lightbox? Would you mind letting us know which link to click for the lightbox to be active?

Thanks!

[cdnmike]

Sorry, I thought I mentioned a video link. The image for the video at the top left of the page triggers the lightbox.

I would like to add one more thing. I also added the following code to the custom css to disable the loader as well as change the background color which works on the mobile but not on desktop.
.ilightbox-loader {
display: none !important;
}

.ilightbox-overlay.light {
background: grey !important;
}

Thanks

[Thai]

Hey There,

You forgot to close the curly bracket in your custom CSS.

Please replace your current custom CSS with this:

.x-topbar .p-info, .x-topbar .p-info a, .x-topbar .x-social-global a {
  font-size: 20px !important;
  text-decoration: none;
  font-style: italic;
  float:right;
}
.x-topbar {
  background: url(http://x-theme.reportadvantage.com/wp-content/uploads/2016/07/top-nav.jpg) no-repeat;
  background-size: cover;
  font-weight:bold;
}
body .x-navbar ul.sub-menu li a {
  font-size: 16px;
}
.x-topbar .x-social-global {
  display:none;
}
.x-colophon.bottom .x-colophon-content {
  font-size: 14px;
}
.x-colophon.bottom, .x-colophon.top {
  font-size: 1.5rem;
}

.x-topbar .p-info a {
  color: #ffffff !important;
  padding-bottom:0px;
  text-decoration:none;
}

.x-topbar .p-info a:hover {
  color: #e7c213 !important;
}
.x-slider-container.below {
  border:none;
}
@media (max-width: 767px) {
  .x-topbar .p-info {
  background-color: #0b5093 !important;
  }
}
/* Remove Lightbox Wheel */
.ilightbox-loader {
  display: none !important;
}
.ilightbox-overlay.light {
  background: grey !important;
}

Hope it helps 🙂

[cdnmike]

I can’t believe I missed that. You guys are the BEST!

Thanks

[Rue Nel]

You’re welcome!
We’re glad we were able to help you out.

[Author]

Posts