Connexion

Récupérer mon mot de passe

Derniers sujets
» *[Invision] 3D pour invision
par Temps-pour-elle Aujourd'hui à 12:31

» [Invision]Afficher les boutons " éditer, citer, supprimer, etc ... " sous forme de texte
par Temps-pour-elle Aujourd'hui à 12:28

» [PhpBB2] Comme sur ce forum....capture écran jointe
par Milouze14 Aujourd'hui à 4:21

» [PhpBB2] Index colonnes
par Milouze14 Aujourd'hui à 4:20

» *RESOLU*[PhpBB3] Changer la couleur du texte dans" Qui est en ligne "
par Milouze14 Hier à 19:06

» Règlement de l'entraide Forumactif
par Angelface Hier à 18:07

» *RESOLU*[PhpBB2] Bouton qui est en ligne qui clignote....
par Milouze14 Hier à 16:22

» [PHPBB2] Cacher tous les sujets des invités
par dédé54 Hier à 12:42

» [PhpBB2] index colonnes
par Milouze14 Hier à 4:24

» *RESOLU*[PhpBB2] coloration du titre du sujet dans chaque rubrique .
par Milouze14 Mer 16 Oct 2019 - 18:58

» histoire du Jour sans fin
par Quad Daniel Mer 16 Oct 2019 - 8:06

» Histoire de Blondes Sans Fin
par Quad Daniel Mer 16 Oct 2019 - 8:00

» *RESOLU*[PhpBB3] L'harmonie des couleurs
par 1bernard1 Mer 16 Oct 2019 - 5:18

» *RESOLU*[PhpBB2] Script qui beug depuis plusieurs jours
par Milouze14 Mar 15 Oct 2019 - 19:46

» *RESOLU*[PhpBB2] Coloration de citation parteille et autres
par Milouze14 Mar 15 Oct 2019 - 19:11

» *CORBEILLE*[Edge] Probleme affichage d'avatar..
par Milouze14 Mar 15 Oct 2019 - 19:02

» *RESOLU*[PhpBB2] Je n'ai pas le nombre de posts et sujets dans l'astuce...
par Milouze14 Mar 15 Oct 2019 - 19:00

» *RESOLU*[PhpBB3] Couleurs des liens dans le widget " derniers sujets "
par Milouze14 Lun 14 Oct 2019 - 19:58

» [PhpBB2]Afficher le nombre de sujets/messages sur les messages
par Milouze14 Dim 13 Oct 2019 - 18:04

» [PhpBB3]Afficher le nombre de sujets/messages sur les messages
par Milouze14 Sam 12 Oct 2019 - 18:44

*RESOLU* [PHPBB2] Pagination

Voir le sujet précédent Voir le sujet suivant Aller en bas

Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Mar 12 Juin 2018 - 20:34

Bonjour, hinhin

J'ai regardé ce tuto pour la pagination mais je souhaite avoir plutôt ce style (voir image ci-dessous) sans java.

Je vous joint pour ma demande : l'image du résultat de la pagination demandée, son code, son html et mon template viewtopic_body :

*RESOLU* [PHPBB2] Pagination 0115

Voici le style de l'image ci-dessus :

