How to style default Joomla! Pagination with CSS

Most of the sites we design have plenty of fancy elements, but we always end up with a simple or unstyled page navigation list. The PSD always looks unique, but the web version falls short of the designers’ expectations. This is because there are no CSS selectors on the arrows, start, prev, next, end or numbers.

I probably looked at the custom pagination.php 100 times, before realizing how simple it was to add a CSS class to each element.

Ok, time for the good stuff. Here are the simple steps required to add CSS classes to your Joomla! page navigation (pagination) elements:

1. Create a file named pagination.php in the “html” folder of your template directory. The file structure should be “/templates/yourtemplatename/html/pagination.php”.
2. Copy the content of this file (pagination.txt) to your newly created pagination.php file.
3. Open pagination.php and replace this:

   function pagination_item_active(&$item) {
   return "<li><a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a></li>";
   }
   function pagination_item_inactive(&$item) {
   return "<li><span>".$item->text."</span></li>";
   }

   with this:

   function pagination_item_active(&$item) {
   
   //Custom variable created to use as the element class
   $item_class = strtolower($item->text);
   if(is_numeric ($item_class)) {
   $item_class .= " number";
   }
   return "<li class=\"".$item_class."\"><a href=\"".$item->link."\" title=\"".$item->text."\">".$item->text."</a></li>";
   }
   
   function pagination_item_inactive(&$item) {
   
   //Custom variable created to use as the element class
   $item_class = strtolower($item->text);
   if(is_numeric ($item_class)) {
   $item_class .= " number";
   }
   return "<li class=\"".$item_class."\"><span>".$item->text."</span></li>";
   }

Now the li elements of each pagination item should have a class that matches the text of the element. In addition, the numbers should have a second class of “number.”

Your HTML should look like this:

<ul class="pagination">
    <li class="start"><span>Start</span></li>
    <li class="prev"><span>Prev</span></li>
    <li class="1 number"><span>1</span></li>
    <li class="2 number"><a title="2" href="/category/Page-2">2</a></li>
    <li class="3 number"><a title="3" href="/category/Page-3">3</a></li>
    <li class="next"><a title="Next" href="/category/Page-2">Next</a></li>
    <li class="end"><a title="End" href="/category/Page-3">End</a></li>
</ul>