Styling pagination and prior/next

Tagged: css

This topic has 5 replies, 2 voices, and was last updated 2 years, 1 month ago by elvin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
August 16, 2021 at 1:58 am #32970

Chris
Participant

Hi there!
Sorry for this really basic question, but I’m trying to make archive pagination and prior/next links in WP Show Posts consistent with WooCommerce.
What I’ve got:

What I’m hoping for:

I figure I can just copy over the WooCommerce styling, but where should I put it?
Thanks!

August 16, 2021 at 8:52 pm #32999

elvin
Moderator

Hi Chris,

Can you link us to the pages in question? So I can inspect the pages and help you out with the CSS writeup to match WooCommerce’s pagination w/ WPSP. 😀

August 16, 2021 at 9:23 pm #33001

Chris
Participant

Thanks Elvin!
Oops! Should’ve given you those links up front. 😅
Here’s the page with WPSP pagination:
https://nishigawakobo.com/category/drypoint-works/
And here’s a page with WooCommerce pagination:
https://nishigawakobo.com/product-category/postcards/
Thanks for having a look!

August 17, 2021 at 11:01 pm #33042
elvin
Moderator
Try adding this CSS:
```
.wpsp-load-more .page-numbers {
    margin: 0;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    font-size: 1em;
    font-weight: 400;
    padding: .5em;
    min-width: 1em;
    display: inline-block;
    text-align: center;
    border-right: 1px solid #d3ced2;
}

.wpsp-load-more {
    border: 1px solid #d3ced2;
    width: fit-content;
    margin: 0 auto;
}
```
August 17, 2021 at 11:10 pm #33044

Chris
Participant

Thanks Elvin!
That’s great! Exactly what I’d been hoping for.
Thanks again,
Chris.

August 18, 2021 at 1:47 am #33051

elvin
Moderator

No problem. Glad to be of any help. 😀
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

[Resolved] Styling pagination and prior/next