[Resolved] Next Previous Post like Hueman Themes

Home Forums Support [Resolved] Next Previous Post like Hueman Themes

Home Forums Support Next Previous Post like Hueman Themes

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #675886
    Feri

    Hi there,

    i previously using Hueman Themes for my blog. Now, with GP Premium i want to make Next Previous Post Style look like Hueman themes.

    Screenshot: https://prnt.sc/ktrrno

    How to make Next Previous Post (below the post) somethong like that?

    thank you

    GP Premium 1.7.2
    #676474
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It looks like they add this into the sidebar. Are you hoping for the same kind of thing? Or do you want it at the bottom of the post?

    #676645
    Feri

    hi…

    Or do you want it at the bottom of the post?

    yes, at the bottom of the post…

    #676814
    Tom
    Lead Developer
    Lead Developer

    Give something like this a shot:

    .post-navigation {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .post-navigation .nav-next {
        width: 50%;
        text-align: right;
    }
    
    .post-navigation .nav-previous {
        width: 50%;
    }
    
    .post-navigation .nav-next .next:before {
        display: none;
    }
    
    .post-navigation .nav-next .next:after {
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
        content: "\f105";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        speak: none;
    }
    
    .nav-next:before {
        content: "Next Story";
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        padding-right: 20px;
    }
    
    .nav-previous:before {
        content: "Previous Story";
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        padding-left: 20px;
    }
    #676844
    Feri

    yes, it works.

    but is it possible to make like this? https://prnt.sc/ktrrno

    i mean the next previous post “top & bottom” not “right and left”

    thank you

    #676861
    Tom
    Lead Developer
    Lead Developer
    #676865
    Feri

    after comparing the two code, i prefer the first one…

    .post-navigation {
        display: flex;
    }
    
    .post-navigation .nav-next {
        width: 50%;
        text-align: right;
    }
    
    .post-navigation .nav-previous {
        width: 50%;
    }
    
    .post-navigation .nav-next .next:before {
        display: none;
    }
    
    .post-navigation .nav-next .next:after {
        font-family: GeneratePress;
        text-decoration: inherit;
        position: relative;
        margin-left: .6em;
        width: 13px;
        text-align: center;
        display: inline-block;
        content: "\f105";
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        speak: none;
    }
    
    .nav-next:before {
        content: "Next Story";
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        padding-right: 20px;
    }
    
    .nav-previous:before {
        content: "Previous Story";
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        padding-left: 20px;
    }

    one problem again, is it correct if i added text-align: left; for .post-navigation .nav-previous ?

    .post-navigation .nav-next {
        width: 50%;
        text-align: right;
    }
    
    .post-navigation .nav-previous {
        width: 50%;
        text-align: left;
    }
    #677273
    Tom
    Lead Developer
    Lead Developer

    Yep, there shouldn’t be any issue with that ๐Ÿ™‚

    #686348
    Feri

    Hi,

    Sorry, reopen this case.

    I want to move and remove the arrow/angle symbol, 2 alternative.

    1. Alternative #1 Move: i want to move arrow/angle symbol to the Next/Previous Story. Something like this:

    Next Story >
    Post Title

    2. Alternative #2 Remove: i want to completely remove the arrow/angle symbol, just text. Example”

    Next Story
    Post Title

    thanks.

    #686537
    David
    Staff
    Customer Support

    Hi there,

    you can remove the > from the post title with this CSS:

    .nav-previous .prev:before, .post-navigation .nav-next .next:after {
        display: none;
    }

    And if you wish you can add the carrat to the content in the CSS you used above ie,:

    .nav-next:before {
        content: "Next Story >";
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        padding-right: 20px;
    }
    
    .nav-previous:before {
        content: "< Previous Story";
        display: block;
        text-transform: uppercase;
        font-size: 12px;
        padding-left: 20px;
    }
    #686623
    Feri

    Hi David,

    Look like different symbol > and \f105, but no problem it works.

    thank you so much, david.

    #686668
    David
    Staff
    Customer Support

    thats great. ๐Ÿ™‚ Glad we could help

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