[Resolved] Turn next and previous post links to theme buttons?

Home Forums Support Turn next and previous post links to theme buttons?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1450229
    James

    Hey guys,

    I am using the latest GP premium and the the Read theme, I am wanting the next post and previous post text links to be buttons. Please can somebody assist me?

    Thanks

    #1450339
    Augustine

    Hi, To turn next and previous post links to buttons go to your Theme Customizer >> Layout >> Blog.

    Next and Previous Post Link to Button

    Should incase you’re still having issues do let me know and i’ll be happy to assist.

    Whatever is worth doing, is worth doing with perfection

    #1450374
    James

    Hey,

    Thanks for the fast reply, however that just changes the read more option to a button. I’m looking to change the post navigation text links seen in this screenshot below.

    post nav text link

    Thanks

    #1450401
    David
    Staff
    Customer Support

    Hi there,

    do you have an example of the style you want to achieve ?

    #1450714
    James

    I was thinking something that just stands out more like in the screen below.

    View post on imgur.com

    Not overly fussy on the end result, just think the current text links are very blended in. I’d be happy to use the theme buttons style, but I dont know how to convert the text link to a button link, so appreciate any help provided! πŸ™‚

    Thank you!

    #1450894
    David
    Staff
    Customer Support

    Try this CSS:

    #nav-below {
        margin-top: 10px;
    }
    
    .nav-previous,
    .nav-next {
        position: relative;
        margin-top: 10px;
    }
    #nav-below .nav-previous a,
    #nav-below .nav-next a {
        display: block;
        padding: 20px 40px;
        background-color: #ff0000;
        color: #fff;
    }
    #nav-below .nav-previous a:hover,
    #nav-below .nav-next a:hover {
        background-color: #565656;
    }
    .nav-previous .gp-icon,
    .nav-next .gp-icon {
        position: absolute;
        top: calc(50% - 15px);
        left: 10px;
        font-size: 20px;
        color: #fff;
    }
    .nav-next .gp-icon {
        left: unset;
        right: 0;
    }
    @media(min-width: 600px) {
        #nav-below {
            display: flex;
            justify-content: space-between;      
        }
        .nav-previous,
        .nav-next {
            max-width: calc(50% - 10px);
        }
    }
    

    Let us know. May want to change its behaviour for mobiles.

    #1450922
    James

    That is perfect! Thank you very much! πŸ™‚

    Just one final thing, you are correct it needs its behavior changing on mobile. At the moment, they are side by side on mobile and the text looks like a long vertical list of words haha. Can we stack them vertically on mobile at all?

    Thank you

    #1450936
    David
    Staff
    Customer Support

    Updated the CSS above.

    #1450939
    James

    Perfect!

    Thank you very much David! Top support as always! <3

    #1451429
    David
    Staff
    Customer Support

    You’re very welcome – glad to be of help.

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