Envira Gallery Documentation

Documentation, Reference Materials and Tutorials for Envira Gallery

How to Style Pagination Links

Share This Post!

Envira Gallery’s Pagination Addon is shipped with minimal default styling, inheriting most of it’s appearance from your site’s styles. Each gallery theme comes with different styling, but if you would like to over write the styling that comes with the Base theme, here is some sample CSS to style the pagination.

You can use install and activate the CSS addon. 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 a.page-numbers:hover {
    background-color: #ccc;
    color: #363f48;
}
/*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 span.page-numbers.current {
    display: inline-block;
    padding: 10px;
    background-color: #ccc;
    border-radius: 3px;
    color: #363f48;
}
.envira-pagination {
    text-align: center;
}

pagination-styling

Share This Post!