How to Style Pagination Links

Would you like to style pagination links in Envira Gallery’s Pagination Addon? All you’ll need is a little CSS. We’ll walk you through how to style pagination links in Envira.

• Setup
  1. Create or Edit Your Gallery
  2. Setup Envira Pagination
  3. Install and activate the CSS Addon
  4. The CSS
• FAQs
  • Could I use the same CSS for albums too?
  • Why does my CSS look different then the demo?

Setup

Step 1 – Create or Edit Your Gallery

First you’ll need to either create a new gallery or edit an existing gallery. If you need any help creating your first gallery, please review our documentation here.

Step 2 – Setup Envira Pagination

Pagination for the gallery will need to be enabled. You can see in the image below the settings we’re using for the purpose of this tutorial.

Step 3 – Install and activate the CSS Addon

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.

Step 4 – The CSS

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.

#envira-gallery-wrap-438183 .envira-pagination {
    text-align: center;
}
#envira-gallery-wrap-438183 .envira-pagination a.page-numbers, #envira-gallery-wrap-438183 span.page-numbers.dots, #envira-gallery-wrap-438183 .envira-pagination a.prev.page-numbers, #envira-gallery-wrap-438183 .envira-pagination a.next.page-numbers {
    display: inline-block;
    padding: 10px;
    background-color: #363f48;
    border-radius: 3px;
    text-decoration: none;
    transition: all 0.2s ease-in 0s;
    color: #fff;
}
#envira-gallery-wrap-438183 .envira-pagination a.page-numbers:hover, #envira-gallery-wrap-438183 .envira-pagination a.prev.page-numbers:hover, #envira-gallery-wrap-438183 .envira-pagination a.next.page-numbers:hover {
    background-color: #ccc;
    color: #363f48;
} 
#envira-gallery-wrap-438183 .envira-pagination span.page-numbers.current {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
    border-radius: 3px;
    color: #363f48;
}

Once you’ve added the CSS to the Misc tab, just click Publish or Update on your gallery to save the changes.

If you’re going to want this change for all galleries, just remove the gallery ID number from the CSS and add your CSS to the Appearance » Customize » Additional CSS and click Publish to save the changes.

See the demo!

There’s so much more you can do with CSS. Check out our other styling tutorials to see what else you can do using Envira and CSS.

FAQs

Q: Could I use the same CSS for albums too?

A: You’d use exactly the same CSS but just be sure the ID matches the album. If you added this CSS for all then the album images would automatically be covered under the above CSS.

Q: Why does my CSS look different then the demo?

A: This could be due to the WordPress theme adding it’s own styling to link items. For this reason there could be other causes for the styling not working for you.

If you have any trouble with the CSS, feel free to reach out to support!