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

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

  • This topic has 8 replies, 4 voices, and was last updated 8 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 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;
    }
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.