[Support request] pagination

[Sanu Kumar]

How to make pagination like this website

[David]

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

[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.

[Leo]

Not quite sure if I understand.

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

[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.

[Leo]

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 🙂

[Sanu Kumar]

https://masterblogging.com/blog/

[Leo]

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.

[Author]

Posts