How to change text and style of next and previous page buttons

[Ravi Dixit]

Hey !
I want to change the style of next and previous page buttons.
In the first page i want to display a full width button. Something like this. https://prnt.sc/rzkhkr

And in the page 2 i want to display two half width buttons. Like this https://prnt.sc/rzkge2

How can i make it possible?
Thanks you..

[David]

Hi there,

you will need to remove this:

.next.page-numbers {
    display: block;
    background-color: blue;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    width: 40%;
}

.nav-links {
    display: block;
    background-color: blue;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    width: 40%;
}

And add this:

.nav-links .page-numbers {
    display: block;
    background-color: blue;
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    flex: 1 0 calc(50% - 5px);
    box-sizing: border-box;
}
.nav-links {
    display: flex;
    
}
.next.page-numbers {
    margin-left: 5px;
}
.prev.page-numbers {
    margin-right: 5px;
}

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

[Ravi Dixit]

Thanks man it works as expected.

[David]

You’re welcome

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

[Author]

Posts