[PHPBB2] Pagination

Bonjour,  

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 :



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,  

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


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 .


Et voilou

Hello Phil.,

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

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

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 ?

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

En M.P si tu le souhaites .

Hello Phil.,

j'ai tout simplement ce résultat.



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

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 .



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>


Bonjour Phil.,

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. 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 :



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.

Re Kaeyla,

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

-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