zen of coding

Styling the paginator links

A little trick to make your paginator links look pretty… Add a ‘class’ option to your paginator links like so:

[sourcecode language=’php’]

prev(‘< Previous', array('class'=>‘pagNav’)); ?>
numbers(array(‘class’=>’pagNav’, ‘separator’ => ”)); ?>
next(‘Next >’, array(‘class’=>’pagNav’)); ?>

[/cc]

Now with a little bit of CSS you can style the links to fit with the rest of your design. Here’s a sample CSS:

[sourcecode language=’css’]

#pagHolder {
margin-bottom: 7px;
}

a.pagNav {
color: #878787;
border: 1px solid #e5f4ef;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-right: 5px;
}

.current {
background-color: #e5f4ef;
color: #000;
border: 1px solid #e5f4ef;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-right: 5px;
}

a.pagNav:hover {
background-color: #e5f4ef;
color: #000;

}

[/cc]

Note, that the currently selected page uses the class name ‘current’. (I have not found a way to change the default).

%d bloggers like this: