Change Prev/Next Pagination Button Text

[Bladehawk]

Hello,

I hope I'm just overlooking something obvious, here. I've figured out how to change the font style of the Prev and Next pagination buttons, but is there any way to change the text itself? ?/? would be nice, or maybe replacing the text with images of arrows.

Thanks.

[Brian]

Hi, Bladehawk.

Add this to Structure > Headers & Footers > Global Header.

<script type="text/javascript">
$(document).ready(function(){
$('.ui-pagination-prev a').html('?');
$('.ui-pagination-next a').html('?');
});
</script>

[Bladehawk]

Excellent Brian! Thanks.

[Bladehawk]

Hmm... well, it WAS working, but now I notice that when I try to use the Next button, the arrow character is appended to the URL in place of the page number. I added a plugin since it last worked, but don't think that should've affected it. When I use the prev button, it goes to the first page of the thread, but still appends the left-facing arrow to the URL.

URL when clicking the Page 2 button:
godwarsx.proboards.com/thread/24/god-wars-test?page=2

URL when clicking the Next button from Page 1 as it appears in my address bar:


I'm using Chrome, but can see if the problem happens on other browsers as well. The plugin I added was Forum Tooltips.

[Bladehawk]

Hey, it's marked as resolved but is there any info on this? Not a pressing issue, but still something I'd like to fix haha.

[Chris]

The way Proboards wrote the code for pagination clicks means if it doesn't say "next" or "prev" then it is assumed to be a number and used in the url. You can probably get it done with pure CSS however

.ui-pagination-page.ui-pagination-prev a,.ui-pagination-page.ui-pagination-next a{
width:0;
height:0;
overflow:hidden;
padding:0!important;
}
.ui-pagination-next:after {content:'?';font-size:1.8em;}
.ui-pagination-prev:before {content:'?';font-size:1.8em;}


Still might need some tweaking but that should get you started and if you want to use images instead then replace the arrow symbols with url(IMAGE_URL_HERE)