[Resolved] Next Previous Post like Hueman Themes

[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

[Tom]

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?

[Feri]

hi…

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

yes, at the bottom of the post…

[Tom]

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;
}

[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

[Tom]

I just made a change, can you try it now?: https://generatepress.com/forums/topic/next-previous-post-like-hueman-themes/#post-676814

[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;
}

[Tom]

Yep, there shouldn’t be any issue with that 🙂

[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.

[David]

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;
}

[Feri]

Hi David,

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

thank you so much, david.

[David]

thats great. 🙂 Glad we could help

[Author]

Posts