,
comme le mentionne le titre, vous pouvez personnaliser la pagination
dans la liste des sujets et aussi sur les messages
.
Le seul petit bémol sur cette astuce se trouve sur les messages ,
il a fallut masquer la phrase "Aller à la page" via la C.S.S.
![[PHPBB2] Personnaliser la pagination 00110](https://i.servimg.com/u/f18/11/26/21/37/00110.png)
Car je rencontrais des problèmes pour supprimer les virgules et les deux points
.
Actuellement vous avez une apparence similaire à celle-ci dans la liste des sujets:
![[PHPBB2] Personnaliser la pagination 1011](https://i.servimg.com/u/f18/11/26/21/37/1011.png)
Et sur les messages :
![[PHPBB2] Personnaliser la pagination 1111](https://i.servimg.com/u/f18/11/26/21/37/1111.png)
Avec l'astuce voilà à quoi ressemblera votre pagination
:
Sur la liste des sujets:
![[PHPBB2] Personnaliser la pagination 2010](https://i.servimg.com/u/f18/11/26/21/37/2010.png)
Sur les messages:
![[PHPBB2] Personnaliser la pagination 2110](https://i.servimg.com/u/f18/11/26/21/37/2110.png)
L'astuce vous donnera un changement de texte "Aller à la page" et une infobulle sur le dernier numéro , le cas échéant le script remplacera l'espace représenté par des pointillés par ce que vous souhaitez dans la liste des sujets
L'astuce vous donnera une infobulle sur les petites flèches à gauche et à droite sur les messages ainsi que sur la page active et sur le dernier numéro.
Modules/
HTML JAVASCRIPT/
Gestion des codes Javascript/
Créer un nouveau JavascriptMettre un titre explicite.
Cocher sur les sous forums.
Déposez ce script:
- Code:
-
$(function(){
$('img[alt="Aller à la page"]').closest('.gensmall').attr('id','M14_page');
});
$(function(){
$('#M14_page.gensmall ').each(function(){
$(this).html($(this).html().replace(/\Aller à la page:/, 'Nombre de pages'));
$(this).html($(this).html().replace(/\[/, ''));
$(this).html($(this).html().replace(/\]/, ''));
$(this).html($(this).html().replace(/\,/, ''));
$(this).html($(this).html().replace(/\, ... ,/, '>>>'));
$(this).html($(this).html().replace(/\, /, ''));
$(this).html($(this).html().replace(/\, /, ''));
});
$('#M14_page.gensmall a:last-child').attr('title','Voir la dernière page');
});
Pensez a cliquer sur le bouton
Modules/
HTML JAVASCRIPT/
Gestion des codes Javascript/
Créer un nouveau JavascriptMettre un titre explicite.
Cocher sur les sujets.
Déposez ce script:
- Code:
-
//ATTRIBUTION D UNE INFOBULLE
$(function(){
$('.M14_PAGE.gensmall img[alt="Suivant"]').closest('a').attr('id','M14_PAGE_Last').attr('title','Voir la page suivante');
$('.M14_PAGE.gensmall img[alt="Précédent"]').closest('a').attr('id','M14_PAGE_First').attr('title','Voir la page précédente');
$('a#M14_PAGE_Last').prev('a').attr('title','Voir la dernière page');
$('.M14_PAGE.gensmall b').attr('title','Page active');
});
Pensez a cliquer sur le bouton
Puis on va modifier le template viewtopic_body:
Affichage/
Templates/
Général/
viewtopic_bodyRecherchez ceci ligne 124 environ:
- Code:
-
<span class="gensmall">{PAGINATION}</span>
Supprimez et remplacez par:
- Code:
-
<span class="gensmall M14_PAGE">{PAGINATION}</span>
Plus bas recherchez ligne 298 environ ceci:
- Code:
-
<span class="gensmall">{PAGINATION}</span>
Supprimez et remplacez par:
- Code:
-
<span class="gensmall M14_PAGE">{PAGINATION}</span>
Tout en bas du template juste après ceci:
- Code:
-
<!-- END viewtopic_bottom -->
Déposez le script suivant:
- Code:
-
<script type="text/javascript">
$(function(){
$('.M14_PAGE').html($('.M14_PAGE').html().replace(/: /g,' ').replace(/, /g,' ')).removeAttr('id');
});
</script>
Il ne reste plus qu'à personnaliser tout çà
.
Dans la feuille de style:
Affichage/
Images et Couleurs/
Couleurs/
Feuille de styleDéposez ce style et agrémentez le style comme bon vous semble
- Code:
-
/*********DEBUT D AFFICHAGE PAGINATION LISTE DES SUJETS*********/
/*Les couleurs hors lien*/
span#M14_page.gensmall
{
color:darkred;/*la couleur de police*/
font-weight:bold;/*caractere gras*/
}
/*L apparence des non lien au survol*/
span#M14_page.gensmall:hover
{
color:darkgreen;/*la couleur de police*/
}
/*L apparence des numeros*/
span#M14_page.gensmall a[href^="/t"]
{
margin-left 2px ;/*on decale de 2px sur la gauche*/
margin-right:2px;/*on decale de 2px sur la droite*/
padding:2px 4px;/*on donne des espaces 2px en haut et en bas et 4px a gauche et a droite*/
font-weight:bold;/*caractere gras*/
background-color:white;/*la couleur de fond*/
color:black;/*la couleur de police*/
border:1px solid orange;/* bordure de 1px de style solid et sa couleur*/
text-decoration:none !important;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
/*L apparence du premier numero*/
span#M14_page.gensmall a[href^="/t"]:first-child{margin-left:5px;}
/*L apparence du dernier numero*/
span#M14_page.gensmall a[href^="/t"]:last-child{margin-left:10px;}
/*On demande des transitions au survol des numeros*/
span#M14_page.gensmall ,span#M14_page.gensmall a[href^="/t"],.gensmall.M14_PAGE a[href^="/t"]
{
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
/*L apparence des liens au survol des numeros*/
span#M14_page.gensmall a[href^="/t"]:hover
{
padding:2px 4px;/*on donne des espaces 2px en haut et en bas et 4px a gauche et a droite*/
background-color:black;/*la couleur de fond*/
color:white;/*la couleur de police*/
border:1px solid darkgreen;/* bordure de 1px de style solid et sa couleur*/
}
/*********FIN D AFFICHAGE PAGINATION LISTE DES SUJETS*********/
/*********DEBUT PAGINATION DES SUJETS*********/
/*Suppression du texte Aller a la page*/
a[onmousedown^="createPagination"]{display:none;}
/*Suppression de la couleur de fond des liens avec image*/
a#M14_PAGE_Last ,a#M14_PAGE_First
{
background:transparent !important;/*NE PAS TOUCHER*/
border:none !important;/*NE PAS TOUCHER*/
}
/*Numero du numero de la page active*/
.gensmall.M14_PAGE b
{
cursor:pointer;
position:relative;
top:2px;/*on decale de 2px du haut le numero*/
margin-left 2px ;/*on decale de 2px sur la gauche*/
margin-right:2px;/*on decale de 2px sur la droite*/
padding:2px 4px;/*on donne des espaces 2px en haut et en bas et 4px a gauche et a droite*/
background-color:white;/*la couleur de fond*/
color:black;/*la couleur de police*/
border:1px solid darkgreen;/* bordure de 1px de style solid et sa couleur*/
-webkit-border-radius: 3px;/*les bordures arrondies*/
-moz-border-radius: 3px;
border-radius: 3px;
}
/*Numero du numero des autres pages*/
.gensmall.M14_PAGE a[href^="/t"]
{
top:0px;
position:relative;
margin-left 2px ;/*on decale de 2px sur la gauche*/
margin-right:2px;/*on decale de 2px sur la droite*/
padding:2px 4px;/*on donne des espaces 2px en haut et en bas et 4px a gauche et a droite*/
font-weight:bold;/*caractere gras*/
background-color:white;/*la couleur de fond*/
color:black;/*la couleur de police*/
border:1px solid orange;/* bordure de 1px de style solid et sa couleur*/
text-decoration:none !important;
-webkit-border-radius: 3px;/*les bordures arrondies*/
-moz-border-radius: 3px;
border-radius: 3px;
}
/*Numero des autres pages au survol*/
.gensmall.M14_PAGE a[href^="/t"]:hover
{
top:-5px;/*on remonte de numero de 5px*/
background-color:black;/*la couleur de fond*/
color:white;/*la couleur de police*/
border:1px solid darkgreen; /* bordure de 1px de style solid et sa couleur*/
}
/*On supprime l apparence sur les fleches precedente et suivante*/
.gensmall.M14_PAGE a#M14_PAGE_Last:hover ,.gensmall.M14_PAGE a#M14_PAGE_First:hover
{
top:0px !important; /*NE PAS TOUCHER*/
}
/*********FIN PAGINATION DES SUJETS*********/
Pensez à valider les modifications en cliquant sur le bouton
Accueil 
![[PHPBB2] Personnaliser la pagination 00110](https://servimg.com/r/1811262137/00110.png)
![[PHPBB2] Personnaliser la pagination 1011](https://servimg.com/r/1811262137/1011.png)
![[PHPBB2] Personnaliser la pagination 1111](https://servimg.com/r/1811262137/1111.png)
![[PHPBB2] Personnaliser la pagination 2010](https://servimg.com/r/1811262137/2010.png)
![[PHPBB2] Personnaliser la pagination 2110](https://servimg.com/r/1811262137/2110.png)
