change Joomla pagination style

Pagination.php


/**
 * @version $Id: pagination.php 14401 2010-01-26 14:10:00Z louis $
 * @package Joomla
 * @copyright Copyright (C) 2005 - 2010 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 = "

\n";

    $html .= "\n

".JText::_('Display Num').$list['limitfield']."

";
    $html .= $list['pageslinks'];
    $html .= "\n

".$list['pagescounter']."

";

    $html .= "\n";
    $html .= "\n

";

    return $html;
}

function pagination_list_render($list)
{
    // Initialize variables
    $lang =& JFactory::getLanguage();
    $html = "

";     $html .= $list['start']['data'];     $html .= ' '.$list['previous']['data'];    foreach( $list['pages'] as $page )    {       if($page['data']['active']) {          $html .= '
• ';
        }
  
     $html .= '
• '.' '.$page['data'].'
• ';
  
        if($page['data']['active']) {
           $html .= '
';          }    }    $html .= " ".$list['next']['data'];    $html .= ' '.$list['end']['data'];    /*$html .= '
• »
';*/    $html .= "

";
   return $html;
   }

function pagination_item_active(&$item) {
    return "

link."\" title=\"".$item->text."\">" .$item->text. "

";
}

function pagination_item_inactive(&$item) {
   return "

text. "\">".$item->text."

";
   //return "

".$item->text."

";
}
?>

----------- --CSS ----

*paging*/
.light {
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 /* background: #f3f3f3 url('../img/noise-f3f3f3.png');*/
  background:url(../images/paging_bg.jpg);
  overflow: hidden;
}

.wrapper {
  margin: 0;
  padding: 0em;
}

.paginate {
  text-align: center;
}
.paginate ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.paginate li {
  display: inline;
}
.paginate a {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -ms-border-radius: 3px;
  -khtml-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  margin: 1px 2px;
  padding: 5px 5px;
  display: inline-block;
  border-top: 1px solid #fff;
  text-decoration: none !important;
  color: #717171 !important;
  font-size: 7x!important;
  font-family: "Helvetica Neueu", Helvetica, Arial, sans-serif;
  text-shadow: white 0 1px 0;
  background-color:red;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#eaeaea));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #f9f9f9, #eaeaea);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #f9f9f9, #eaeaea);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #f9f9f9, #eaeaea);
  /* IE10 */
  background-image: -o-linear-gradient(top, #f9f9f9, #eaeaea);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #f9f9f9, #eaeaea);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', EndColorStr='#eaeaea');
  /* IE6–IE9 */
}
.paginate a:first-child, .paginate a.first {
  margin-left: 0;
}
.paginate a:last-child, .paginate a.last {
  margin-right: 0;
}
.paginate a:hover, .paginate a:focus {
  border-color: #fff;
  background-color: #fdfdfd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fafafa));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #fefefe, #fafafa);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #fefefe, #fafafa);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #fefefe, #fafafa);
  /* IE10 */
  background-image: -o-linear-gradient(top, #fefefe, #fafafa);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #fefefe, #fafafa);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fefefe', EndColorStr='#fafafa');
  /* IE6–IE9 */
}
.paginate a.more {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  border: 0 none !important;
  background: transparent !important;
  margin-left: 0;
  margin-right: 0;
}
.paginate a.active {
  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  border-color: #505050 !important;
  color: #f2f2f2 !important;
  text-shadow: black 0 1px 0;
  background-color: #676767;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#5f5f5f), to(#5c5c5c));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* IE10 */
  background-image: -o-linear-gradient(top, #5f5f5f, #5c5c5c);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #5f5f5f, #5c5c5c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#5f5f5f', EndColorStr='#5c5c5c');
  /* IE6–IE9 */
}

.paginate-dark a {
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  -o-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  border-top: 1px solid #62686d;
  text-shadow: rgba(0, 0, 0, 0.75) 0 1px 0;
  color: #fff !important;
  background-color: #4e5458;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#575e63), to(#3f4347));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #575e63, #3f4347);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #575e63, #3f4347);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #575e63, #3f4347);
  /* IE10 */
  background-image: -o-linear-gradient(top, #575e63, #3f4347);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #575e63, #3f4347);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#575e63', EndColorStr='#3f4347');
  /* IE6–IE9 */
}
.paginate-dark a:hover, .paginate-dark a:focus {
  border-color: #61788a;
  background-color: #4d6374;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#566f82), to(#3e505e));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #566f82, #3e505e);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #566f82, #3e505e);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #566f82, #3e505e);
  /* IE10 */
  background-image: -o-linear-gradient(top, #566f82, #3e505e);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #566f82, #3e505e);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#566f82', EndColorStr='#3e505e');
  /* IE6–IE9 */
}
.paginate-dark a.active {
  -moz-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -webkit-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  -o-box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.75);
  border-color: #2d3035 !important;
  background-color: #303338;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#303338), to(#2d3034));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #303338, #2d3034);
  /* Chrome 10+, Saf5.1+ */
  background-image: -moz-linear-gradient(top, #303338, #2d3034);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #303338, #2d3034);
  /* IE10 */
  background-image: -o-linear-gradient(top, #303338, #2d3034);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #303338, #2d3034);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#303338', EndColorStr='#2d3034');
  /* IE6–IE9 */
}