Style Pagination Links with CSS

Posted on 03 Nov 2010, 22:43:35

Access: Member
Total Posts: 8
Joined: 2010-04-06

Hey what's up Chris, I feel like I have a stupid question but I've tried everything and can't get it to work...

So I'm pretty familiar with the templates, and how to customize them with CSS. I've done a fair amount of changing fonts, colors, adding some background images, etc.

The problem I've stumbled upon are the pagination links (< 1 2 3 >).

I threw a quick <a> tag around the {pages} and it's only styling the non-active links (the page you're viewing). All the links (2 3 >) aren't getting styled at all...

I also tried creating a span around the {pages} but with the same result.

Here's my latest attempts:

Code:


 
<span style="font:Arial, Helvetica, sans-serif; font-size:14px; color: #000000">[prev-link]<[/prev-link]  <a class="body_link">{pages}</a>  [next-link]>[/next-link]</span>

So how do I style the pagination links themselves?

Ryan

#3009

Last edited by Gallion311 at 2010-11-03 22:43:59 Reason:

Chris

Posted on 05 Nov 2010, 02:54:27

Access: Admin
Total Posts: 1395
Joined: 2006-05-19

This is something I've been meaning to do something about for a while now but kept overlooking then forgetting about it.

I've made some changes to the functions.php file, if you grab a copy of the new file here

http://n-13news.googlecode.com/svn-history/r419/trunk/functions.php

and replace your own copy with this new one. Hyperlinks/text within pagintation now get a class assigned to them so that you can style them easier, for example if your pagintation looked like this

Code:


< 1 2 3

And you were currently viewing page 2, it would output like so

Code:


<a href="?page=1" class="n13_pages_prevlink">&lt;</a>
<a href="?page=1" class="n13_pages_nonactive">1</a>
<span class="n13_pages_active">2</span>
<a href="?page=3" class="n13_pages_nonactive">3</a>

#3011