how to style default joomla 1.5 and 2.5 pagination

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:

Create a file named pagination.php in the “html” folder of your template directory. The file structure should be “/templates/yourtemplatename/html/pagination.php”.

<?php

/**
* @version        $Id: pagination.php 10381 2008-06-01 03:35:53Z pasamio $
* @package        Joomla
* @copyright    Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
* @license        GNU/GPL, see LICENSE.php
* Joomla! is free software. This version may have been modified pursuant
* to the GNU General Public License, and as distributed it includes or
* is derivative of works licensed under the GNU General Public License or
* other free or open source software licenses.
* See COPYRIGHT.php for copyright notices and details.
*/

// no direct access
defined('_JEXEC') or die('Restricted access');

/**
* This is a file to add template specific chrome to pagination rendering.
*
* pagination_list_footer
*     Input variable $list is an array with offsets:
*         $list[limit]        : int
*         $list[limitstart]    : int
*         $list[total]        : int
*         $list[limitfield]    : string
*         $list[pagescounter]    : string
*         $list[pageslinks]    : string
*
* pagination_list_render
*     Input variable $list is an array with offsets:
*         $list[all]
*             [data]        : string
*             [active]    : boolean
*         $list[start]
*             [data]        : string
*             [active]    : boolean
*         $list[previous]
*             [data]        : string
*             [active]    : boolean
*         $list[next]
*             [data]        : string
*             [active]    : boolean
*         $list[end]
*             [data]        : string
*             [active]    : boolean
*         $list[pages]
*             [{PAGE}][data]        : string
*             [{PAGE}][active]    : boolean
*
* pagination_item_active
*     Input variable $item is an object with fields:
*         $item->base    : integer
*         $item->link    : string
*         $item->text    : string
*
* pagination_item_inactive
*     Input variable $item is an object with fields:
*         $item->base    : integer
*         $item->link    : string
*         $item->text    : string
*
* This gives template designers ultimate control over how pagination is rendered.
*
* NOTE: If you override pagination_item_active OR pagination_item_inactive you MUST override them both
*/

function pagination_list_footer($list)
{
// Initialize variables
$lang =& JFactory::getLanguage();
$html = "<div class="list-footer">n";

$html .= "n<div class="limit">".JText::_('Display Num').$list['limitfield']."</div>";
$html .= $list['pageslinks'];
$html .= "n<div class="counter">".$list['pagescounter']."</div>";

$html .= "n<input type="hidden" name="limitstart" value="".$list['limitstart']."" />";
$html .= "n</div>";

return $html;
}

function pagination_list_render($list)
{
// Initialize variables
$lang =& JFactory::getLanguage();
$html = "<ul class="pagination lamvt">";

$html .= $list['start']['data'];
$html .= $list['previous']['data'];

foreach( $list['pages'] as $page )
{
if($page['data']['active']) {
//$html .= '<strong>';
}

$html .= $page['data'];

if($page['data']['active']) {
//$html .= '</strong>';
}
}

$html .= $list['next']['data'];
$html .= $list['end']['data'];
// $html .= '&#171;';

$html .= "</ul>";
return $html;
}

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

function pagination_item_inactive(&$item) {
$class ='';
if(is_int($item->text)){
$class="curent";
}
return "<li class='inactive ".$class."'><span>".$item->text."</span></li>";
}
?>

Leave a comment