- This topic has 7 replies, 2 voices, and was last updated 1 year ago by
Leo.
-
AuthorPosts
-
March 23, 2020 at 4:34 am #1207192
Roi
Hello,
Since I’m dealing with an RTL language, I need to change the layout of the in-post navigation.
Also, facing an issue with the placement of the Read More button.1. Desktop – Prev/Next blog post – how can we make it like this? https://imgur.com/a/Xg0MyFS
2. Mobile – Prev/Next blog post – it looks good the way it is, just the top one needs to be Next, and bottom previous. https://imgur.com/a/KiUr6Cl3. Read More button – it’s set to 24 words. On some posts the button is aligned perfectly with the image. On others, it isn’t. How can we force it to be aligned with the image? https://imgur.com/a/UHGo88j
Thanks 🙂
March 23, 2020 at 8:32 am #1207635Leo
StaffCustomer SupportHi there,
1. Give this a shot:
https://generatepress.com/forums/topic/changing-post-navigation-text-to-next-instead-of-title/#post-7375832. Try wrapping the CSS in step one in
@media (min-width: 769px) {
so it’s desktop only:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints3. Any chance you can open a new topic for this one?
Thanks 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 24, 2020 at 8:41 am #1208636Roi
Hi,
1. It didn’t work. I don’t want it to say Next/Previous, rather display the title – only for the right link to be for the previous post, and the left one for the next post, as in this example:
It’s also important for the arrows to be aligned as they’re seen in the image.
2. In mobile view only, all I need is to replace the arrows so it looks like in the “new layout” example: https://imgur.com/a/5Xaov6L
Thanks!
Appreciate the patience and thorough help.March 24, 2020 at 9:39 am #1208694Leo
StaffCustomer Support1. Ahh in your screenshot it says prev and next so I thought that’s what you wanted. In that case this should help:
https://docs.generatepress.com/article/inline-post-navigation/2. Let’s take care of #1 first.
Let me know 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 24, 2020 at 9:56 am #1208724Roi
Hi Leo,
1. I got it to the following state, now we only need to replace the arrow direction.
Also, kindly take a look at the CSS if you find any syntax/order problems. I tweaked it a little…
/* In-Post Navigation Dekstop */ @media (min-width: 769px) { .post-navigation { display: flex; } .post-navigation .nav-next { width: 50%; text-align: left; } .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; } }
March 24, 2020 at 11:15 am #1208797Leo
StaffCustomer SupportTry editing the
content: "\f105";
in your CSS tocontent: "\f104";
Then add this CSS:
.nav-previous .prev:before { content: "\f105"; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 25, 2020 at 3:49 am #1209327Roi
Fantastic!
Thanks. You have a great support.This is the complete CSS for replacing the next/previous post in Desktop, as well as in mobile:
/* In-Post Navigation Dekstop */ @media (min-width: 769px) { .post-navigation { display: flex; } .post-navigation .nav-next { width: 50%; text-align: left; } .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-right: .6em; width: 13px; text-align: center; display: inline-block; content: "\f104"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; speak: none; } .nav-previous .prev:before { content: "\f105"; } } /* In-Post Navigation Mobile */ @media (max-width: 768px) { .nav-previous .prev:before { content: "\f105"; } .post-navigation .nav-next .next:before { content: "\f104"; } }
March 25, 2020 at 9:19 am #1209805Leo
StaffCustomer SupportNo problem 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.