Hello,
I’ve been trying to do so like 3 hours now with no luck.
Now the pagination looks like this: http://take.ms/mqqzys (standard newspaper pagination).
So I would like to change it to something like this: http://take.ms/ygSOY
So I have no problems styling everything but I just can’t find the files where I should change everything!
I know that I could re-style something in the “Custom CSS” section but what about changing the Arrow Icon into “Next Post”? And what about centering the pagination?
Thanks in advance.
Hi FrozenGod,
Please try this to use next/prev pagination on posts by adding this parameter:'next_or_number' => 'next', here: http://screencast.com/t/hkqJljKyxr3 and remove this code: http://screencast.com/t/87kGUcin5YQN – result: http://screencast.com/t/8THEIGR5 Also you can style this buttons as you like using this classes: .page-nav .page-nav-post
Hope this helps and let us know how it goes!
Thank you!
Hey Catalin,
Thank you very much for your help but this is not exactly what I wanted to do.
Anyway I just found where to change the >< Icons into text (thanks to you) but now I’m having some trouble styling it.
I have moved the pagination with margin-left: 15%; in order to center it (not sure it’s the right way but it looks cool at least on desktop).
Now I want to take control over the numbers and the button separately, now it looks this way: http://take.ms/dwPjF, but I would like it to look this way: http://take.ms/ygSOY.
How can I take control and style the numbers and the buttons separately?
Thanks!
Hi FrozenGod,
You can try the code below if you want to give some style to your post pagination. Place the code in your Theme panel->Custom Css area, like this: http://screencast.com/t/KUAvmUAqtv
First of all, you have to create a class for Prev/Next pagination like this: http://screencast.com/t/sbIiL1GEIf
.next {
width: 70px;
height: 70px;
background-image: url("http://blafi.com/blafibutton.jpg");
background-size: 70px;
background-repeat: no-repeat;
vertical-align: middle;
color:black;
font-size:13px;
font-weight:bold;
}
.prev {
width: 70px;
height: 70px;
background-image: url("https://pixabay.com/static/uploads/photo/2014/04/02/10/55/arrow-304924_960_720.png");
background-size: 70px;
background-repeat: no-repeat;
vertical-align: middle;
color:black;
font-size:13px;
font-weight:bold;
}
The result you should see here: http://screencast.com/t/qHypUmv7BF .
Above, I have tried to show you an example how to give a style for your pagination button. Also, you can adjust the values as you wish until you achieve what you want. If you do not aware the steps you will follow, please consider to hire a developer/freelancer to do this thing for you, because this feature required custom work and we do not provide this for the moment, sorry!
I hope this helps and let us know how it goes!
Thank you!
