Connexion

Récupérer mon mot de passe

Derniers sujets
» [PhpBB2] Interdire citation dernier message
par Milouze14 Aujourd'hui à 14:27

» Règlement de l'entraide Forumactif
par -Tony- Hier à 23:53

» *RESOLU*[Invision] Alerte message reçu dans messagerie
par Milouze14 Hier à 7:18

» *RESOLU*[PhpBB2] Date d'entrée au forum
par Milouze14 Hier à 4:49

» *RESOLU*[Invision] Membres - 'cartes de visite'
par Milouze14 Hier à 4:46

» [PhpBB2] Problème d'affichage FA messenger
par Milouze14 Ven 13 Déc 2019 - 3:54

» *RESOLU*[PhpBB2] Largeur cadre messagerie privé
par Milouze14 Jeu 12 Déc 2019 - 5:54

» *RESOLU*[PhpBB2] Supprimer zone commentaires des infos profil
par Milouze14 Mer 11 Déc 2019 - 17:06

» *RESOLU*[PhpBB3] Aide sur syntaxe JS
par Milouze14 Mar 10 Déc 2019 - 17:35

» *RESOLU*[ModernBB] Décoration !
par Milouze14 Mar 10 Déc 2019 - 16:55

» *RESOLU*[Invision] Vote négatif réservé aux modérateurs et administrateurs
par Milouze14 Mar 10 Déc 2019 - 16:12

» *RESOLU*[ModernBB] Cherche script participation et autres
par Milouze14 Lun 9 Déc 2019 - 17:59

» [Toutes versions]Ajouter un contenu visible que par les membres ayant répondu.
par oneandone Lun 9 Déc 2019 - 17:37

» *RESOLU*[PhpBB2] Supprimer champ de contact dans les infos de profil,
par Milouze14 Dim 8 Déc 2019 - 20:29

» *RESOLU*[Invision] Déplacement du bouton résolu (suite et fin?)
par Milouze14 Dim 8 Déc 2019 - 9:01

» *RESOLU*[PhpBB3] Outil modération
par Milouze14 Jeu 5 Déc 2019 - 19:30

» *CORBEILLE*[Edge] Pub intrusive
par Milouze14 Mer 4 Déc 2019 - 3:55

» *RESOLU*[PhpBB3] Compte à rebours hebdomadaire permanent
par Milouze14 Mar 3 Déc 2019 - 19:02

» *RESOLU*[PhpBB2] Selecteur de style | placement
par Milouze14 Mar 3 Déc 2019 - 16:32

» *RESOLU*[PhpBB3] Retirer lien Signaler un abus
par Milouze14 Lun 2 Déc 2019 - 15:10

*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