Code:
.pagination {
  background: #e9e9e9;
  border-radius: 3px;
  border: 1px solid #ddd;
  border-top-color: #c5c5c5;
  border-bottom-color: #fff;
  padding: 2px 2px 3px 1px;
  display: inline-block;
 
  ul{
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
  }
 
  li {
    float: left;
    margin: 0 4px 0 0;
    font-size: 12px;
   
    &:last-child {
      margin: 0;
    }
   
    &.active a,
    a:active {
      box-shadow: none;
    }
   
    &.active a,
    a:hover {
      color: #5ab140;
    }
   
    .delimeter {
      display: block;
      padding-top: 6px;
    }
  }
  a {
    float: left;
    background: #fff;
    background: linear-gradient(top, #fff, #f5f5f5);
    border-radius: 3px;
    padding: 4px 10px;
    border: 1px solid #d9d9d9;
    border-top-color: #fff;
    border-bottom-color: #b6b7b9;
    box-shadow: 0 3px 5px rgba(0,0,0,0.14);
    color: #666;
    text-decoration: none;
  }
}

Voici le Html correspondant au style:

Code:
<div class="pagination">
   <ul>
      <li class="prev"><a href="">Prev</a></li>
      <li><a href="">1</a></li>
      <li class="active"><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li><span class="delimeter">...</span></li>
      <li><a href="">8</a></li>
      <li class="next"><a href="">Next</a></li>
   </ul>
</div>

Voici mon template Viewtopic_body :



Merci par avance de bien vouloir m'aider pour cette belle pagination.

Bonne fin de soirée,

@+ tard, coucou


Dernière édition par Kaeyla le Jeu 14 Juin 2018 - 13:23, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 13 Juin 2018 - 4:22

Hello Kaeyla,

c'est assez simple a mette en place chère amie,
il faut juste donner la class au span qui gère la pagination à deux reprises
dans le template:

Recherches ceci (ligne 65 et 226 environ)

Code:
<span class="gensmall">{PAGINATION}</span>

Supprimes et remplaces par :
Code:
<span class="gensmall M14_pagination">{PAGINATION}</span>


Penses à enregistrer puis à valider en cliquant respectivement sur Enregistrer puis Ajout


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style
Déposes ceci:
Code:

.M14_pagination
{
font-size:0px;
background: #e9e9e9;
border-radius: 3px;
border: 1px solid #ddd;
border-top-color: #c5c5c5;
border-bottom-color: #fff;
padding: 2px 2px 3px 1px;
display: inline-block;
}
/*on supprime le texte allez a */
.M14_pagination a[href^="javascript"]{display:none;}
   
 
.M14_pagination  a ,.M14_pagination  b
{
font-size:12px !important;
float: left;
background: #fff;
background: linear-gradient(top, #fff, #f5f5f5);
border-radius: 3px;
padding: 4px 10px;
border: 1px solid #d9d9d9;
border-top-color: #fff;
border-bottom-color: #b6b7b9;
box-shadow: 0 3px 5px rgba(0,0,0,0.14);
color: #666;
text-decoration: none;
}



Penses à valider les modifications en cliquant sur le bouton Valider


Puis le script qui va changer les images a gauche et a droite ou tu pourras modifier
le texte dans les variables :


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur les sujets


Déposez ceci:
Code:

$(function(){
  //le texte a gauche
  var M14_prev="PREV";
  //le texte a droite
  var M14_next="NEXT";
$('.M14_pagination').each(function(){
$(this).find('.sprite-arrow_subsilver_left').replaceWith(M14_prev);                       
$(this).find('.sprite-arrow_subsilver_right').replaceWith(M14_next);

});});



Penses a cliquer sur le bouton Valider




Tu peux modifier les boutons dans la css ici:
Code:
.M14_pagination  a ,.M14_pagination  b

Code:
.M14_pagination  b
Correspond à la page active clin oeil .


Et voilou impeccable
Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Mer 13 Juin 2018 - 10:53

Hello Phil., hinhin

Merci pour ton aide. La pagination sur les sujets fonctionnent très bien.

Est ce que tu peux me faire la même chose, s'il te plait, pour les sous-forum tout en gardant comme sur l'image "Prev" et "Next".

Bonne journée cher ami clin oeil
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 13 Juin 2018 - 15:35

Re Kaeyla,
il suffit de reproduite la même manipulation à deux reprises:

Code:

<span class="gensmall">{PAGINATION}</span>

Devient :
Code:

<span class="gensmall M14_pagination">{PAGINATION}</span>

Ensuite édites le script et place le sur les sujets et les sous-forums clin oeil
Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Mer 13 Juin 2018 - 20:09

Hello Phil.,

Formidable, c'est aussi installé sur les sous-forums.

Je viens de réaliser que dans le java, tu annonces le "prev" et le next

Code:
 //le texte a gauche
  var M14_prev="PREV";
  //le texte a droite
  var M14_next="NEXT";

Il n'apparait pas sur la pagination, ce sont mes images flèches. Même si je retire les mini icones, j'ai toujours pas l'écrit "Prev" et "Next"

Faut il le mettre dans le style ?
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 13 Juin 2018 - 20:18

Aurais tu un lien sur ton fofo ou je pourrais voir la structure stp.
Un compte membre serait plus approprié clin oeil

En M.P si tu le souhaites .
Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Mer 13 Juin 2018 - 21:50

Hello Phil., hinhin

j'ai tout simplement ce résultat.

*RESOLU* [PHPBB2] Pagination 01a16

Je vais passer demain sur le fofo test, et je te dis si ça vient de mon forum actif. Ce soir j'ai pas trop le temps. A demain pour te tenir au courant

Bonne fin de soirée cher ami

A demain clin oeil
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 14 Juin 2018 - 3:49

Hello Kaeyla,

@Milouze14 a écrit:
Aurais tu un lien sur ton fofo ou je pourrais voir la structure stp.

Est-ce trop compliqué de répondre Kaeyla?
Merci de mentionner le lien du forum afin que je puisse voir la structure clin oeil .



tu as bien modifié le template topics_list_box:
Affichage/Templates/Général/topics_list_box

Tu dois avoir ces lignes:
Code:
<!-- BEGIN pagination -->
 <tr>
 <td class="row1" colspan="7" align="right"><span class="gensmall M14_pagination">{PAGINATION}</span></td>
 </tr>
 <!-- END pagination -->



et


Code:
<td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td> <span class="gensmall M14_pagination">{PAGINATION}</span></td>
 <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
 </tr>
 </table>
 </td>
Kaeyla
Kaeyla
Milouzien

MessageKaeyla le Jeu 14 Juin 2018 - 13:22

Bonjour Phil., hinhin

Avant de te faire intervenir sur mon fofo, je voulais être certaine que ce ne sois pas une erreur basique. Je t'ai souvent donné en Mp le lien du fofo pour l'aide lorsque que rien ne va. J'ai tout simplement voulu voir si c'est une erreur de saisie, de java, ou d'images en passant sur mon fofo test. C'est la raison pour laquelle, je t'ai précisé que j'allais voir avant que tu interviennes.

Effectivement c'est une erreur vraiment basique. oups Les images des flèches sont trop grosses. J'ai remplacé les flèches avant et après par des plus petites. Et j'ai le superbe résultat ci-dessous :

*RESOLU* [PHPBB2] Pagination 01a17

Merci infiniment cher ami pour ton aide et ton soutien. Je te souhaite une superbe journée.

Au plaisir de te lire,

Amicalement

A bientôt. clin oeil
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Jeu 14 Juin 2018 - 15:13

Re Kaeyla,

merci de mentionner le lien du forum concerné la prochaine fois chère amie clin oeil .

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum