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-overlay { background: rgba(0,0,0,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-overlay { background: rgba(0,0,0,1) !important; }

PHP Examples

Increased transparency:
To increase the transparency, add the following to your active theme’s functions.php file and modify the rgba value as desired:

add_action( 'envira_gallery_api_helper_config', 'tgm_envira_edit_transparent_overlay' );
function tgm_envira_edit_transparent_overlay( $data ) {
    
    ob_start();
    ?>
    overlay : {
        css : {
            'background' : 'rgba(0, 0, 0, 0.4)'
        }
    },
    <?php
    echo ob_get_clean();
    
}

Increased opacity:
If you want to remove any sort of transparency from the lightbox overlay, add the following to your active theme’s functions.php file instead:

add_action( 'envira_gallery_api_helper_config', 'tgm_envira_black_overlay' );
function tgm_envira_black_overlay( $data ) {
    
    ob_start();
    ?>
    overlay : {
        css : {
            'background' : 'rgba(0, 0, 0, 1)'
        }
    },
    <?php
    echo ob_get_clean();
    
}

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 color black at 25% opacity, or 75% transparency:

rgba(0,0,0,0.25)

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

rgba(0,0,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.