will_paginate example CSS

Posted: 2 years ago (2009-06-25 22:20:38 UTC )

I've just added to my site's CSS file (yes, just one so far) to support will_paginate. I wrote it so that by default it applies to anything I output with will_paginate, though it would be easy to change the "DIV.paginate" selector to something like "#posts_paginate" so that it's specifically that one.

Here are the important bits I added:

That gives formatting for the whole page block (the first section, just DIV.pagination), and then separate sub-sections for the next_page and prev_page links, and for links within the pager. Normally only the ellipsis (...) within the pager will be the inherited DIV color. Links like the page numbers will usually inherit from the rest of the page, so be sure to override them if you want their color to change.

The ".disabled" block is for the next_page and prev_page links when they're disabled. You could do them individually with a ".next_page.disabled" or ".prev_page.disabled" block, but I'm fine with them being the same.

The ".current" block is for the current page, which I highlight in slightly unsaturated red here. And that's why I'm a programmer, not a graphic designer :-)