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!

  1. Create or edit your gallery
  2. Install and activate the CSS Addon
  3. The CSS

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.

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.

Install and activate the CSS addon to easily add your transparency CSS change to the gallery's Misc tab

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

Change Envira's transparency and background color on the Misc tab of the gallery

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.

Find your gallery ID number to change the transparency for your gallery

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 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.

div[data-envirabox-id='414950'] .envirabox-bg {
    opacity: 1 !important;
    background-color: #7cc048 !important;
}

Just remember to update the -414950 to match the gallery ID you’re wanting to target.

The opacity is on a percentage level so 1 = 100% opacity. This means you can’t see what’s behind the lightbox at all.

If you want to allow a little see through, change the opacity to .50 which is equal to 50% opacity.

And that’s it! You can see in the gallery below, using specific styles we’ve successfully styled our lightbox transparency and background color.

Would you like to have some more fun with Envira and CSS? Why not check out our tutorial on How to use Black & White Filter for Envira Gallery Images!