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: