[Resolved] How to change text and style of next and previous page buttons

Home Forums Support How to change text and style of next and previous page buttons

  • This topic has 3 replies, 2 voices, and was last updated 5 months ago by David.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1239483
    Ravi Dixit

    Hey !
    I want to change the style of next and previous page buttons.
    In the first page i want to display a full width button. Something like this. https://prnt.sc/rzkhkr

    And in the page 2 i want to display two half width buttons. Like this https://prnt.sc/rzkge2

    How can i make it possible?
    Thanks you..

    #1239687
    David
    Staff
    Customer Support

    Hi there,

    you will need to remove this:

    .next.page-numbers {
        display: block;
        background-color: blue;
        color: white;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        width: 40%;
    }
    
    .nav-links {
        display: block;
        background-color: blue;
        color: white;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        width: 40%;
    }

    And add this:

    .nav-links .page-numbers {
        display: block;
        background-color: blue;
        color: white;
        padding: 10px;
        border-radius: 5px;
        text-align: center;
        flex: 1 0 calc(50% - 5px);
        box-sizing: border-box;
    }
    .nav-links {
        display: flex;
        
    }
    .next.page-numbers {
        margin-left: 5px;
    }
    .prev.page-numbers {
        margin-right: 5px;
    }
    #1239877
    Ravi Dixit

    Thanks man it works as expected.

    #1239888
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.