[Resolved] Ugly Out Of Order Pagination ?

Home Forums Support Ugly Out Of Order Pagination ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #881726
    David

    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

    GeneratePress 2.2.2
    #881766
    Tom
    Lead Developer
    Lead Developer

    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.

    #881818
    David

    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

    #882343
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #882360
    David

    Thanks!

    Much better… I’ll have to play with it mobile a bit, or figure out another solution for mobile.

    Great job πŸ™‚

    Dave

    #882567
    Tom
    Lead Developer
    Lead Developer

    Thanks! Glad I could help πŸ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.