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.

Le Deal du moment : -36%
-36% sur la pot à plante en lévitation ...
Voir le deal
53.63 €

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

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

    le 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 2 953155exemple1 => Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 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
    blueberrybear
    blueberrybear
    FémininAge : 29Messages : 15

    le Sam 23 Juin 2012 - 10:59

    Merciii beaucoup <3
    Aki'
    Aki'
    FémininAge : 24Messages : 258

    le Sam 23 Juin 2012 - 11:26

    Merci bien
    Super Captain
    Super Captain
    MasculinAge : 29Messages : 33

    le Sam 23 Juin 2012 - 17:01

    merci beaucoup :)



    i m j u s t a p a t c h e d u p マトリョシカ! (o`皿′o)♥
    Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 Tumblr_lmqy8iZxzx1qam1cxo1_500
    Kyoraku Shunsui
    Kyoraku Shunsui
    MasculinAge : 26Messages : 864

    le Sam 23 Juin 2012 - 21:22

    Merci !
    Ju' de fruits
    Ju' de fruits
    FémininAge : 27Messages : 82

    le Dim 24 Juin 2012 - 14:04

    Merci !



    Okoia
    Okoia
    FémininAge : 27Messages : 30

    le Dim 24 Juin 2012 - 18:56

    Merci ^^
    Anonymous
    Invité

    le Lun 25 Juin 2012 - 14:50

    Thanks
    Milkshake
    Milkshake
    FémininAge : 21Messages : 29

    le Lun 25 Juin 2012 - 21:09

    merci beaucoup je le cherchais !
    Morphine.
    Morphine.
    FémininAge : 30Messages : 41

    le Lun 25 Juin 2012 - 22:56

    Merci pour ce tuto. :)



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 30st6
    Killike
    Killike
    FémininAge : 26Messages : 33

    le Mar 26 Juin 2012 - 23:39

    WHoua c'est exactement se que je cherchais *^* merci beaucoup!



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 Essaie4
    Celska
    Celska
    FémininAge : 25Messages : 39

    le Mer 27 Juin 2012 - 15:04

    Merci ! \o/



    NORTH WITCH ♒
    image de l'avatar par Fernanda Suarez (c)
    3uphemia
    3uphemia
    FémininAge : 26Messages : 28

    le Jeu 28 Juin 2012 - 12:40

    Merci bien captain.
    Aeden
    Aeden
    FémininAge : 31Messages : 59

    le Jeu 28 Juin 2012 - 17:41

    Merci ^^



    Xplo-Sion
    Xplo-Sion
    FémininAge : 26Messages : 266

    le Ven 29 Juin 2012 - 7:06

    Merci :)



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 121926034f5e3fbba2a48
    Tamashi
    Tamashi
    MasculinAge : 25Messages : 57

    le Ven 29 Juin 2012 - 7:30

    merci
    Yunaly
    Yunaly
    FémininAge : 18Messages : 52

    le Lun 5 Mai 2014 - 22:25

    Merci beaucoup ! ^^
    lilissa
    lilissa
    FémininAge : 27Messages : 31

    le Lun 5 Mai 2014 - 22:32

    merci beaucoup ♥
    SpicAsh
    SpicAsh
    FémininAge : 24Messages : 176

    le Mar 6 Mai 2014 - 3:52

    Merci !
    Asriel
    Asriel
    FémininAge : 25Messages : 121

    le Mar 6 Mai 2014 - 17:42

    Merci du partage ! Wink



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 Fullmetal-alchemist
    Amariem
    Amariem
    FémininAge : 21Messages : 98

    le Mar 6 Mai 2014 - 22:55

    Essayons ça... Merci du partage !



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 2 241091dfsdfds
    Callisto
    Callisto
    FémininAge : 24Messages : 44

    le Mer 7 Mai 2014 - 8:32

    Just awesome ~ merci
    rutledge
    rutledge
    FémininAge : 25Messages : 4

    le Jeu 8 Mai 2014 - 16:41

    Merci beaucoup ! :hug:
    Rococo
    Rococo
    MasculinAge : 25Messages : 28

    le Jeu 8 Mai 2014 - 19:41

    Merci beaucoup.
    Dearborn
    Dearborn
    FémininAge : 26Messages : 112

    le Jeu 8 Mai 2014 - 21:50

    merci du partage :3!
    Sue Sheeran
    Sue Sheeran
    FémininAge : 22Messages : 27

    le Ven 9 Mai 2014 - 14:36

    merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Jan 2021 - 14:27