1
acegamer
Change the page navigation css style
  • 2011/7/2 22:07

  • acegamer

  • Not too shy to talk

  • Posts: 162

  • Since: 2005/7/11


How do you change the css style of the page navigation in xoops (ex. for the news module)

(1) 2 3 4 ... 274 »

2
novlang1984
Re: Change the page navigation css style

In style.css add

Quote:
/* ===== pages navigation ===== */
#xo-pagenav{
#xo-pagenav a.xo-pagarrow-left {}
#xo-pagenav a.xo-pagarrow-right {}
#xo-pagenav a.xo-pagarrow-left:hover{}
#xo-pagenav a.xo-pagarrow-right:hover {}
#xo-pagenav .xo-pagact {}
#xo-pagenav a.xo-counterpage {}
#xo-pagenav a.xo-counterpage:hover {}


If needed, you can customize id and class in class/pagenav.php


3
acegamer
Re: Change the page navigation css style
  • 2011/7/3 9:49

  • acegamer

  • Not too shy to talk

  • Posts: 162

  • Since: 2005/7/11


Hi novlang1984,

Thx for your fast help. I tried first to check in the class/pagenav.php

but without a good result.
Then i tried just to add your css code in the style.css of my theme with my css code.

But also with no results (template update option is ON in the admin setup)

4
novlang1984
Re: Change the page navigation css style

A full example

/class/pagenav.php
<?php
/**
 * XOOPS page navigation
 *
 * You may not change or alter any portion of this comment or credits
 * of supporting developers from this source code or any supporting source code
 * which is considered copyrighted (c) material of the original comment or credit authors.
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 *
 * @copyright   The XOOPS Project http://sourceforge.net/projects/xoops/
 * @license     GNU GPL 2 (http://www.gnu.org/licenses/old-licenses/gpl-2.0.html)
 * @package     kernel
 * @since       2.0.0
 * @author      Kazumi Ono (http://www.myweb.ne.jp/, http://jp.xoops.org/)
 * @version     $Id$
 */

defined('XOOPS_ROOT_PATH') or die('Restricted access');

