AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

    Dynamiser la page "Membres"

    Hiro'
    Hiro'
    MasculinAge : 27Messages : 127

    Sam 21 Sep 2013 - 14:24

    Rappel du premier message :

    #html #css #auteur_Hiro #phpBB2


    Bonjour tout le monde !
    Aujourd'hui, je vous propose mon premier tutoriel. Il servira à dynamiser la page membres de votre forum.
    Ce n'est pas forcément un tuto très utile en soi, mais le réaliser m'a permis de comprendre un peu mieux les templates.

    À noter que ce tuto est fait pour la version de forum PhpBB2.

    Ce tuto nécessite la modification des templates et de la fiche de style CSS. Vous devez donc être administrateur fondateur.
    Ce tuto est valable pour un forum avec des avatars aux dimensions 200*400. En cas de problème pour le personnaliser, je suis à votre écoute.


    Merci à Sparrow à qui j'ai subtilisé le code CSS qu'il utilise ici.


    Première partie : Templates.

    Le template à utiliser est le memberlist_body

    La partie qui nous intéresse est celle-ci :
    Code:
    <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
    Elle se trouve à la ligne 39. Supprimez tout ce qui se trouve entre les balises < td >, soit ceci :

    Code:
    <div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div>
    Qu'est-ce que j'ai supprimé ?
    Vous avez supprimé le contenu de la case réservée à l'avatar. Nous allons très vite le remplacer.


    Voilà le code que vous allez ajouter à la place de ce code.
    Code:
    <div class="description3"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{memberrow.AVATAR_IMG}<div class="description3_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br />{memberrow.USERNAME}.<br />{memberrow.POSTS} messages.<br />Inscrit le {memberrow.JOINED}.</div></div></div></div>
    Examinons ceci en détail.
    Kézako ?

    • {memberrow.AVATAR_IMG} est l'avatar du membre.
    • {memberrow.USERNAME} est le pseudo du membre.
    • {memberrow.POSTS} est le nombre de posts du membre.
    • {memberrow.JOINED} est la date d'inscription du membre.



    Ce qui est contenu entre :
    Code:
    <div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;">
    et :
    Code:
    </div></div></div></div>
    Est ce qui va apparaître quand la souris passera sur l'avatar.

    Personnaliser
    Vous pouvez donc mettre ce que vous voulez. Cependant, ce tutoriel d'adaptera au résultat montré plus haut. Mais je suis ouvert à toutes vos questions si vous avez du mal à personnaliser votre template.


    Le nom du poteur, son nombre de messages et sa date d'inscription sont donc affichés dans la case Avatar. Inutile de les afficher à nouveau dans les autres cases. Il faut donc supprimer la colonne "nombre de messages", la colonne "pseudo" et la colonne "date d'inscription".

    Repérez cette partie-là :

    Code:
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th class="thCornerL" nowrap="nowrap" height="25">#</th>
          <th class="thTop" nowrap="nowrap">{L_AVATAR}</th>
          <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
          <!-- BEGIN switch_th_group -->
          <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
          <!-- END switch_th_group -->
          <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
          <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
          <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
          <th class="thTop" nowrap="nowrap">{L_POSTS}</th>
          <th class="thTop" nowrap="nowrap">{L_PM}</th>
          <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
       </tr>
       <!-- BEGIN memberrow -->
       <tr>
          <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td>
          <td class="{memberrow.ROW_CLASS}" align="center"><div class="avatar mini"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></td>
          <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>
          <!-- BEGIN switch_td_group -->
          <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
          <!-- END switch_td_group -->
          <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td>
          <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>
          <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
          <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>
          <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
          <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG} </td>
       </tr>
       <!-- END memberrow -->
       <!-- BEGIN switch_no_user -->
       <tr>
          <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
       </tr>
       <!-- END switch_no_user -->
    </table>
    La première partie du code (c'est-à-dire jusqu'à ), c'est celle qui donne les titres des colonnes. Vous pouvez certainement les identifier facilement.


    Kézako ?

    • {L_AVATAR} affichera "Avatar",
    • {L_USERNAME} affichera "Pseudo",
    • etc.



    Maintenant que nous avons regroupé plusieurs données dans la case avatar nous pouvons les supprimer.

    Les lignes à supprimer sont donc :
    Code:
    <th class="thTop" nowrap="nowrap">{L_USERNAME}</th>
    <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
    <th class="thTop" nowrap="nowrap">{L_JOINED}</th>
    Personnaliser
    Vous pouvez également remplacer le nom de la colonne avatar ({L_AVATAR}) par votre propre appellation. Il suffira de supprimer cette variable et d'y écrire à la place votre appellation, tout simplement.



    Si vous validiez le template à ce moment là, le résultat ne serait pas à la hauteur de vos espérances. En effet, les titres des colonnes auront disparu, mais le contenu de ces colonnes sera resté intact, c'est là qu'intervient la seconde partie du code (c'est-à-dire après ).

    Vous pouvez supprimer les lignes inutiles, à savoir :
    Code:
    <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span></td>

    <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.JOINED}</span></td>

    <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.POSTS}</span></td>
    Ca y est, votre template est prêt ! Maintenant, attaquons-nous à la partie CSS !


    Deuxième partie : CSS.

    Allez, je sens que vous en avez marre, alors voici le code CSS :
    Code:
    .description3 {
      display: block;
      width: 200px;
      margin: auto;
      height: 200px;
      overflow: hidden;
      transition:0.4s ease;
    }

    .description3:hover {
      display: block;
      width: 200px;
      margin: auto;
      height: 400px;
      overflow: hidden;
    }

    .description3_contenu {
      position: absolute;
      width: 200px;
      height: 400px;
      overflow: 400px;
      background-color: #EFE9DD;
      font-size: 11.5px;
      font-family:'Georgia';
      color: #3E352E;
      text-align: justify;
      padding:0px;
      opacity: 0;
      transform: all;
      transition: 1s;
    }
    .description3_contenu:hover {
      opacity: 0.8;
      transform: all;
      transition: 1s;
    }
    Kézako ?

    • description3 contient l'avatar. Comme au départ, l'avatar est en partie caché, il faut réduire ses dimensions (ici 200*200) et lui mettre un overflow:hiddenpour l'empêcher de dépasser. Ensuite, la partie description3:hover est celle où l'on indique que les dimensions changent au passage de la souris.
    • description3_contenu est ce qui va s'afficher au passage de la souris, ici le nom du membre, son nombre de message et sa date d'inscription. Cependant, il doit être invisible quand la souris n'est pas dessus, d'où le opacity:0 qui le rend totalement transparent. La partie description3_contenu:hover est celle qui va indiquer que au passage de la souris, l'opacity augmentera.



    Vous savez tout ! Ah ? Vous vous êtes perdus en chemin ? Bon, je suis gentil et je vous donne le code terminé.


    Troisième partie : Le code tout fini tout beau.

    Remplacer le contenu du template memberlist_body par celui-ci :

    Code:
    <form action="{S_MODE_ACTION}" method="get">
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
       <tr>
          <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
       </tr>
       <tr>
          <td class="row1">
          <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
             <tr>
                <td width="100%">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
                {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
                {L_ORDER} {S_ORDER_SELECT}      
                {S_HIDDEN_SID}
                <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
             </tr>
          </table>
          </td>
       </tr>
    </table>
    </form>
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <tr>
          <th class="thCornerL" nowrap="nowrap" height="25">#</th>
          <th class="thTop" nowrap="nowrap">Avatar</th>
          <!-- BEGIN switch_th_group -->
          <th class="thTop" nowrap="nowrap">{L_GROUPS}</th>
          <!-- END switch_th_group -->
          <th class="thTop" nowrap="nowrap">{L_INTERESTS}</th>
          <th class="thTop" nowrap="nowrap">{L_VISITED}</th>
          <th class="thTop" nowrap="nowrap">{L_PM}</th>
          <th class="thCornerR" nowrap="nowrap">{L_WEBSITE}</th>
       </tr>
       <!-- BEGIN memberrow -->
       <tr>
          <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen"> {memberrow.ROW_NUMBER} </span></td>
          <td class="{memberrow.ROW_CLASS}" align="center">
                      <div class="description3"><div style="display: block; text-align: center; width: 200px; height:400px; overflow:visible;">{memberrow.AVATAR_IMG}<div class="description3_contenu" style="margin-top:-400px;"><div style="OVERFLOW: auto; width: 190px; height: 390px; padding: 5px;font-variant:small-caps; text-shadow:1px 1px 1px white; font-size:14px;"><br />{memberrow.USERNAME}.<br />{memberrow.POSTS} messages.<br />Inscrit le {memberrow.JOINED}.</div></div></div></div></td>
              
          <!-- BEGIN switch_td_group -->
          <td class="{memberrow.ROW_CLASS}" align="center"><span class="gen">{memberrow.GROUPS}</span></td>
          <!-- END switch_td_group -->
          <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gen">{memberrow.INTERESTS}</span></td>
          <td class="{memberrow.ROW_CLASS}" align="center" valign="middle"><span class="gensmall">{memberrow.LASTVISIT}</span></td>
          <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.PM_IMG} </td>
          <td class="{memberrow.ROW_CLASS}" align="center"> {memberrow.WWW_IMG}&nbsp;</td>
       </tr>
       <!-- END memberrow -->
       <!-- BEGIN switch_no_user -->
       <tr>
          <td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
       </tr>
       <!-- END switch_no_user -->
    </table>
    <!-- BEGIN switch_pagination -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td><span class="nav">{PAGE_NUMBER}</span></td>
          <td align="right"><span class="nav">{PAGINATION}</span></td>
       </tr>
    </table>
    <br />
    <!-- END switch_pagination -->
    Ajoutez ce code à votre feuille de style CSS

    Code:
    .description3 {
      display: block;
      width: 200px;
      margin: auto;
      height: 200px;
      overflow: hidden;
      transition:0.4s ease;
    }

    .description3:hover {
      display: block;
      width: 200px;
      margin: auto;
      height: 400px;
      overflow: hidden;
    }

    .description3_contenu {
      position: absolute;
      width: 200px;
      height: 400px;
      overflow: 400px;
      background-color: #EFE9DD;
      font-size: 11.5px;
      font-family:'Georgia';
      color: #3E352E;
      text-align: justify;
      padding:0px;
      opacity: 0;
      transform: all;
      transition: 1s;
    }
    .description3_contenu:hover {
      opacity: 0.8;
      transform: all;
      transition: 1s;
    }
    Et voilà ! A vous de jouer !




    Pas souvent là, mais je vous aime quand même très fort ! Étudiant en prépa littéraire, quand j'en ai marre de pas comprendre ce que je lis, je code pour ne plus comprendre non plus ce que j'écris.
    • Revenir en haut
    Anonymous
    Invité

    Mar 26 Mai 2015 - 15:27

    Merci pour le tuto ! Ça a l'air bien pratique =D
    • Revenir en haut
    Anazera
    Anazera
    MasculinAge : 27Messages : 37

    Mer 27 Mai 2015 - 2:42

    Merci
    • Revenir en haut
    Wolf_silver
    Wolf_silver
    MasculinAge : 25Messages : 4

    Mer 27 Mai 2015 - 19:21

    Merci! Curieux de voir ce que ça va donner ^^
    • Revenir en haut
    lolo0302
    lolo0302
    MasculinAge : 35Messages : 7

    Jeu 28 Mai 2015 - 23:29

    Merci
    • Revenir en haut
    Bellabimbo444
    Bellabimbo444
    FémininAge : 25Messages : 61

    Sam 30 Mai 2015 - 10:54

    merci



    • Revenir en haut
    Zaidko
    Zaidko
    FémininAge : 21Messages : 81

    Lun 15 Juin 2015 - 17:16

    Merci du partage ! :)
    • Revenir en haut
    AkaZukin
    AkaZukin
    FémininAge : 29Messages : 35

    Lun 15 Juin 2015 - 20:22

    Merci du partage. ^-^
    • Revenir en haut
    Anarchy Rose
    Anarchy Rose
    FémininAge : 29Messages : 60

    Jeu 18 Juin 2015 - 12:59

    merci Very Happy
    • Revenir en haut
    Marion Navi
    Marion Navi
    FémininAge : 30Messages : 183

    Lun 22 Juin 2015 - 11:14

    Merci
    • Revenir en haut
    Flitch
    Flitch
    MasculinAge : 35Messages : 45

    Lun 29 Juin 2015 - 0:34

    merci Very Happy
    • Revenir en haut
    Ajartielle
    Ajartielle
    FémininAge : 35Messages : 87

    Lun 29 Juin 2015 - 2:00

    Ce serait bien d'expliquer un peu ce que ça signifie "Dynamiser la page "Membres"". Étant dans l'ignorance, je dis merci... peut-être... x)
    • Revenir en haut
    Lessien
    Lessien
    FémininAge : 41Messages : 163

    Mar 30 Juin 2015 - 23:51

    Merci :)
    • Revenir en haut
    Eleania Madena
    Eleania Madena
    FémininAge : 26Messages : 90

    Ven 3 Juil 2015 - 18:24

    Merci beaucoup !




    • Revenir en haut
    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Lun 6 Juil 2015 - 3:05

    MERKI
    • Revenir en haut
    Eden Memories
    Eden Memories
    FémininAge : 36Messages : 211

    Lun 6 Juil 2015 - 15:29

    j'suis curieuse!



    • Revenir en haut
    Lexa Commander
    Lexa Commander
    FémininAge : 25Messages : 53

    Mer 8 Juil 2015 - 19:58

    Merci :o
    • Revenir en haut
    Kenway Kioshi
    Kenway Kioshi
    MasculinAge : 28Messages : 64

    Jeu 9 Juil 2015 - 0:48

    Merci ! :)
    • Revenir en haut
    potion
    potion
    FémininAge : 37Messages : 33

    Sam 11 Juil 2015 - 9:41

    thanks
    • Revenir en haut
    Smikyou
    Smikyou
    FémininAge : 30Messages : 85

    Sam 11 Juil 2015 - 10:59

    Merci
    • Revenir en haut
    SethGuex
    SethGuex
    MasculinAge : 24Messages : 7

    Dim 12 Juil 2015 - 1:39

    Eliot a écrit:Merci !
    • Revenir en haut
    Lamire
    Lamire
    FémininAge : 30Messages : 96

    Lun 13 Juil 2015 - 2:25

    Merci ^^
    • Revenir en haut
    Zuny
    Zuny
    FémininAge : 30Messages : 18

    Mer 15 Juil 2015 - 13:31

    Merci =)
    • Revenir en haut
    Ly'
    Ly'
    FémininAge : 26Messages : 5

    Mer 15 Juil 2015 - 19:43

    Merci !
    • Revenir en haut
    Nevida
    Nevida
    FémininAge : 32Messages : 33

    Jeu 16 Juil 2015 - 12:03

    Merci pour le partage , je vais tenter :)
    • Revenir en haut
    Windae
    Windae
    FémininAge : 29Messages : 13

    Dim 19 Juil 2015 - 15:18

    Merci pour le partage Very Happy
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 19 Mai 2024 - 20:41