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

Home Forums Support How to change Page Numbering Text to Button Text

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1136251
    Fajri

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

    my site : https://koneksia.com

    #1136263
    Leo
    Staff
    Customer Support

    Hi there,

    Something like this?

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

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

    #1138619
    Fajri

    No, i mean like site library style.

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

    #1138632
    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??

    #1138971
    David
    Staff
    Customer Support

    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.

    #1139399
    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;
    }

    #1139550
    David
    Staff
    Customer Support
    #1140519
    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.

    #1140533
    David
    Staff
    Customer Support

    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;
    }
    #1495903
    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/

    #1496175
    Tom
    Lead Developer
    Lead Developer

    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!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.