class 
XoopsPageNav
{
    
/**
     * *#@+
     *
     * @access private
     */
    
var $total;
    var 
$perpage;
    var 
$current;
    var 
$url;
    
/**
     * *#@-
     */
    
    /**
     * Constructor
     *
     * @param int $total_items Total number of items
     * @param int $items_perpage Number of items per page
     * @param int $current_start First item on the current page
     * @param string $start_name Name for "start" or "offset"
     * @param string $extra_arg Additional arguments to pass in the URL
     */
    
function XoopsPageNav($total_items$items_perpage$current_start$start_name "start"$extra_arg "")
    {
        
$this->total intval($total_items);
        
$this->perpage intval($items_perpage);
        
$this->current intval($current_start);
        
$this->extra $extra_arg;
        if (
$extra_arg != '' && (substr($extra_arg, - 5) != '&amp;' || substr($extra_arg, - 1) != '&')) {
            
$this->extra '&amp;' $extra_arg;
        }
        
$this->url $_SERVER['PHP_SELF'] . '?' trim($start_name) . '=';
    }
    
    
/**
     * Create text navigation
     *
     * @param integer $offset
     * @return string
     */
    
function renderNav($offset 4)
    {
        
$ret '';
        if (
$this->total <= $this->perpage) {
            return 
$ret;
        }
        
$total_pages ceil($this->total $this->perpage);
        if (
$total_pages 1) {
            
$ret .= '<div id="xo-pagenav">';
            
$prev $this->current $this->perpage;
            if (
$prev >= 0) {
                
$ret .= '<a class="xo-pagarrow" href="' $this->url $prev $this->extra '"><u>&laquo;</u></a> ';
            }
            
$counter 1;
            
$current_page intval(floor(($this->current $this->perpage) / $this->perpage));
            while (
$counter <= $total_pages) {
                if (
$counter == $current_page) {
                    
$ret .= '<strong class="xo-pagact" >(' $counter ')</strong> ';
                } elseif ((
$counter $current_page $offset && $counter $current_page $offset) || $counter == || $counter == $total_pages) {
                    if (
$counter == $total_pages && $current_page $total_pages $offset) {
                        
$ret .= '... ';
                    }
                    
$ret .= '<a class="xo-counterpage" href="' $this->url . (($counter 1) * $this->perpage) . $this->extra '">' $counter '</a> ';
                    if (
$counter == && $current_page $offset) {
                        
$ret .= '... ';
                    }
                }
                
$counter ++;
            }
            
$next $this->current $this->perpage;
            if (
$this->total $next) {
                
$ret .= '<a class="xo-pagarrow" href="' $this->url $next $this->extra '"><u>&raquo;</u></a> ';
            }
            
$ret .= '</div> ';
        }
        return 
$ret;
    }
    
    
/**
     * Create a navigational dropdown list
     *
     * @param boolean $showbutton Show the "Go" button?
     * @return string
     */
    
function renderSelect($showbutton false)
    {
        if (
$this->total $this->perpage) {
            return;
        }
        
$total_pages ceil($this->total $this->perpage);
        
$ret '';
        if (
$total_pages 1) {
            
$ret '<form name="pagenavform">';
            
$ret .= '<select name="pagenavselect" onchange="location=this.options[this.options.selectedIndex].value;">';
            
$counter 1;
            
$current_page intval(floor(($this->current $this->perpage) / $this->perpage));
            while (
$counter <= $total_pages) {
                if (
$counter == $current_page) {
                    
$ret .= '<option value="' $this->url . (($counter 1) * $this->perpage) . $this->extra '" selected="selected">' $counter '</option>';
                } else {
                    
$ret .= '<option value="' $this->url . (($counter 1) * $this->perpage) . $this->extra '">' $counter '</option>';
                }
                
$counter ++;
            }
            
$ret .= '</select>';
            if (
$showbutton) {
                
$ret .= '&nbsp;<input type="submit" value="' _GO '" />';
            }
            
$ret .= '</form>';
        }
        return 
$ret;
    }
    
    
/**
     * Create navigation with images
     *
     * @param integer $offset
     * @return string
     */
    
function renderImageNav($offset 4)
    {
        if (
$this->total $this->perpage) {
            return;
        }
        
$total_pages ceil($this->total $this->perpage);
        
$ret '';
        if (
$total_pages 1) {
            
$ret '<table><tr>';
            
$prev $this->current $this->perpage;
            if (
$prev >= 0) {
                
$ret .= '<td class="pagneutral"><a href="' $this->url $prev $this->extra '"><</a></td><td><img src="' XOOPS_URL '/images/blank.gif" width="6" alt="" /></td>';
            } else {
                
$ret .= '<td class="pagno"></a></td><td><img src="' XOOPS_URL '/images/blank.gif" width="6" alt="" /></td>';
            }
            
$counter 1;
            
$current_page intval(floor(($this->current $this->perpage) / $this->perpage));
            while (
$counter <= $total_pages) {
                if (
$counter == $current_page) {
                    
$ret .= '<td class="pagact"><strong>' $counter '</strong></td>';
                } elseif ((
$counter $current_page $offset && $counter $current_page $offset) || $counter == || $counter == $total_pages) {
                    if (
$counter == $total_pages && $current_page $total_pages $offset) {
                        
$ret .= '<td class="paginact">...</td>';
                    }
                    
$ret .= '<td class="paginact"><a href="' $this->url . (($counter 1) * $this->perpage) . $this->extra '">' $counter '</a></td>';
                    if (
$counter == && $current_page $offset) {
                        
$ret .= '<td class="paginact">...</td>';
                    }
                }
                
$counter ++;
            }
            
$next $this->current $this->perpage;
            if (
$this->total $next) {
                
$ret .= '<td><img src="' XOOPS_URL '/images/blank.gif" width="6" alt="" /></td><td class="pagneutral"><a href="' $this->url $next $this->extra '">></a></td>';
            } else {
                
$ret .= '<td><img src="' XOOPS_URL '/images/blank.gif" width="6" alt="" /></td><td class="pagno"></td>';
            }
            
$ret .= '</tr></table>';
        }
        return 
$ret;
    }
}

?>


style.css
/* ===== pages navigation ===== */
#xo-pagenav{margin-bottom: 10px; text-align: center;}
#xo-pagenav a.xo-pagarrow-left {background: transparent url(../icons/arrow-left.png) no-repeat center right; padding: 10px; text-decoration: none;}
#xo-pagenav a.xo-pagarrow-right {background: transparent url(../icons/arrow-right.png) no-repeat center left; padding: 10px; text-decoration: none;}
#xo-pagenav a.xo-pagarrow-left:hover{text-decoration: none;}
#xo-pagenav a.xo-pagarrow-right:hover {text-decoration: none;}
#xo-pagenav .xo-pagact {margin: 0; font-weight: bold; padding: 5px 7px; border: 1px solid #888; color: #fff; background: #aaa;}
#xo-pagenav a.xo-counterpage {margin: 2px; background: #fff; padding: 2px 5px; border: 1px solid #aaa; color: #aaa; text-decoration: none;}
#xo-pagenav a.xo-counterpage:hover { border: 1px solid #999; color: #fff; margin: 0; padding: 5px 7px; background: #bbb;}


It works with Xoops 2.5.1 and as fas I can remember pagenav.php is the original file, not hacked (compare with Winmerge if you can).

Also, be sure to clean Xoops cache...

5
RiazShahid
Re: Change the page navigation css style

novlang1984!
Thanks for posting here.....
I wanted to know, what modification will it do to the traditional page navigation structure i.e. (1) 2 3 4 ... 274 »

Is it possible that I can have a drop down list of page numbers along with "Previous" and "Next" text or button?

Login

Who's Online

211 user(s) are online (69 user(s) are browsing Support Forums)


Members: 0


Guests: 211


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits