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.


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

    Okhmhaka
    Okhmhaka
    FémininAge : 34Messages : 31851

    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 29 953155exemple1 => Cacher le profil sous l'avatar (dévoilé en hover) - Page 29 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://illiweb.com/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)



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 29 Unchai10
    Arkaline
    Arkaline
    FémininAge : 28Messages : 195

    le Ven 7 Juil 2017 - 12:03

    Merci !



    Arkaline
    PlagueMage
    PlagueMage
    FémininAge : 25Messages : 1

    le Lun 17 Juil 2017 - 4:29

    Oh oui, merci !
    Voila un moment que j'essayais des codes pour mettre, ne serait-ce que la fiche de personnage en spoiler, sans y arriver. Je pense qu'avec ça, au moins, ça réglera le soucis. Merci ♥
    Destan
    Destan
    MasculinAge : 41Messages : 37

    le Mar 25 Juil 2017 - 17:58

    Merci
    Afterglow
    Afterglow
    FémininAge : 24Messages : 138

    le Mar 22 Aoû 2017 - 22:03

    Merci ^^



    How do you get up from an all time low?
    Ahina
    Ahina
    FémininAge : 38Messages : 65

    le Sam 26 Aoû 2017 - 11:14

    merci pour ce code ^_^
    Karlito
    Karlito
    MasculinAge : 22Messages : 4

    le Sam 26 Aoû 2017 - 16:46

    Merci, lol, je suis Karlito, lol.
    Qasim67
    Qasim67
    MasculinAge : 26Messages : 7

    le Sam 26 Aoû 2017 - 19:30

    Merci beaucoup!
    Versatis35
    Versatis35
    MasculinAge : 19Messages : 6

    le Lun 28 Aoû 2017 - 17:02

    Merci
    Shin Kiryu
    Shin Kiryu
    MasculinAge : 18Messages : 41

    le Ven 1 Sep 2017 - 19:30

    Merci !
    Azzurra Bluefox
    Azzurra Bluefox
    FémininAge : 19Messages : 2

    le Mar 5 Sep 2017 - 0:46

    merci o/
    Deed01
    Deed01
    MasculinAge : 41Messages : 340

    le Jeu 9 Nov 2017 - 7:03

    thanks Very Happy
    Doriand
    Doriand
    MasculinAge : 28Messages : 91

    le Jeu 9 Nov 2017 - 13:12

    merci
    Yovoed
    Yovoed
    FémininAge : 20Messages : 61

    le Sam 18 Nov 2017 - 20:11

    Merci :heart:
    Tigriss
    Tigriss
    FémininAge : 24Messages : 9

    le Lun 20 Nov 2017 - 2:49

    Waw, j'adore merci beaucoup :lovebomb:
    Panzerblitz-1
    Panzerblitz-1
    MasculinAge : 20Messages : 59

    le Mer 6 Déc 2017 - 18:32

    Merci
    Sentinelle
    Sentinelle
    FémininAge : 28Messages : 3

    le Mer 20 Déc 2017 - 22:53

    Merci
    Piccosan
    Piccosan
    FémininAge : 30Messages : 6

    le Ven 22 Déc 2017 - 18:51

    Merci o/
    Kyuujin
    Kyuujin
    MasculinAge : 22Messages : 12

    le Dim 7 Jan 2018 - 16:02

    Gracie !
    Novatrix
    Novatrix
    FémininAge : 25Messages : 30

    le Mar 9 Jan 2018 - 15:41

    Merci ♥
    sanin
    sanin
    MasculinAge : 24Messages : 2

    le Lun 16 Avr 2018 - 18:35

    merci
    Valeriane
    Valeriane
    FémininAge : 34Messages : 28

    le Ven 27 Juil 2018 - 0:25

    bloup
    Adriano37
    Adriano37
    MasculinAge : 20Messages : 4

    le Lun 30 Juil 2018 - 12:28

    Merci
    Neko-chan
    Neko-chan
    FémininAge : 20Messages : 36

    le Lun 12 Aoû 2019 - 18:33

    Merci énormément ! Je cherchais comment faire, afin d'apporter un effet plus épuré, et ça semble super simple, donc c'est juste nikel. Merci encore !



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 29 553970miku1
    Contenu sponsorisé


      La date/heure actuelle est Mer 23 Oct 2019 - 9:38