[Support request] pagination

Home Forums Support pagination

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1079115
    sanu kumar

    How to make pagination like this website

    #1079924
    David
    Staff
    Customer Support

    Hi there,

    try something like this:

    /* Center Navigation */
    #nav-below {
        text-align: center;
    }
    
    /* Add radius and background to page numbers */
    #nav-below .page-numbers:not(.dots) {
        background-color: #ddd;
        color: #000;
        display: inline-block;
        width: 30px;
        line-height: 30px;
        text-align: center;
        border-radius: 20px;
    
    }
    
    /* Change current and hover colors */
    #nav-below .page-numbers:not(.dots):hover,
    #nav-below .page-numbers.current {
        background-color: #00FF;
        color: #fff;
    }
    
    /* increase width of dots.... */
    #nav-below .page-numbers.dots {
        display: inline-block;
        width: 40px;
    }
    
    /* remove previous and next links */
    #nav-below .page-numbers.next,
    #nav-below .page-numbers.prev {
        display: none;
    }
    #1093303
    sanu kumar

    I am using pagination on my blog…could u tell me what CSS should I remove so that I can add CSS given above.
    I am not a technical guy and having lots of problems with coding.

    #1093524
    Leo
    Staff
    Customer Support

    Not quite sure if I understand.

    Can you link me to the page in question with David’s code added?

    #1093874
    sanu kumar

    This is my blog and I am already using pagination like this.

    URL: https://www.masteryblogging.com/

    But I want this type of pagination for my blog.

    So David’s provided me the code :

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

    /* Add radius and background to page numbers */
    #nav-below .page-numbers:not(.dots) {
    background-color: #ddd;
    color: #000;
    display: inline-block;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 20px;

    }

    /* Change current and hover colors */
    #nav-below .page-numbers:not(.dots):hover,
    #nav-below .page-numbers.current {
    background-color: #00FF;
    color: #fff;
    }

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

    /* remove previous and next links */
    #nav-below .page-numbers.next,
    #nav-below .page-numbers.prev {
    display: none;
    }

    I am adding this CSS to my blog but it is not working…It looks like the same before.

    So should I remove the previous CSS and then add David’s code????

    But I don’t know what is the previous code, my additional CSS box is mixed up with various CSS so could you tell me which one should I remove from there.

    #1093884
    Leo
    Staff
    Customer Support

    Can you guide me to where I can see the pagination that you are referring to?

    I need to make sure it’s actually coming from GP and not Elementor.

    Let me know 🙂

    #1093892
    sanu kumar
    #1093900
    Leo
    Staff
    Customer Support

    Yup it is coming from Elementor so David’s code won’t work:
    https://www.screencast.com/t/tQM1xXLgx

    You will need to check with Elementor’s support.

    Please understand that our support forum is only for GP related questions and we cannot provide support for another plugin:
    https://www.screencast.com/t/ElkYpJ55

    Thanks for your understanding.

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