Pagination Button for Homepage, Archive Page

[Rohan Verma]

Hi.

I want to get the pagination button look for all archive pages and homepage.

Example Screenshot: https://prnt.sc/u3zu74

Example site: getdroidtips.com

[Leo]

Hi there,

Something like this should help to get you started:

.wpsp-load-more {
    display: flex;
}
.page-numbers:not(.dots) {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
}
.page-numbers.dots {
    align-self: flex-end;
}

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

[Rohan Verma]

1. How can I add the hover color?
2. Can you make it separate buttons? They all are combined.
3. Want to reduce the vertical height as well.

[Leo]

1. Try this:

.page-numbers:not(.dots):hover {
    background-color: #000;
    color: #fff;
}

2. The example you’ve linked looks all combined as well.

Try removing this CSS:

.wpsp-load-more {
    display: flex;
}

3. Modify the padding property in this block of CSS:

.page-numbers:not(.dots) {
    background-color: #000000;
    color: #ffffff;
    padding: 10px;
}

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

[Rohan Verma]

One thing I need to mention that the combined box is only appearing on the homepage.

The same pagination design on the category and tags archive pages look fine.

[Rohan Verma]

Thanks. Working great.

[Leo]

No problem 🙂

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

[Author]

Posts