Pagination positioning

[riugn557]

Hi there,

On this page https://thelanguagesherpa.com/russian-guide/ I have added pagination.

However, as you can see, the numeral links are almost completely obscured by the red ad banner which is generated in the footer. Do you know how I can move the pagination numerals so they are both centred on the page and further up, between the red ad and the last bit of content?

I tried playing with the section’s margins/padding, but that didn’t seem to help…

Thank you!
LS

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.page-links {
    text-align: center;
}

There is an empty section at the end of the page, please delete it.

Let us know how it goes!

[riugn557]

Hi Thai,

That’s great, thank you.

Incidentally, do you know how I could change the numeral links from ‘1, 2, 3’ to ‘Beginners, Intermediate, Advanced’? Also would it be possible to make the text larger?

Thank you,
LS

[Prasant]

Hello @riugn557,

Thanks for updating the thread.

Unfortunately, changing pagination links from numbers to Wordings will fall outside the scope of support we can offer as it will require quite a bit of custom development.

However, to change the font size you can add following CSS under Pro > Theme Options > CSS:

.page-links a {
    font-size: 22px;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

[riugn557]

Hi Prasant,

OK, no problem.

In that case, would you be able to tell me how I can keep the pagination in place, but hide the numerical links?

Thank you,
LS

[Prasant]

Hello @riugn557,

Thanks for updating the thread.

I am not quite sure what you mean keep the pagination in place, but hide the numerical links, can you please elaborate? Please try adding following CSS under Pro > Theme Options > CSS and see if that’s what you are looking for.

.page-links a {
    display: none;
}

Thanks.

[riugn557]

Hi Prasant,

Thank you, that worked perfectly,

LS

[ruenel]

You’re welcome!
Thanks for letting us know that it has worked for you.