Archived topic
Bottom of Post Pagination
19 replies · Started by Janine on February 11, 2018
Hey, guys.
I would like to modify the default pagination a bit:
How can I move them to opposite sides of the container?
How can I make it double: << and >> instead of just < and >?
And how can I add a bit of space above?
Thank you!
Something like this:
<< Article Name >> Article Name
Hi there,
Give this CSS a try:
.post-navigation .prev {
float: left;
}
.nav-previous .prev:before {
content: "\f104 \f104";
}
.post-navigation .next {
float: right;
}
.nav-next .next:before {
content: "\f105 \f105";
}
Hi, Tom.
It did everything except add a bit of space before and under the metadata. Thank you.
Try:
footer.entry-meta {
margin-top: 20px;
margin-bottom: 20px;
}
Hi, Leo.
That did not work. Place look at this link: http://efc21c12.ngrok.io/ul-ol-post/.
I would like more spacing between the Header Post and Video Post and Core Sewing Skills. Thank you!
so basically more space below the category?
.single .cat-links {
margin-bottom: 15px;
}
Yes, on the post pages only. I don't want it on the Home page. The code above works on the post page, but it is making the home page look funky by placing a space between the category and leave a comment. Thank you.
Edited the code above.
Thanks, Leo. It looks good.
Hi, Leo.
Can I move the >> (Next) to the far right?
Because when the post name is long on my actual site, it looks cramped and maybe confusing.
See demo site: http://efc21c12.ngrok.io/hyperlinks-post/
Thank you!
Or maybe, we could leave it where it is and have long post names wrap?
You can move it like this:
.nav-next .next:before {
display: none;
}
.nav-next .next:after {
font-family: FontAwesome;
content: "\f105 \f105";
padding-left: 10px;
}
In GP 2.1, you'll need to replace font-family: FontAwesome; with font-family: GeneratePress;
Hi, Tom.
I used the CSS you gave me and it worked. But when post titles are long it looks cramped.
I think to simplify this so I can move on is to do this: I like the << >> where they are now--on opposite ends of the container.
How can I center all of it? Thank you!
I'm not sure if the instructions for GP 2.1 apply to me.
Can you generate a new URL?
2.1 isn't out yet, but you'll want to update that CSS once it is released.