Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Style Pagination Links

Do you want to change the default look of the pagination with Envira Gallery’s Pagination Addon? We have you covered! The Pagination Addon is shipped with minimal default styling, inheriting most of it’s appearance from your site’s styles, and this doc shows you how to overwrite the styling that comes with the Base theme.

To add the CSS, you can install, activate, and use the CSS Addon. You can find more detailed step-by-step instructions for our CSS Addon here. Once activated, you can add this CSS to the Misc tab under the Gallery Custom CSS or using your child theme’s style.css:

/* centers the pagination on the page */
.envira-pagination {
    text-align: center;
}
/* styles the pagination on the page */
span.page-numbers.dots {
    display: inline-block;
    padding: 10px;
    background-color: #363f48;
    border-radius: 3px;
    color: #fff;
}
.envira-pagination a.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-pagination a.page-numbers:hover {
    background-color: #ccc;
    color: #363f48;
}
.envira-pagination span.page-numbers.current {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
    border-radius: 3px;
    color: #363f48;
}
/* styles the previous and next links */
.envira-pagination a.prev.page-numbers,
.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-pagination a.prev.page-numbers:hover,
.envira-pagination a.next.page-numbers:hover{
    background-color: #ccc;
    color: #363f48;
}

Here’s an screenshot of what the above styling can look like live:
pagination-styling

In short, we try to make it easy for you to style your Envira Gallery. The possibilities are almost endless! If you liked this doc, you may also be interested in our doc on How to Style Image Title and Caption Hover Effects.

[i]
[i]
[i]
[i]