Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

CSS Addon

Would you like to jazz up your galleries with some custom CSS? The CSS Addon for Envira Gallery is a great addon if you want to be able to make small design changes on a per-gallery basis. We’ll walk you through how to use the Envira’s CSS Addon.


Requirements

  • Any Envira license
  • WordPress 4.8+
  • Envira Gallery 1.3.4.1+

Installation

Please follow our instructions on how to install and activate addons.

In this instance, you’ll be activating the Envira CSS Addon.

Setup

Step 1 – Create or edit your gallery

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.

Step 2 – Add your CSS

Next, navigate to the Misc tab.

Here you will find the Custom Gallery CSS field below the Enable RTL Support feature.

The Custom CSS field is located in the Misc tab when editing your gallery.

Within this field you can add custom CSS tailored to that specific gallery. For example, let’s say that your gallery has an ID of 35 and you want to add some extra padding above and below the gallery. Simply add the following in the custom CSS box, replacing 35 with the ID of your gallery:

#envira-gallery-35 { margin: 40px 0; }

This will add 40 pixels of space both above and below the gallery.

Now let’s say you want to add some borders to your images. You can do it by adding this to the custom CSS box, again replacing 35 with the ID of your gallery:

#envira-gallery-35 .envira-gallery-image { border: 5px solid #222; }

Step 3 – Publish or Update your gallery

Finally, click Publish or Update on your gallery to save the changes.

The possibilities for customization are endless, and this makes it easy to contain your styles to specific galleries.

Check out some of our other styling docs to continue using custom CSS to change your gallery look and feel. Each of our styling tutorials will provide direct links to examples.


FAQs

Q: I’m new to writing CSS, how can I get started?

A: You might find this tutorial helpful to get started using CSS to customize the appearance of your gallery.


Q: Why isn’t my CSS change showing?

A: Check that you’ve added your CSS to the Custom Gallery CSS field and not the Custom Gallery Classes field (shown below).

The Custom CSS field is located in the Misc tab when editing your gallery.


Q: Is this the only way to add CSS?

A: Not at all! Whether you want to change your galleries or anything else in your theme, you can use the WordPress Customizer to add Additional CSS.

Check out our guide on How to add custom CSS to the WordPress Customizer.


Q: Will this work for albums too?

A: Absolutely! On the Misc tab of an Envira Album, you’ll see the same options to add your CSS.


Changelog

1.3.2 (10-26-2018)

  • Enhancement: Improved UI and error checking for entering CSS

1.3.1 (05-30-2018)

  • Fix: Minor bug fixes.

1.3.0 (04-10-2018)

  • Added: Fancybox3 support.
  • Fix: Minor bug fixes.

1.2.0 (10-18-2017)

  • Fix: Minor bug fixes.

1.1.0 (02-01-2017)

  • Fix: Escaped Quotes when saving

1.0.9 (2016-10-04)

  • Fix: Custom CSS box should now longer strip out anything after the quotes on HTML characters.

1.0.8 (2016-02-25)

  • Updated: Spanish Translations

1.0.7 (2015-12-10)

  • Updated: Spanish Translation

1.0.6 (2015-11-26)

  • Added: Spanish translation.

1.0.5

  • Added: CSS Support for Albums Addon.

1.0.4

  • Full localization support with .pot files.

1.0.3

  • Fixed bug with HTML entity encoding for quotes in CSS.

1.0.1

  • Fixed bug using wrong hook for setting.

1.0.0

  • Initial release of the addon.