[Resolved] Bottom of Post Pagination

[Janine]

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!

[Janine]

Something like this:

<< Article Name >> Article Name

[Tom]

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

[Janine]

Hi, Tom.

It did everything except add a bit of space before and under the metadata. Thank you.

[Leo]

Try:

footer.entry-meta {
    margin-top: 20px;
    margin-bottom: 20px;
}

[Janine]

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!

[Leo]

so basically more space below the category?

.single .cat-links {
    margin-bottom: 15px;
}

[Janine]

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.

[Leo]

Edited the code above.

[Janine]

Thanks, Leo. It looks good.

[Janine]

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!

[Janine]

Or maybe, we could leave it where it is and have long post names wrap?

[Tom]

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;

[Janine]

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.

[Tom]

Can you generate a new URL?

2.1 isn’t out yet, but you’ll want to update that CSS once it is released.

[Author]

Posts