Documentation, Reference Materials and Tutorials for Envira Gallery
Would you like to show the lightbox navigation arrows for your Envira Lightbox only on hover? With Envira there is much more you can do with just a little CSS.
This guideline provides the custom CSS needed to display the lightbox navigation arrows on hover.
First, you’ll need to either create a new gallery or edit an existing gallery. If you need any help, check out our guide on creating your first gallery.
Lightbox for the gallery will need to be enabled. You can follow the guideline to enable the lightbox for gallery.
Likewise, you can see in the image below the settings we’re using for the purpose of this tutorial.
After you’ve created your gallery, set the theme to Legacy, then enable gallery arrows and set the gallery arrow position to Outside.
The Base (Dark) and Base (Light) lightbox theme automatically enable the arrows, so you won’t see an option to enable them here.
And that’s all that’s needed for this step.
In the next step, you’ll need to install and activate Envira CSS Addon. Navigate to the Addons section and click Install, then Activate the CSS Addon.
Below is the CSS we’ve used in our demo.
You’ll need to change this ID number to match your gallery ID number. You can find this by looking in the sidebar of your gallery edit screen.
For more information on how to find your gallery ID number, you can read this article.
You can also just add this CSS to the WordPress Customizer to make this change for all of your Envira Galleries!
To find out more about the WordPress Customizer, please review our article on How to add custom CSS to the WordPress Customizer.
If you’re using the CSS Addon to only change 1 gallery, add your CSS to the Misc tab inside the Custom Gallery CSS box.
Once you’ve added your CSS, just click Publish or Update to save the changes to the gallery.
div[data-envirabox-id="431230"] .envirabox-inner .envirabox-arrow { opacity: 0 !important; } div[data-envirabox-id="431230"] .envirabox-inner:hover .envirabox-arrow { opacity: 1 !important; }
431230
with your own gallery ID numberIf you’re going to want this change for all galleries, just remove the div[data-envirabox-id="431230"]
from the CSS and add your CSS to the Appearance » Customize » Additional CSS and click Publish to save the changes.
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!
A: Absolutely! You’d use exactly the same CSS, but just be sure the ID matches the album. If you added your CSS to the WordPress Customizer, then it would automatically make this change for all Envira gallery and album images.
Envira Gallery: Create, Showcase, and Sell Your Work – Trusted by 150k+ Sites.
Enter the URL of your WordPress website to install
Unlock even more powerful features designed to make your galleries even more beaituful.
Video Galleries
eCommerce
Social media Sharing
Adobe Lightroom
And much more!
Copyright © [#this year :%Y] Envira Gallery, LLC. Envira Gallery is a trademark of Envira Gallery, LLC.