Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Change Lightbox Overlay Transparency

You can easily change the lightbox overlay transparency for your Envira Gallery.

Depending on what you’re most comfortable editing, you can modify the appearance using CSS or PHP.

CSS Examples

Increased transparency:
To increase the transparency, add the following to your active theme’s style.css file and modify the rgba value as desired to modify all lightboxes on your site:

.envirabox-is-open .envirabox-bg { opacity: 0.4; !important; }

Increased opacity:
To remove all transparency and have a solid black overlay, add the following to your active theme’s style.css file to modify all lightboxes on your site:

.envirabox-is-open .envirabox-bg { opacity: 1; !important; }

Troubleshooting

What’s RGBA?
RGBA stands for Red, Green, Blue, Alpha. RGBA is a color model that can be used to indicate both the color, and the transparency of that color, in CSS styles.

How do I increase/decrease the transparency using RGBA?
There are four numerical values you can define in your RGBA value, the first three will determine the color, and the fourth value (alpha) indicates the transparency percentage. The alpha value can be any decimal value between zero and one, with zero representing 100% transparency and one representing 100% opacity.

To increase transparency you would specify a smaller decimal value for the alpha value.

The following RGBA value sets the background at 25% opacity, or 75% transparency:

opacity: 0.25;

And the following RGBA value sets the background at 0% opacity, or 100% transparency – resulting in no color appearing at all:

opacity: 0.0;

Can I use a HEX color instead of RGBA?
No, unfortunately the HEX color model does not provide the option to specify transparency.

If you’re not sure how to translate your HEX color value to RGBA you might find this tool useful for generating your RGBA value.