Archived topic
Pagination Style change
7 replies · Started by Jatin on December 23, 2021
Viewing posts 1–8 of 8
Hi GP Team,
I want to change the default pagination style to the one used on the bottom of the https://docs.microsoft.com/en-us/answers/index.html page.
Please let me know if there is any custom css i can use to acheive the results. Provided my site in the Private Information box.
Hi there,
can you remove any custom CSS you have added so far - then i can see what we can do.
Removed.
Can you clear any plugin/server caches ? as i can still see some custom styles on there.
Cache Cleared. Check using Incognito Mode.
Try this CSS:
/* Center the pagination nav links */
.paging-navigation .nav-links {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Add padding to prev and next links */
.paging-navigation .nav-links .prev,
.paging-navigation .nav-links .next {
padding: 0 15px;
}
/* Style nav links */
.paging-navigation .nav-links a.page-numbers,
.paging-navigation .nav-links .current {
line-height: 36px;
min-width: 36px;
margin: 0 4px;
text-align: center;
border-radius: 4px;
text-decoration: none;
color: #000;
border: 1px solid #ccc;
}
/* Style Current link */
.paging-navigation .nav-links .current {
background-color: #00f;
color: #fff;
}
/* Style Nav link hover */
.paging-navigation .nav-links a.page-numbers:hover {
border-color: #00f;
}Thanks David.
You're welcome
This archived topic is closed to new replies.
