Archived topic
Ugly Out Of Order Pagination ?
5 replies · Started by David on April 27, 2019
Hi,
I'm looking to replace the standard wordpress post pagination, it's just a bit ugly looking lol .... anyone know of any free or paid plug-ins to make it look nice - and work correct? I understand it probably is not a theme issue.
I'm even open to removing them, and just listing random posts with a nice lay-out...
Screen shot: https://cl.ly/453ec10e7ce0
Thanks!
Dave
Hi there,
Any examples of what you want it to look like?
I'm not sure of any plugins that adjust the single post pagination, unfortunately.
Hi,
How about all on 1 line, with option to truncate after certain amount of letters? (... = truncate replacement).
Example:
<- Man Has Been To Jail 97 Times... -> Celebrity Mug Shots
Option for font size and color as well please ?
thanks,
Dave
Give this CSS a shot:
.post-navigation {
display: flex;
}
.nav-previous {
margin-right: auto;
}
.post-navigation .prev,
.post-navigation .next {
max-width: 200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
}
.nav-next:after {
font-family: GeneratePress;
content: "\f105";
text-decoration: inherit;
position: relative;
margin-right: .6em;
width: 13px;
text-align: center;
display: inline-block;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
speak: none;
top: -5px;
}
.nav-next .next:before {
display: none;
}
For font size and colors, try this:
.post-navigation {
font-size: 20px;
}
.post-navigation a {
color: red;
}
.post-navigation a:hover {
color: blue;
}
Thanks!
Much better... I'll have to play with it mobile a bit, or figure out another solution for mobile.
Great job :)
Dave
Thanks! Glad I could help :)