[Support request] How to change Page Numbering Text to Button Text

[Fajri]

Hi, How to change Page Numbering Text to Button Text?

my site : https://koneksia.com

[Leo]

Hi there,

Something like this?

.page-numbers {
    border: 1px solid #000;
    padding: 5px;
}

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

[Fajri]

No, i mean like site library style.

Like this : https://prnt.sc/qqkeyq
my site : https://ngetricks.com

[Amit]

I want to add the blue colour inside the buttons and shadow outside the buttons and text in white colour. How can I do that??

[David]

Hi there,

you can use this CSS for styling your Pages Nav:

/* Center Navigation */
#nav-below {
    text-align: center;
}

/* Page Number styling */
#nav-below .page-numbers:not(.dots) {
    background-color: #fff; 
    color: #000;
    border: 1px solid #000;
    padding: 5px 15px;
    box-sizing: border-box;
    line-height: 30px;
    text-align: center;
}

/* Change current and hover colors */
#nav-below .page-numbers:not(.dots):hover,
#nav-below .page-numbers.current {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
}

/* increase width of dots.... */
#nav-below .page-numbers.dots {
    display: inline-block;
    min-width: 40px;
}

Simply adjust the Background, color and border colors to suit your needs.

[Amit]

So the final code is

.page-numbers {
border: 1px solid #000;
padding: 5px;
}

/* Center Navigation */
#nav-below {
text-align: center;
}

/* Page Number styling */
#nav-below .page-numbers:not(.dots) {
background-color: #fff;
color: #000;
border: 1px solid #000;
padding: 5px 15px;
box-sizing: border-box;
line-height: 30px;
text-align: center;
}

/* Change current and hover colors */
#nav-below .page-numbers:not(.dots):hover,
#nav-below .page-numbers.current {
background-color: #333;
color: #fff;
border: 1px solid #333;
}

/* increase width of dots…. */
#nav-below .page-numbers.dots {
display: inline-block;
min-width: 40px;
}

[David]

Just the code provided here:

https://generatepress.com/forums/topic/how-to-change-page-numbering-text-to-button-text/#post-1138971

[Amit]

Hey,
1. colour codes are 6 digits but use 3 digit codes here. I am a little confused. Would you please clear this?

2. I want to use Blue as a selected navigation colour instead of Black. Give me that code.

[David]

1. Example: #333 = #333333 or #fff = #ffffff

2. In this part of the code you change the line i have commented:

/* Change current and hover colors */
#nav-below .page-numbers:not(.dots):hover,
#nav-below .page-numbers.current {
    background-color: #333; /* Change this hex code */
    color: #fff;
    border: 1px solid #333;
}

[Alexandru]

Hi, David,

Just used the CSS and the result it’s not quite a success. Please help me with this one. Example here: http://suntcalm.com/niste-durere/

[Tom]

Hi there,

This topic is for the archive pages number, not the single posts.

Can you open a new topic and include an example of what you’re trying to achieve?

Thanks!

[Author]

Posts