I want modify the pagination buttons

Hi there,

you can try adding this CSS:

#nav-below .nav-links > *:not(.dots) {
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 0 10px;
    line-height: 40px;
    min-width: 40px;
    border-radius: 6px;
    background-color: #f00;
    color: #000;
}
#nav-below .nav-links > *:not(.dots):hover,
#nav-below .nav-links .current {
    background-color: #00f;
    color: #fff;
}

And if you want to change the length of the page numbers displayed. You can add this PHP Snippet:

add_filter( 'generate_pagination_mid_size','tu_increase_pagination_numbers' );
function tu_increase_pagination_numbers() {
    return 3;
}

Increase the 3 to show more numbers.

Thank you for the quick response to my question

But I want to make the buttons in the center
And I want to remove the dots between the numbers as shown in the picture
https://imghostr.com/b638b8_l7w

Add this CSS to center it:

.nav-links {
    text-align: center;
}

To remove the dots - in the PHP Snippet i provided simply return a really high value eg. 999
However you need to consider whether there is enough room for all the page numbers to be displayed.

Thank You

The value cannot be raised to this number

I mean, I want the numbers to show up, say 1 2 3, and then the next
When you click next, 2 3 4 appears, 1 disappears, and so on
I hope you understand what I mean

Bearing in mind that the dots disappear

GP uses the core the_posts_pagination function to display the nav, and that is not an option.
You can only define Start, End and Mid size values and whether to display the Next and Previous pages.

It's sad that I can't remove these points while still keeping the counter clean

Yeah its a pity WP didn't add it.
Its a bit of a hack, but you could try adding this CSS:

#nav-below .page-numbers:not(:is(.next,.prev)) {
	display: none;
}
#nav-below .page-numbers.current,
#nav-below .page-numbers.current+*,
#nav-below .page-numbers.current+*+*{
	display: inline-block;
}

It will hide any number except for the current number and the 2 numbers that come after it.

Very cool, the problem has been solved

Is it possible to apply these previous codes to other pages?
Meaning on all pages of the site that have pagination

Such as not applied to the attached page

Try changing it to:

:is(#nav-below, .gb-query-loop-pagination) .page-numbers:not(:is(.next,.prev)) {
	display: none;
}
:is(#nav-below, .gb-query-loop-pagination) .page-numbers[class*="current"],
:is(#nav-below, .gb-query-loop-pagination) .page-numbers[class*="current"]+*,
:is(#nav-below, .gb-query-loop-pagination) .page-numbers[class*="current"]+*+*{
	display: inline-block;
}

Really cool this worked

But it seems that the numbers are not in separate boxes like the blog page

If you edit the Query Loop -> Paginiation block, select each of the buttons ( next, numbers, prev ) and in the Spacing settings add some left or right margin. This will add the space.

Thank You David

You're welcome