Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Style the Tags Filter

Would you like to style your tags list while using Envira Gallery’s Tags Addon? This tutorial will help walk you through some CSS style recommendations for your tags filter.

  1. Create your tagged gallery
  2. Install and activate the CSS Addon
  3. The CSS

Your first step is to create a tagged gallery. You can follow along with our documentation for creating a tagged 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

The following are examples to help you get started; you may need to modify them to suite your specific needs. Note in the CSS that we are preceding all CSS with the gallery ID #.

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.

All CSS used below can be added to your gallery by editing the gallery and clicking on the Misc Tab. There you’ll see a box labeled Custom Gallery CSS. Copy and paste any of the CSS below there and don’t forget to save your changed by clicking Update on the gallery.

The last step is to work out what you want the CSS to be. In this example we’ve styled the tags list to be centered above the gallery and display the tag links as buttons with a hover and active state.

/*This is the CSS to center the tag filter */
#envira-gallery-wrap-364454 .envira-tags-filter-list li.envira-tags-filter, 
#envira-gallery-wrap-364454 .envira-tags-filter-list li.envira-tag-filter {
   float: none !important;
   display: inline-block !important;
}
#envira-gallery-wrap-364454 .envira-tags-filter-list {
   text-align: center !important;
}


/*This is the CSS to have the links appear like buttons with a hover and active state */

#envira-gallery-wrap-364454 a.envira-tags-filter-link {
   padding: 5px;
   background-color: #7cc048;
   border-radius: 3px;
   color: #ffffff;
   border: 1px solid #7cc048;
   text-transform: capitalize;
}
#envira-gallery-wrap-364454 a.envira-tags-filter-link:hover, 
#envira-gallery-wrap-364454 a.envira-tags-filter-active {
   background-color: #ffffff;
   color: #7cc048;
}

And that’s it! You can see in the gallery below, using specific styles we’ve successfully styled our tags filter. Would you like to have some more fun with Envira and CSS? Why not check out our tutorial on How to Style Pagination Links!