I know that by writing :
: <!–nextpage–>
I can create a next page pagination, but will you please help me to customize it a little. May be like this:
I am sure, it won’t need big lines of code for a developer but for me , it’s a big thing.
If not TagDiv team, then any coder from community members please.
Thank you in advance.
Unfortunately the pagination for the nextpage tag is a numbered pagination.
Here is a starter css:
.single-post .td-icon-menu-right:before{
content: 'Next Page'!important;
}
.single-post .td-icon-menu-left:before{
content: 'Previous Page'!important;
}
It will change the left and right arrows to next page and previous page but you will have to change the wordpress pagination functionality for this. You can find online resources that will provide some coding methods to alter the post pagination. alternatively there could be a oplugin for it.
I hope this helps a bit.
Thanks
Hey Bogdan.
Thasnk you for the response. I totally understood what you say. For now, I tried impleting your css and it does change the left and right arrows to next page and previous page. But the font-size of this text is very small. Have a look here:
I also need to inform you that with the following code, I have already increased the size of these pagination numbers bigger:
.page-nav a, .page-nav span, .page-nav:first-child > div{
font-size: 25px;
min-width: 50px;
line-height: 40px;
}
Now, how can I make the font-size of the text “Previous Page” and “next page” equal to the size of the pagination numbers?
Also, if I can color the box of “previous page” and “next page” with the color as shown with number-2 box ( orange color box), it will solve my current needs to a great extent,’
Please help me achieve these few customisations. Thank you very much.
Sure.
To increase the font you can simply add a font-size to the code i provided above. I added the colors as well. Pleae replace the code I previously provided with this one:
.single-post .td-icon-menu-right:before{
content: 'Next Page'!important;
font-size:20px;
}
.single-post .td-icon-menu-left:before{
content: 'Previous Page'!important;
font-size:20px;
}
.page-nav-post a:first-child, .page-nav-post a:last-child{
background-color:lightgrey!important
}
And here is the result: http://screencast.com/t/3zIIWNAWo7t
You can change the values for the font size and the color to your preference of course.
Thank you!
Hi,
You can simply add color:white to this code from your custom css box:
.page-nav-post a:first-child, .page-nav-post a:last-child{
background-color:lightgrey!important;
color:white!important;
}</code
Thanks.
Thank you Bogdan.
It worked perfectly well 🙂
But sorry to inform, probably it causes one separate error 🙂 . Please look here: https://i.imgur.com/PfKKvRm.png
The previous and next page of “related post” also get effected in bad way. Now we have two options:
1. Either exclude this customization to effect related post’s previous/next page button
2. To change the pagination style of relation post to “load more” or “infinite loading”
Please help on this.
Thank you.
Not a big issue,
We just have to add an extra class so it will only affect the post pagination. The css is not specific enough. Here is a more specific version:
.single-post .page-nav-post .td-icon-menu-right:before{
content: 'Next Page'!important;
font-size:20px;
}
.single-post .page-nav-post .td-icon-menu-left:before{
content: 'Previous Page'!important;
font-size:20px;
}
Thanks.
Amazing.
Live long.
Thank you 🙂
