Site logo

Archived topic

Ugly Out Of Order Pagination ?

5 replies · Started by David on April 27, 2019

Viewing posts 1–6 of 6

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 :)

This archived topic is closed to new replies.