Site logo

Archived topic

Class: Next Page-Number

29 replies · Started by Janine on January 29, 2018

Viewing posts 1–15 of 30

Hi, guys!

Instead of actual numbers, how can I get directional arrows? Thank you!

But with the numbers inside circles. Thank you!

Hi there,

The picture you linked isn't working. Can you double check?

Just to confirm, do you want "Next" and "Previous" links, or a list of numbers (as in your last screenshot)?

Let me know :)

Hi, Tom.

I think I will try Next and Previous links. Thank you!

If I do Next and Previous links, then, I think it would like a square with the corners of the border rounded (25px). Thank you.

Something like this might do it:

.paging-navigation .nav-links {
    display: none;
}

.paging-navigation .nav-next, 
.paging-navigation .nav-previous,
.post-navigation .nav-next, 
.post-navigation .nav-previous {
    display: block;
    text-transform: capitalize;
}

.paging-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
}

.paging-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
}

.nav-previous .prev, 
.nav-next .next {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    border: 1px solid #ddd;
}

.nav-next .next:before {
    display: none;
}

.nav-next .next:after {
    font-family: FontAwesome;
    padding-left: .6em;
    content: "\f105";
    width: 13px;
}

Let me know :)

Hi, Tom.

It is looking very good. Thank you, so much!

Just one thing: I would like to capitalize the word posts. How can I do that? Thank you!

I just adjusted the CSS above so it capitalizes the words.

Glad I could help! :)

Preferably to match how it is actually presented in the Post Title that I type in when I named the post. Thank you.

I forgot to mention that I would like the previous and next posts to be on the right and left, rather than under each other. Thank you.

This archived topic is closed to new replies.