Fork me on GitHub

Rapport de message :*
 

Pagenav et Xbootstrap (ou autre théme responsive)

Titre du sujet : Pagenav et Xbootstrap (ou autre théme responsive)
par slider84 sur 23/05/2015 16:41:34

Bonjour à tous,

Un petit tuto pour ceux qui utilisent un thème responsive (comme Xbootstrap) pour adapter les pagenav à leur utilisation sur mobiles.
D'origine, les pagenav sont trop petits et trop longs pour naviguer agréablement sur un appareil mobile.
Donc ci-dessous petit tuto pour remédier à ce problème.

Attention: Xoops 2.5.7 mais doit sûrement fonctionner avec les autres version 2.5.x.

1- Pour raccourcir le nombre de pages affichées modifier le fichier /class/pagenav.php comme suit:
Ligne 67 et 151 dans les fonctions rendernav et renderImageNav mettre la variable $offset à 2 au lieu de 4.
function renderNav($offset = 2)

function renderImageNav($offset = 2)

2- Supprimer les parenthéses de la page active
Dans le même fichier remplacer la ligne 85 par:
$ret .= '<strong class="xo-pagact" >' . $counter . '</strong> ';

3- Un peu de css pour cacher les flèches de navigation, agrandir les boutons et leur donner un look Xbootstrap (à rajouter à la feuille de style du thème)
/* ===== pages navigation ===== */
#xo-pagenav{
margin-bottom: 5px;
text-align: center;
}
.xo-pagarrow {
visibility: hidden;
}
#xo-pagenav .xo-pagact {
font-size:0.9em;
width:              32px;
height:             30px;
margin-top: 5px;
padding-top:5px;
text-decoration: none;
display: inline-block;
font-size: 0.9em;
font-weight: 400;
line-height: 1.42857;
white-space: nowrap;
vertical-align: middle;
margin-bottom: 0px;
text-align: center;
background-color:#DC5D00;
color: #fff;
border: 1px solid #CCC;
border-radius:4px;
}
#xo-pagenav a.xo-counterpage {
width: 32px;
height: 30px;
margin-top: 5px;
padding-top:5px;
text-decoration: none;
display: inline-block;
font-size: 0.9em;
font-weight: 400;
line-height: 1.42857;
white-space: nowrap;
vertical-align: middle;
margin-bottom: 0px;
text-align: center;
background-color:none;
color: #333;
border: 1px solid #CCC;
cursor:    pointer;
border-radius:4px;
}
#xo-pagenav a.xo-counterpage:hover { border: 1px solid #adadad; color: #333333; margin: 5;  background: #e6e6e6;}


Le résultat sur un écran en 320 px de large:
Open in new window
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

44 Personne(s) en ligne (34 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 44 | Plus ...