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 du moment :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Cacher le profil sous l'avatar (dévoilé en hover)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 14 Juin 2012 - 16:26

    Rappel du premier message :

    Bonjour !

    Un petit code pour gagner un peu de place dans le profil des messages souvent très long : cacher le profil ! Contrairement à d'autres codes où celui-ci est mis en spoiler, ici il est présent sous l'avatar du joueur et il faut survoler celui-ci pour voir les informations du profil.

    Le résultat en images :

    Cacher le profil sous l'avatar (dévoilé en hover) - Page 6 953155exemple1 => Cacher le profil sous l'avatar (dévoilé en hover) - Page 6 226061exemple2

    Pour faire ce tutoriel vous aurez besoin de :
    - modifier le template viewtopic_body
    - ajouter un peu de CSS dans votre Feuille CSS
    - définir une taille fixe des avatars pour les membres, donc leur imposer une taille précise qui est dans mon exemple la plus répandue actuellement à savoir 200*320

    Commençons par bouger les choses dans notre template !

    Allez dans Affichage > Templates > Général > viewtopic_body (affichage d'un sujet)

    Repérez à la ligne 90 cette partie là :

    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>

    Indication : le "td" ouvrant une case de tableau, ceci correspond à toute la case de profil, à droite du message.

    Remplacez ce morceau par ceci :

    Code:
    <!--Début de la modification pour l'apparence de l'avatar avec effet masqué-->

    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
    <!--Code affichage dernier message posté-->  <a name="{postrow.displayed.U_POST_ID}"></a>
         
                      <span class="rang_mess">{postrow.displayed.RANK_IMAGE}</span>
                 
                      <span class="avatar_mess"><span class="profil_mess"><!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                        {postrow.displayed.POSTER_RPG}</span>
                        {postrow.displayed.POSTER_AVATAR}</span>
                 
                      <span class="pseudo_mess">
    <!--Tentative d'ajout du rang-->             
    {postrow.displayed.POSTER_RANK}<br />
    <font size=3><b>{postrow.displayed.POSTER_NAME}</b></font></span>             
               
          </td>



    <!--fin de la modification pour l'apparence de l'avatar avec effet masqué-->

    Constatez que je n'ai pas modifié la structure elle-même, j'ai laissé la case, seul le contenu est bougé.
    N'oubliez pas de valider votre template !


    ▬ Allons ensuite ajouter le CSS

    Allez dans Affichage > Couleurs > Feuille css et copiez ce code :

    Code:
    .avatar_mess
    {
      display: block;
      width: 200px;
      height: 320px;
      margin-left: -10px;
      margin-right: 10px;
      overflow: hidden;
      background: #272726;
      border: 5px solid #3e1d19;
      transform: rotate(-5deg);
      -moz-transform: rotate(-5deg);
      -o-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
      -htm-transform: rotate(-5deg);
      -webkit-transform: rotate(-5deg);
      box-shadow: 0px 0px 6px #000000;
      -moz-box-shadow: 0px 0px 6px #000000;
      -o-box-shadow: 0px 0px 6px #000000;
      -htm-box-shadow: 0px 0px 6px #000000;
      -webkit-box-shadow: 0px 0px 6px #000000;
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .avatar_mess:hover
    {
      margin-left: 5px;
      transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -htm-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .profil_mess
    {
      position: absolute;
      display: block;
      width: 190px;
      height: 310px;
      margin: auto;
      padding: 5px;
      overflow: auto;
      background: #6b664e;
      color: #c5bea0;
      font-size: 11px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .profil_mess:hover
    {
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
          transform: all;
    -moz-transform: all;
    -o-transform: all;
    -htm-transform: all;
    -webkit-transform: all;
    transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    -htm-transition: 1s;
    -webkit-transition: 1s;
    }
    .pseudo_mess
    {
      display: block;
      position: relative;
      z-index: 2;
      width: 190px;
      margin-top: -15px;
      margin-left: 10px;
      text-align: center;
      font-size: 18px;
      font-family: courier;
      font-weight: bold;
      text-shadow: 0px 0px 3px #c5bea0;
      background: #94855c;
      padding-top: 5px;
      border-left: 3px solid #371e1a;
      border-right: 3px solid #371e1a;
      border-top: 1px solid #371e1a;
      border-bottom: 1px solid #371e1a;
      box-shadow: 0px 0px 3px #000000;
      -moz-box-shadow: 0px 0px 3px #000000;
      -o-box-shadow: 0px 0px 3px #000000;
      -htm-box-shadow: 0px 0px 3px #000000;
      -webkit-box-shadow: 0px 0px 3px #000000;
    }

    Vous pouvez ensuite adapter les couleurs de cadre, fond ou ombre portée, la police, etc...


    Si vous utilisez ce tutoriel pour votre forum, merci de mettre un crédit à Never-Utopia ! Cela ne représente pas grand chose pour vous, mais beaucoup pour nous Wink

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Onyx le Sam 5 Mai 2018 - 23:25, édité 4 fois (Raison : Merci à ninouee pour la correction d'un oublie d'élément du code)



    sign
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Mer 25 Juin 2014 - 14:56

    Merci !
    Liu-1
    Liu-1
    FémininAge : 24Messages : 7

    Mer 25 Juin 2014 - 22:12

    Euh ...... je trouve pas le code pour le template



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 6 Futur10
    Tempy
    Tempy
    FémininAge : 25Messages : 76

    Ven 27 Juin 2014 - 23:12

    Merci du partage !
    Heartfilia
    Heartfilia
    FémininAge : 24Messages : 98

    Sam 28 Juin 2014 - 20:13

    Merci ! *^*



    YOU HELLA SAVED MY LIFE
    - chloe price
    taissafarmiga
    taissafarmiga
    FémininAge : 23Messages : 6

    Sam 28 Juin 2014 - 22:30

    Merci !
    Noizy.
    Noizy.
    MasculinAge : 25Messages : 43

    Dim 29 Juin 2014 - 14:22

    merci
    Yukiji
    Yukiji
    MasculinAge : 23Messages : 115

    Lun 30 Juin 2014 - 0:50

    Merci!



    (c) sygea
    Vegvisir
    Vegvisir
    FémininAge : 24Messages : 411

    Lun 30 Juin 2014 - 14:08

    J'avais déjà dit merci, mais vu que je n'accède plus aux codes, je reposte un tit message x)



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 6 1
    Stitch56
    Stitch56
    FémininAge : 30Messages : 209

    Lun 30 Juin 2014 - 20:46

    Marchi ça ait plaisir Dabisous ♥
    Kathee
    Kathee
    FémininAge : 30Messages : 680

    Mar 1 Juil 2014 - 15:32

    Merci beaucoup Sparrow, c'est magnifique ><





    Forum dérivé ouat
    dans un univers steampunk :heart:
    Anguis
    Anguis
    FémininAge : 32Messages : 28

    Mer 2 Juil 2014 - 16:09

    merci :)
    LatInna
    LatInna
    FémininAge : 28Messages : 26

    Mer 2 Juil 2014 - 19:25

    J'adore, merci beaucoup !




    Changement de PSEUDO

    LatInna devient Lylytaly.
    Cacher le profil sous l'avatar (dévoilé en hover) - Page 6 Brendon-urie-gif-17
    Mello
    Mello
    FémininAge : 26Messages : 52

    Jeu 3 Juil 2014 - 16:23

    Merci
    PrincesseÔ
    PrincesseÔ
    FémininAge : 26Messages : 220

    Ven 4 Juil 2014 - 21:27

    Merci c'est sympatoche comme code :3
    Marwin
    Marwin
    MasculinAge : 31Messages : 47

    Dim 6 Juil 2014 - 2:09

    Merci °1)
    Anonymous
    Invité

    Dim 6 Juil 2014 - 12:20

    Merci ^^'
    Archeos
    Archeos
    FémininAge : 27Messages : 60

    Lun 7 Juil 2014 - 10:16

    Merci pour le partage :)



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 6 120523094846729821
    Doctor Who
    Doctor Who
    MasculinAge : 30Messages : 160

    Lun 7 Juil 2014 - 13:35

    Merci x)





    DOCTOR WHO ☼
    ©️ Yamashita d'épicode
    smily
    smily
    FémininAge : 25Messages : 66

    Mer 9 Juil 2014 - 16:06

    Merci !
    avatar
    Claclou02
    FémininAge : 25Messages : 46

    Mer 9 Juil 2014 - 19:10

    Merci !
    Zeroo
    Zeroo
    FémininAge : 29Messages : 76

    Jeu 10 Juil 2014 - 11:55

    Un code qui me sera très utile...
    Un grand merci à toi ^^
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Ven 11 Juil 2014 - 10:58

    Merci !
    Anonymous
    Invité

    Dim 13 Juil 2014 - 18:31

    Merchi!
    stubbornEmpire
    stubbornEmpire
    FémininAge : 24Messages : 38

    Dim 13 Juil 2014 - 20:27

    Merci beaucoup, c'est génial!
    Myfanwi
    Myfanwi
    FémininAge : 26Messages : 97

    Lun 14 Juil 2014 - 16:37

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:41