CSS Styled Pagination links in CakePHP « It's Not A Bug, It's A Feature

27Oct/090

CSS Styled Pagination links in CakePHP

Digg-like pagination for the CakePHP pagination links.
Here is some easy css to make your CakePHP pagination links look like the Digg style page navigation with only a few lines of code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

.paging div{
border:0;
padding:0;
margin:0;
}

.paging {
width:100%;
clear:both;
height:25px;
padding-left:20px;
padding-top:10px;
padding-bottom:10px;
}

.paging div,
.paging a{
border:0;
margin:0;
padding:0;
font-size:11px;
list-style:none;

float:left;
}

.paging a{
border:solid 1px #667151;
margin-right:2px;
}

.paging div.off {
border:solid 1px #667151;
color:#888888;
display:block;
float:left;
padding:3px 4px;
margin-right:2px;
}

.paging .current{
border:solid 1px #667151;
background:#000000;
color:#ffffff;
font-weight:bold;
display:block;
float:left;
padding:3px 4px;
margin-right:2px;
}

.paging a:link,
.paging a:visited {
color:#667151;
display:block;
float:left;
padding:3px 4px;
text-decoration:none;
}

.paging a:hover{
border:solid 1px #667151;
background:#000000;
color:#FFFFFF;

}

the pagination code in your view

1
2
3
4
5
6

<div class="paging">
<?php echo $paginator->prev('<< '.__('previous', true), array(), null, array('class'=>'off'));?>
<?php echo $paginator->numbers(array('tag' => 'div','separator' => ''));?>
<?php echo $paginator->next(__('next', true).' >>', array(), array(), array('class' => 'off'));?>

</div>

And the final results

It's Not A Bug, It's A Feature Just another Developer weblog

CSS Styled Pagination links in CakePHP

Leave a comment Cancel reply

Sponsors

Categories

Site Links

Blogroll

The Cloud