Pagination

Overview

Pagination style can be modified using custom CSS. Let’s take a look at the CSS classes which we can use to change the look of the pagination.

Pagination Styles

Pagination style can be modified using custom CSS. Let’s take a look at the CSS classes which we can use to change the look of the pagination.

/*-----------------------------------------
// CSS - Pagination styles
//----------------------------------------*/

/* Pagination wrapper*/
#top .main_color .pagination-wrap {
 /* Your styles here*/ }

/* Pagination links*/
#top .main_color .pagination a {
	background: transparent;
	border: 1px solid transparent;
	box-shadow:  none;	
}

/* Meta info */
#top .main_color .pagination .pagination-meta {
 /* Your styles here*/ }

/* Active link */
#top .main_color .pagination .current {	
	background: #000;
	color: #fff;
}

/* Inactive link */
#top .main_color .pagination .inactive {
 /* Your styles here*/ }

/* Links on hover*/
#top .main_color .pagination a:hover {
	background: transparent;
	color:#000;
	border: 1px solid #000;
}

/* First button */
#top .main_color .pagination a:nth-child(1) {
 /* Your styles here*/ }

/* Previous button */
#top .main_color .pagination a:nth-child(2) {
 /* Your styles here*/ }

/* Next button */
#top .main_color .pagination a:nth-last-child(2) {
 /* Your styles here*/ }

/* Last button */
#top .main_color .pagination a:nth-last-child(1) {
 /* Your styles here*/ }