Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Customize the Lightbox Navigation Arrows

Envira Gallery is highly customizable using CSS, including the ability to customize the lightbox navigation arrows.

NOTE: The following are examples to help you get started; you may need to modify them to suit your specific needs.

 


Replace Navigation Arrows with Custom Images

With the following CSS we’ll replace the default arrows with our own and adjust the size of the navigation span accordingly.

Add the following CSS to the bottom of your active theme’s style.css file to apply the style to all gallery lightboxes on your site:

/** Customize the Envira Gallery lightbox navigation arrows **/
.envirabox-wrap .envirabox-next span { 
  background-image: url('https://example.com/images/envira-arrows.png'); /* update with url to own navigation arrow image */
  background-position: right;
  background-size: 200%;

  /* May be necessary to change the default height and width values to account for your specific background image. */
  width: 53px;
  height: 34px;
  
  /* This value should be half the height value */
  margin-top: -17px;
}

.envirabox-wrap .envirabox-prev span { 
  background-image: url('https://example.com/images/envira-arrows.png'); /* update with url to own navigation arrow image */
  background-position: left;
  background-size: 200%;
  
  /* May be necessary to change the default height and width values to account for your specific background image. */
  width: 53px;
  height: 34px;
  
  /* This value should be half the height value */
  margin-top: -17px;
}

/* Use Media Queries to indicate the retina image you wish to use for the navigation arrows to replace the defaults */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2 / 1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) {
    .envirabox-prev span, .envirabox-next span {
        background-image: url('https://example.com/images/envira-arrows-retina.png') !important;
        background-size: 53px 34px !important;
    }
}

Envira Gallery custom navigation arrows in the lightbox view can be achieved using CSS.

Download the example navigation arrows image (includes PSD)

 


Replace Navigation Arrows with FontAwesome Icons

With this example you can use the unicode value for any FontAwesome icon to use as the navigational arrows!

Add the following CSS to the bottom of your active theme’s style.css file to apply the style to all gallery lightboxes on your site and modify as desired:

/*** Make nav arrows always visible (optional) ***/
.envirabox-nav { visibility: visible !important; }

/* Remove default navigation arrow background images */
.envirabox-nav span { display: none !important; }

/* Make the clickable nav area larger */
.envirabox-nav { width: 30% !important; height: 100% !important; }

/* Add custom FontAwesome nav arrows */
.envirabox-nav::before { 
  display: block;
  font-family: 'FontAwesome';
  position: absolute;
  top: 50%;
  
  /*** Color of the icons, modify as desired ***/
  color: #fff !important;
  
  /*** Font size of the icons, modify as desired ***/
  font-size: 50px;
}

/* Prev nav arrow */
.envirabox-prev::before {
  /*** Replace with the FontAwesome icon unicode you want to use ***/
  content: '\f104';
  left: 0 !important;
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
}

.envirabox-next::before {
  /*** Replace with the FontAwesome icon unicode you want to use ***/
  content: '\f105';
  
  right: 0 !important;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

You can replace the default Envira lightbox nav arrows with any FontAwesome icons using CSS.

Q: Where do I find the unicode value for the FontAwesome icons?

A: The unicode value is shown on the individual icon detail pages at http://fontawesome.io/.

You can grab the unicode value for any FontAwesome icon from the icon's detail page.

 


Replace Navigation Arrows with Dashicons Icons

With this example you can use the unicode value for any Dashicons icon to use as the navigational arrows!

Add the following CSS to the bottom of your active theme’s style.css file to apply the style to all gallery lightboxes on your site:

/*** Make nav arrows always visible (optional) ***/
.envirabox-nav { visibility: visible !important; }

/* Remove default navigation arrow background images */
.envirabox-nav span { display: none !important; }

/* Make the clickable nav area larger */
.envirabox-nav { width: 30% !important; height: 100% !important; }

/* Add custom Dashicons nav arrows */
.envirabox-nav::before { 
  display: block;
  font-family: 'Dashicons';
  position: absolute;
  top: 50%;
  
  /*** Color of the icons, modify as desired ***/
  color: #fff !important;
  
  /*** Font size of the icons, modify as desired ***/
  font-size: 50px;
}

/* Prev nav arrow */
.envirabox-prev::before {
  /*** Replace with the Dashicons icon unicode you want to use ***/
  content: '\f341';
  
  left: 0 !important;
  -webkit-transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
}

.envirabox-next::before {
  /*** Replace with the Dashicons icon unicode you want to use ***/
  content: '\f345';
  
  right: 0 !important;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

You can replace the default Envira lightbox nav arrows with Dashicons Icons using CSS.

Q: Where do I find the unicode value for the Dashicons icons?

A: The unicode value is shown in a popup dialog box so you can easily copy it:

  1. Visit the Dashicons page at https://developer.wordpress.org/resource/dashicons/.
  2. Locate the icon you want to use and select it.
  3. You’ll now see a large view of the icon at the top of the page; select the Copy CSS link next to the large view of the icon.
  4. A popup dialog box will now appear with the CSS unicode you can copy for use.

You can copy the CSS for any Dashicons icon from the popup dialog box that appears on the icon page.