Lightbox overlay opacity

[solarom]

I want to make the accent colour on lightbox overlay \transparent. What custom CSS should I use to change the properties of a lightbox overlay?

[HiroiSekai]

I’m not sure of your specific site’s class for the lightbox, but simply bring up the Inspect Element window from the overlay and it should inform you which class(es) you need to change. This can even be done in the Jetpack Custom CSS.

As for prioritizing over the theme’s default set, write in a !important rule to force that rule to always apply. So for example, if the class you need to change was called .overlay, then:

.overlay {
opacity:0 !important;
}

And that should do it. Since a lightbox overlay may sometimes place its background and imagery into the same class, make sure you test it in the inspector first to see if it makes the entire lightbox transparent.

[Rui Guerreiro – SUPPORT]

Hi @solarom,

Can you provide us a specific example showing us the page url?

-Rui

[solarom]

Sure, here it is.
http://me-too.ru/?lang=en
I want the white overlay on images (cards and logos) to be transparent, but with the eye icon.

[solarom]

I have another question. My client says that this website has very large gaps at the bottom of certain sections on wide screens (screenshot attached), but it looks fine on my Macbook. Do you have an idea what’s causing this?

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Add the code bellow to your theme custom css options.

figure.animated-overlay figcaption {
background-color: transparent!important;
}

Can you get a screenshot from what your client is seeing? what is the screen resolution is using?
Thanks

-Rui

[solarom]

Okay, I did that, and it worked, but now images are opening just as pictures, not with a lightbox (lightbox is activated).

[solarom]

1680х1050 – resolution

[Rui Guerreiro – SUPPORT]

But that’s not related to the css I provided. Will check that with the development team.

How did you update the theme?

p.s-can you provide us a screenshot from your customer screen issue.

Thanks
-Rui

[solarom]

I did, that was her screenshot.

I updated it automatically through wordpress admin.

[Swift Ideas – Ed]

This reply has been marked as private.