Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Customize the Lightbox Close Button

You can customize Envira Gallery’s lightbox close button, replacing the default background image with your own.

With the following CSS we’ll replace the default close button with our own and adjust its position. It can be changed either of the following two ways depending on the desired effect:

  1. Apply to a single gallery’s lightbox: activate the CSS Addon and add the custom CSS to the Misc tab > Custom Gallery CSS section.
  2. Apply to all galleries on your site: add the custom CSS to the bottom of your active theme’s style.css file.

Make sure to change http://example.com/images/close-button.png to the URL of the close button you wish to replace the default one with in the example below.

/** Customize the Envira Gallery lightbox close button **/
.envirabox-wrap a.envirabox-close { 

  /* Change below image path with URL to your own close button image */
  background-image: url('https://example.com/images/close-button.png');

  /* May be necessary to change the default height and width values to account for your specific background image */
  width: 48px;
  height: 48px;
  
  /* Adjust positioning for your close button */
  margin-top: -10px;

}

envira-gallery-custom-close-button

Download the example Close button image (PNG)