Pagination Buttons

Hi,

I just followed the instructions on this thread

https://forum.tagdiv.com/topic/urgen-replacing-number-pagination-with-nextprev-buttons/

And was able to get the desired effect. However, I would like to make some CSS changes and I am not sure how.

1 – I like to make the button color black with white bold lettering.
2- I also would like to make the previous button align to the left and the next button to the right.
3- Is there a way to keep the original icon and add the word next and previous?

http://www.screencast.com/t/LarIQoneVj3O

4 – How do I move the pagination buttons above the article bottom ad?
5 – The article bottom ad appears to have a huge space between the pagination button and the ad itself?

http://www.screencast.com/t/UuuM04ziT

Here is a link to the page: http://goo.gl/Na6HX9

• This topic was modified 10 years by elvinf.

Hi

!. I am not sure what effect you want to obtain, please provide more specific details or an image pointing that effect.
2. Try this custom css in theme panel > custom css: http://screencast.com/t/KOlwsSjl

.page-nav-post a:last-child{
float: right;
}

3. Try this custom css: http://screencast.com/t/Bzfbw5YLr3Z

.td-icon-menu-right:before {
position: relative;
top: -4px;
left: 4px;
float: right;
}

.td-icon-menu-left:before {
position: relative;
right: 4px;
}

4. To display the pagination above the article button add you need to remove the the ad from post content: http://screencast.com/t/PWgzx852 then place the ad after the pagination function in posts’s template file, like this: http://screencast.com/t/pgCbyqSPF You can use the do_shortcode(' ') function and insert the ad shortcode from VC: http://screencast.com/t/W4SFKPnoShn – http://screencast.com/t/lqaJxdVdMee in every post template files coresponding for the post templetes used.

5. I found an image below your article bottom ad which create that blank space http://screencast.com/t/5RAdn7ht07Z I am not sure why appear there, but seems to be added by the above ads so you should check if the ad code it’s valid.

Thanks!

Hi Andrei,

#3 – Looks like it changes the pagination buttons all through out the site. For example: On the related articles and the ticker buttons on the homepage. Is there a way to only change the buttons in the paginated article.

What I would like to do is make the buttons bigger and change its color.

Hi

Replace the previous css with this one (just the one from point 3):

.page-nav-post .td-icon-menu-right:before {
position: relative;
top: -4px;
left: 4px;
float: right;
}

.page-nav-post .td-icon-menu-left:before {
position: relative;
right: 4px;
}

Let me know how it goes.

Thanks!