Connexion

Récupérer mon mot de passe

Derniers sujets
» [TOUTES VERSIONS]Ajouter un contenu visible que par les membres ayant répondu.
par dymo Aujourd'hui à 2:10

» *RESOLU*[PHPBB2] Mise en page dans le corps du message uniquement sur le 1er message
par Milouze14 Ven 14 Fév 2020 - 16:25

» [BESTOF] Les photos à partir de l'ID d'un membre
par Milouze14 Ven 14 Fév 2020 - 3:53

» [PHPBB2] Afficher un message en haut de sujet lorsqu'il est verrouillé
par christ77000 Jeu 13 Fév 2020 - 10:01

» [TOUTES VERSIONS]Visualiser le mot de passe
par christ77000 Jeu 13 Fév 2020 - 8:29

» [TOUTES VERSIONS] Recherche de texte dans les templates
par photoclic Mer 12 Fév 2020 - 19:42

» *CORBEILLE*[PHPBB2] Viewtopic_body : Séparer les champs du profil
par Milouze14 Sam 8 Fév 2020 - 6:15

» *CORBEILLE*[PHPBB2] Messenger sur forumactif
par Milouze14 Sam 8 Fév 2020 - 6:14

» *RESOLU*[PHPBB3] Mettre un cadre aux forums des catégories
par Milouze14 Jeu 6 Fév 2020 - 15:06

» *RESOLU*[MODERNBB] Couleur textarea
par Milouze14 Mer 5 Fév 2020 - 18:06

» [TOUTES VERSIONS]Message automatique au déplacemet d'un sujet
par Jackymi Mar 4 Fév 2020 - 8:50

» *RESOLU*[MODERNBB] Barre de navigation sur 2 lignes
par Milouze14 Mar 4 Fév 2020 - 3:47

» *CORBEILLE*[PHPBB2] Message automatique au déplacement d'un sujet
par Milouze14 Dim 2 Fév 2020 - 9:17

» *RESOLU*[MODERNBB] Largeur forum modernBB
par Milouze14 Dim 2 Fév 2020 - 8:13

» *CORBEILLE*[AWESOMEBB] Erreur "429 too many requests nginx"?
par Milouze14 Ven 31 Jan 2020 - 3:52

» *CORBEILLE*[PHPBB2] Profil
par Milouze14 Mer 29 Jan 2020 - 3:51

» *CORBEILLE*[PHPBB2] QUI REGARDE LES POSTS ,?
par Milouze14 Mar 28 Jan 2020 - 3:48

» *CORBEILLE*[PHPBB2] Profil et avatar
par Milouze14 Mar 28 Jan 2020 - 3:45

» *CORBEILLE*[PHPBB2] Chapeau du père noel.
par Milouze14 Mar 28 Jan 2020 - 3:43

» *RESOLU*[PHPBB3] Récupération avatar (automatiquement) d'un membre
par Milouze14 Lun 27 Jan 2020 - 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