[PHPBB2] Personnaliser la pagination

,

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.



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:




Et sur les messages :




Avec l'astuce voilà à quoi ressemblera votre pagination   :

Sur la liste des sujets:



Sur les messages:



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 Javascript
Mettre 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 Javascript
Mettre 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_body

Recherchez 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 style



Dé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  

Merci Philippe

Merci Philippe ! :ghjgjghj:

Merci beaucoup !

Merci beaucoup !

Et bien moi je ne vois rien à faire?dédé
PS/ je ne' vois pas de codage?

Merci beaucoup !

Merci beaucoup !

encore un bon tuto  

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci :p)

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !

Merci beaucoup !