I’ve spent the last few hours investigating how to style the out produced by cakes $paginator helper.
I managed to get a digg style output for my pagination by styling the output produced by default, but because of the number of divs and spans that had to be floated i thought that it would be much easier to style if it were a list.
The default output generated by the Bake scaffolding looks something like this

and the html like
<div class="paging">
<div class="disabled"><< previous</div>
<span class="current">1
</span> |
<span><a href="/cakephp/cms/admin/blog/posts/index/page:2">2
</a></span> |
<span><a href="/cakephp/cms/admin/blog/posts/index/page:3">3
</a></span>
<a href="/cakephp/cms/admin/blog/posts/index/page:2">next >>
</a>
</div>
This can be quite easily changed to a list output by using the $options parameter of the $paginator->numbers() function.
In your views where you are using pagination find the call to the $paginator->numbers() function. On my 1.2.6 version of CakePHP it looks like this
Change this to the following
prev(‘<<’.__
(‘previous’, true), array(), null, array(‘class’=>‘disabled’));?>
numbers
();?>
next(__
(‘next’, true).‘ >>’, array(), null, array(‘class’ => ‘disabled’));?>
This will then produce output similar to this (it depends what page your on)
<div class="paging">
<a href="/cakephp/cms/blog/posts/index/page:1"><< previous</a>
<ul class="pagination">
<li><a href="/cakephp/cms/blog/posts/index/page:1">1
</a></li>
<li class="current">2
</li>
<li><a href="/cakephp/cms/blog/posts/index/page:3">3
</a></li>
</ul>
<a href="/cakephp/cms/blog/posts/index/page:3">next >>
</a>
</div>
To style this digg-stylee you can use the following CSS, just add it to your apps main CSS file.
div.paging a{
border:solid 1px #9aafe5;
margin-right:2px;
display:block;
float:left;
padding:3px 4px;
}
ul.pagination li{
border:0; margin:0; padding:0;
font-size:11px;
list-style:none;
margin-right:2px;
}
ul.pagination a{
border:solid 1px #9aafe5;
margin-right:2px;
display:block;
}
div.paging div.disabled {
border:solid 1px #DEDEDE;
color:#888888;
display:block;
float:left;
font-weight:bold;
margin-right:2px;
padding:3px 4px;
}
ul.pagination .next a,
ul.pagination .previous a {
font-weight:bold;
}
ul.pagination .current{
background:#2e6ab1;
color:#FFFFFF;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
ul.pagination a:link,
ul.pagination a:visited {
color:#0e509e;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
ul.pagination a:hover{
border:solid 1px #0e509e
}
You should then have something that looks like this

And thats it!
Any trouble, leave a comment and we’ll try and sort it out.
The original CSS code for the Digg style links was taken from this post: http://woork.blogspot.com/2008/03/perfect-pagination-style-using-css.html