AccueilRechercherS'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.

-40%
Le deal à ne pas rater :
-40% sur la barre de son Yamaha YAS-108
179.99 € 299.99 €
Voir le deal

    LS Fondu avatar avec infos derrière

    Littleelda
    Littleelda
    FémininAge : 30Messages : 49

    le Dim 18 Mar 2018 - 11:36

    Fondu Avatar dans la Liste de Membres




    Ce LS est pour forum en PHPBB2.


    Bonjour,

    Alors je propose un LS pour l'affichage de la liste des membres. Il s'agit d'une refonte du LS déposée par Marie(Allhyka) juste , qui m'a servi de base pour faire cette LS. J'ai changé pas mal d'éléments afin de l'adapter au codage dans ma section "affichage d'un sujet" donc je me suis ajoutée sur le copyright. A vous de voir si c'est mérité ou non.


    Alors voici une mise en page pour l'affichage de la liste des membres. On y affiche les avatars qui, au passage de la souris font un fondu pour afficher les éléments du profil.

    Aperçus : Normal et Ouvert

    Alors tout d'abord, rendez vous sur le panneau d'administration -> Affichage ->Templates (section Général) -> memberlist_body (liste des membres)

    et changer le tout pour celui-ci :

    Code:
    <!-- BEGIN switch_user_logged_in -->
    <p class="right rightside">{LAST_VISIT_DATE}</p>
    <!-- END switch_user_logged_in -->

    <p>{CURRENT_TIME}</p>
    <div class="titrePA row2">{PAGE_TITLE}

        <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 row2" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />   
                        {L_SELECT_SORT_METHOD} {S_MODE_SELECT}   
                        {L_ORDER} {S_ORDER_SELECT}    &nbsp;
                        {S_HIDDEN_SID}
                        <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
                    </tr>
                  </table>
                  </td>
              </tr>
            </table>
            </form>
         
            <!-- BEGIN memberrow -->
           
                  <div class="memberlist">
                <div class="facebase">
                   <div class="flip">
                      <div class="face1"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
                   </div>
                   <div class="face2">
                                <div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
                                <div class="stat_member"> Arrivé(e) le : {memberrow.JOINED}. <br/><br/>Dernière errance : {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Le joindre : {memberrow.PM_IMG}</div></div></div></div>
                        </div>
              <!-- END memberrow -->
              <!-- BEGIN switch_no_user -->
           
              <!-- END switch_no_user -->
         
                <br/><div class="copyright_memberlist">Codé par Allhyka et modifié par Littleelda pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></div>
         
            <!-- 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 -->
    </div>




    Enregistrez puis allez dans le CSS (Affichage ->Images et Couleurs (Couleur) -> Feuilles de style CSS) et ajoutez ce code-ci

    Code:
     
        /**** CODE PAR MARIE, MODIFIE PAR LITTLEELDA POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

        /**** AFFICHAGE MEMBRER LISTE****/

        .memberlist {
        display:inline-block;
        vertical-align:top;
        margin-bottom: 15px;
        margin-right: 10px;
       margin-left:10px;
       margin-top: 15px;
        }

        /*** FORMAT DE L'IMAGE DE L'AVATAR ***/
       
        .avatar_member_list img{/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
          width:150px;
          height:300px;
        }


        /*** L'ANIMATION FLIP CARD ***/
       
       .facebase, .face1, .face2 {
            width: 150px;/*largeur de l'avatar*/
              height: 300px;/*hauteur de l'avatar*/

            }

       .facebase{
          margin: 0;
          position: relative;
          box-shadow : 1px 2px 9px 5px rgba(66,101,90,0.8);
          background-color: #9AB8AF;
    }
          
        .flip {
          -moz-transition: all 1.5s ease-in-out;
          -ms-transition: all 1.5s ease-in-out;
          -o-transition: all 1.5s ease-in-out;
          -webkit-transition: all 1.5s ease-in-out;
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          transition: all 1.5s ease-in-out;
          width: 100%;
          z-index: 2;
        }

        .face1 {
          background-color: #9AB8AF;
          left: 0;
          position: absolute;
          top: 0;
          z-index: 3;
          transition: all 1.5s ease-in-out;
        }

        .face2 {
          border-bottom: 2px solid #39210c;
          border-top: 2px solid #39210c;
          box-sizing: border-box;
          font-size: 13px;
          left: 0;
          overflow: auto;
          padding: 15px;
          position: absolute;
          top: 0;
          z-index: 0;
    }

          .facebase:hover > .face2 {
             display: block;
             z-index:5;
          }

        .facebase:hover .face1 {
              opacity: 0.2;
              filter: alpha(opacity=20);
            -moz-opacity:0.5;
              z-index:1;
        }

        /*** DERRIERE L'AVATAR ***/

        .pseudo_member {
       
        font-family: Cinzel Decorative, cursive; /**L'écriture**/
          text-align: center;
          color: #000;
          line-height: 100%;
          font-size: 14px;
          text-transform: uppercase;
        }

        .stat_member {
          font-size: 10px;
          text-align: left;
        }

        .groups {
          font-family: arial; /**L'écriture**/
          text-align: center;
          font-size: 7px;
          color: #000;
          line-height: 100%;
          text-transform: uppercase;
          margin-bottom: 5px;
          border-bottom:1px solid #000;
        }


        .copyright_memberlist {
        font-size: 10px;
        text-align: right;
        font-family: georgia;
        }

    Et enfin enregistrez et normalement tout est bon. Si vous avez des questions, n'hésitez pas à les poser. =)




    LS Fondu avatar avec infos derrière Elora_10
    Littleelda
    Littleelda
    FémininAge : 30Messages : 49

    le Lun 19 Mar 2018 - 15:54

    Bonjour, j'ai apporté des modifications sur le code car j'ai vu après coup qu'il y avait conflit. Le soucis est résolu et je pense que tout est bon. A voir de votre côté =)



    LS Fondu avatar avec infos derrière Elora_10
    NyoTheNeko
    NyoTheNeko
    FémininAge : 26Messages : 5686

    le Mar 24 Déc 2019 - 10:49

    Hello Littleelda !
    Merci beaucoup pour ta proposition ! J'ai ajouté des tags et changé juste la petite erreur qui s'est placée dans le CSS, mais sinon tout em semble bon ! Du coup je classe !



    Kelalin
    Kelalin
    FémininAge : 27Messages : 2234

    le Mer 25 Déc 2019 - 17:27

    Merci pour le partage !
    Contenu sponsorisé


      La date/heure actuelle est Mer 5 Aoû 2020 - 6:39