Archived topic

Previous and next page text customization

5 replies · Started by Rohan Verma on June 6, 2022

Viewing posts 1–6 of 6

June 6, 2022 at 9:11 am #2245282

Hello,
Currently, I am showing the next page and the previous page and disabled the numbers in between. But Next and the previous text are very close to each other. I want the Previous to be far left and the next text to be far-right.

June 6, 2022 at 2:37 pm #2245484

Hi there,

Give this CSS a shot:

.wpsp-load-more {
    display: flex;
    justify-content: space-between;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

June 6, 2022 at 11:24 pm #2245704

Great, it worked. How to underline the Next and previous text?

June 6, 2022 at 11:34 pm #2245712

Hi Rohan,

Here’s a CSS you may try adding:

.wpsp-load-more a.next.page-numbers, .wpsp-load-more a.prev.page-numbers {
    text-decoration: underline;
}

Alternative if you want something bigger:

.wpsp-load-more a.next.page-numbers, .wpsp-load-more a.prev.page-numbers {
    position:relative;
}

.wpsp-load-more a.next.page-numbers:after, .wpsp-load-more a.prev.page-numbers:after {
    content:"";
    position: absolute;
    width: 100%;
    background-color: var(--global-color-10);
    height: 3px;
    bottom: 0;
    left: 0;
    z-index:1000;
}

Hope this helps!

June 7, 2022 at 12:03 am #2245722

Awesome team.
Thanks for guiding. I have used the following CSS and it worked like a charm. Just changed the underline to dotted.

.wpsp-load-more a.next.page-numbers, .wpsp-load-more a.prev.page-numbers, .nav-links a.next.page-numbers, .nav-links a.prev.page-numbers {
text-decoration: none;
border-bottom: 2.5px dotted #fff;}
}

Thanks again :)

June 7, 2022 at 12:06 am #2245725

You’re welcome Rohan! :)

This archived topic is closed to new replies.

Start building better websites today.