Need Help in Pagination Customization in GeneratePress

Hi there,

i provide some CSS for a similar style here:

https://generatepress.com/forums/topic/i-want-this-type-of-pagination/#post-1045297

You won’t need the first CSS rule ie.

#nav-below {
    padding-left:0
}

Thanks David, This CSS code is working but it does not match with the colour of my website so I changed the HTML colour code so can you please check the below CSS code is ok or not? with any errors.

.nav-links .page-numbers {
    border-radius: 4px;
    min-width: 2.5em;
    line-height: 1.8em;
    padding: 5px 15px;
    box-sizing: border-box;
    display: inline-block;
    text-align:center
}

.nav-links .page-numbers {
    background-color: #F47555;
    color: #ffffff !important;
}
.nav-links .page-numbers.current {
    background-color: #F47555;
}

• This reply was modified 5 years, 4 months ago by Shivam Pandey.

I mean to say that the above CSS code is ok or not? Without any errors.

Only one thing which was in my code ( thx for pointing it out – this line:

text-align:center

change to:

text-align: center;

Although it would still work its bad CSS.

Is the below CSS code correct?

.nav-links .page-numbers {
    border-radius: 4px;
    min-width: 2.5em;
    line-height: 1.8em;
    padding: 5px 15px;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
}

.nav-links .page-numbers {
    background-color: #F47555;
    color: #ffffff !important;
}
.nav-links .page-numbers.current {
    background-color: #F47555;
}

Looks good to me.

You can always use this site to validate your CSS:
https://jigsaw.w3.org/css-validator/