Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Astuces Forumactif

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le Deal du moment : -34%
[CDAV] SAMSUNG Galaxy S20FE 128Go 5G Bleu à ...
Voir le deal
329 €

 

 [PHPBB2] Personnaliser la pagination

Aller en bas 
+15
kailash35
Ptite_Perle
Prongs
Grande013
Ombi
Chocolatine
Queen G.
dragon594
clost
El_Mojito
dédé54
mariok
ThunderTB
fascicularia
Milouze14
19 participants
AuteurMessage
Milouze14
Fondateur

Milouze14



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMer 8 Juil 2015 - 19:53

coucou ,

comme le mentionne le titre, vous pouvez personnaliser la pagination
dans la liste des sujets et aussi sur les messages hinhin .

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

Car je rencontrais des problèmes pour supprimer les virgules et les deux points  hinhin .


Actuellement vous avez une apparence similaire à celle-ci dans la liste des sujets:

[PHPBB2] Personnaliser la pagination 1011


Et sur les messages :

[PHPBB2] Personnaliser la pagination 1111


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

Sur la liste des sujets:

[PHPBB2] Personnaliser la pagination 2010

Sur les messages:

[PHPBB2] Personnaliser la pagination 2110

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  Valid

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  Valid

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 çà  hinhin .

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  Valid



Dernière édition par Milouze14 le Lun 29 Nov 2021 - 7:25, édité 5 fois
Revenir en haut Aller en bas
https://www.milouze14.com
fascicularia
Milouzien

fascicularia



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptySam 11 Juil 2015 - 5:48

Merci Philippe super
Revenir en haut Aller en bas
https://altitudetropicale.forums-actifs.com/
Invité
Invité
Anonymous



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMar 14 Juil 2015 - 11:04

Merci Philippe ! :ghjgjghj:
Revenir en haut Aller en bas
ThunderTB
Milouzien

ThunderTB



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyJeu 3 Sep 2015 - 15:10

Merci beaucoup !
Revenir en haut Aller en bas
http://hockeyfederation.forumgratuit.org/forum
mariok
Membre regretté

mariok



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyJeu 3 Sep 2015 - 21:54

Merci beaucoup !
Revenir en haut Aller en bas
http://www.amarid.net
dédé54
Milouzien

dédé54



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyJeu 3 Sep 2015 - 23:10

Et bien moi je ne vois rien à faire?dédé
PS/ je ne' vois pas de codage?
Revenir en haut Aller en bas
http://le-piegeage.1fr1.net/
Invité
Invité
Anonymous



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyVen 25 Sep 2015 - 19:58

Merci Philippe
Revenir en haut Aller en bas
El_Mojito
Milouzien

avatar



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMer 2 Déc 2015 - 14:40

Merci beaucoup !
Revenir en haut Aller en bas
http://Crewweedganja.forumactif.be
Invité
Invité
Anonymous



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMer 2 Déc 2015 - 18:11

Merci beaucoup !
Revenir en haut Aller en bas
clost
Milouzien

clost



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMar 22 Mar 2016 - 18:36

encore un bon tuto   clin oeil clin oeil
Revenir en haut Aller en bas
https://www.dyane-collection-passion.net
dragon594
Milouzien

dragon594



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyDim 27 Mar 2016 - 4:54

Merci beaucoup !
Revenir en haut Aller en bas
https://dragon-graphisme59.forumactif.org/
Invité
Invité
Anonymous



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyLun 25 Avr 2016 - 16:29

Merci beaucoup !
Revenir en haut Aller en bas
Invité
Invité
Anonymous



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMar 12 Juil 2016 - 0:14

Merci beaucoup !
Revenir en haut Aller en bas
Queen G.
Milouzien

avatar



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptySam 29 Oct 2016 - 19:30

Merci beaucoup !
Revenir en haut Aller en bas
https://lustforlife.forumactif.com/
Chocolatine
Milouzien

Chocolatine



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMer 31 Mai 2017 - 13:34

Merci beaucoup !
Revenir en haut Aller en bas
http://bit.ly/2oPwMrS
Ombi
Milouzien

Ombi



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyVen 28 Juil 2017 - 20:34

Merci beaucoup !
Revenir en haut Aller en bas
https://vieminimaliste.forumactif.com/
Grande013
Milouzien

avatar



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMar 8 Aoû 2017 - 13:19

Merci beaucoup !
Revenir en haut Aller en bas
Prongs
Milouzien

Prongs



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyMer 4 Oct 2017 - 8:26

Merci :p)
Revenir en haut Aller en bas
https://specialis-revelio.forumactif.com/
Ptite_Perle
Milouzien

Ptite_Perle



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptySam 14 Oct 2017 - 18:55

Merci beaucoup !
Revenir en haut Aller en bas
https://forumcrea.forumactif.org/
kailash35
Milouzien

avatar



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptySam 20 Jan 2018 - 14:00

Merci beaucoup !
Revenir en haut Aller en bas
http://capchiens.forumpro.fr
Kaeyla
Milouzien

Kaeyla



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyJeu 1 Fév 2018 - 22:55

Merci beaucoup !
Revenir en haut Aller en bas
https://sweethome.forumactif.com
HardRock
Milouzien

HardRock



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyLun 2 Avr 2018 - 14:41

Merci beaucoup !
Revenir en haut Aller en bas
http://indecentpossession.forumactif.com/
Lilas
Milouzien

Lilas



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyDim 11 Nov 2018 - 23:38

Merci beaucoup !
Revenir en haut Aller en bas
http://lefofodemacopine.forumactif.com
Psychotic Bitch
Milouzien

Psychotic Bitch



[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination EmptyDim 27 Jan 2019 - 14:32

Merci beaucoup !
Revenir en haut Aller en bas
https://wildestdreams.forumactif.com/
Contenu sponsorisé





[PHPBB2] Personnaliser la pagination Empty
MessageSujet: Re: [PHPBB2] Personnaliser la pagination   [PHPBB2] Personnaliser la pagination Empty

Revenir en haut Aller en bas
 
[PHPBB2] Personnaliser la pagination
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [PHPBB2]Pagination simplifiée
» [PHPBB2] Personnaliser les permissions du forum
» [PHPBB2]Personnaliser les annonces, notes etc
» [PHPBB2] Personnaliser l'affichage des notifications dans le profil
» [PHPBB2] Personnaliser les balises hide code quote et spoiler

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Les astuces Phpbb2-
Sauter vers: