Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Remove the Lightbox Border

Would you like to remove the border from the image in the lightbox? Using some custom CSS you can easily do that! We’ll walk you through the steps needed to easily remove the lightbox borders.

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

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 your gallery you can add your CSS to remove the border from around the lightbox image.

Remove the border from the lightbox image by adding this CSS to the Misc tab

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 Envira gallery ID number to target the CSS to remove the lightbox image border

To remove the border from this particular gallery’s lightbox images, use the CSS below:

div[data-envirabox-id='415002'] .envirabox-image-wrap {
    border:none !important;
}

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

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='415002'] 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.

CSS to remove the border around the lightbox image for all Envira galleries

.envirabox-image-wrap {
    border:none !important;
}

And that’s it! You can see in the gallery below, using specific styles we’ve successfully removed the border from the image in the lightbox.


FAQs

Q: Will this work for albums too?

A: Absolutely! The exact same CSS above will work for both albums and galleries.


Would you like to have some more fun with Envira and CSS? Why not check out our tutorial on How to Change Lightbox Overlay Transparency!