Today I needed to add pagination to my Danish beta application for handling your accounting called Hurtigmoms. Since I’m developing in Rails it was a logically choice to use “will_paginate” to support pagination.
Our prototype layout is using a Facebook header and so I wanted my pagination control to mimic their style. If you need something similar you might want to take a look at my CSS styles which are using the default class names used by will_paginate.
.pagination {
font-size: 11px;
float: right;
margin: 0;
padding: 3px 0 4px;
}
.pagination a,
.pagination span {
padding: 3px 3px 2px;
}
.pagination .disabled {
background:none repeat scroll 0 0 transparent;
border:medium none;
color:#999999;
cursor:default;
}
.pagination a {
color:#3B5998;
cursor:pointer;
text-decoration:none;
}
.pagination a:hover {
background-color:#3B5998;
border-bottom:1px solid #3B5998;
border-color:#D8DFEA #D8DFEA #3B5998;
color:#FFFFFF;
text-decoration:none;
}
.pagination .current {}
.pagination .current {
border-bottom:2px solid #3B5998;
border-color:#3B5998;
color:#3B5998;
font-weight:bold;
padding-left:2px;
padding-right:2px;
}
.pagination .current a:hover {
background-color:#3B5998;
color:#FFFFFF;
}
.pagination .prev_page {
}
.pagination .next_page {
}
Just copy and paste it into your application css file and you’re done.
This is how it looks:
