Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Change Lightbox Overlay Transparency

Would you like to change the background color or opacity for your Envira Gallery lightbox? With a little help of some custom CSS you can easily do this! This tutorial will walk you through how to change the overlay transparency and even the background color on your galleries!

Create or edit your gallery

Your first step is to create a new gallery or edit an existing one. You can follow along with our documentation for creating your first gallery.

Install and activate the CSS Addon

The next step you’ll need to install and activate Envira’s CSS Addon. Navigate to the Addons section and click Install then Activate on the CSS Addon.

On the Misc tab of the gallery you can add your CSS to change the transparency and background color.

You’ll need to change this ID # to match your gallery ID. You can find this by looking in the sidebar of your gallery edit screen.

You could apply this change to all galleries if you wish by adding the CSS to your WordPress dashboard » Appearance » Customize » Additional CSS and tweak the css slightly by removing the div[data-envirabox-id='414950'] from the CSS below. Then just click Publish to save the changes.

That CSS would be applied to every gallery and album lightbox on your site.

The CSS

The last step is to work out what you want the CSS to be. In this example we’re setting the background color to green to match our logo and giving it full opacity (100%) so you can’t see through the lightbox.