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 : -33%
Ecran PC XIAOMI – 24″ – MI MONITOR 1C
Voir le deal
99.99 €

    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 5 953155exemple1 => Cacher le profil sous l'avatar (dévoilé en hover) - Page 5 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
    Ukrysis
    Ukrysis
    FémininAge : 24Messages : 64

    le Sam 7 Juin 2014 - 23:02

    Merci *-*
    avatar
    Fragile
    FémininAge : 27Messages : 6

    le Dim 8 Juin 2014 - 0:31

    ty !
    avatar
    Lupa
    FémininAge : 24Messages : 183

    le Lun 9 Juin 2014 - 15:34

    Hâte de voir cela, merci d'avance ^-^



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    Kyuzo Seyki
    Kyuzo Seyki
    MasculinAge : 29Messages : 11

    le Mar 10 Juin 2014 - 23:30

    Mercii :)
    Grande
    Grande
    FémininAge : 33Messages : 207

    le Jeu 12 Juin 2014 - 21:22

    merci



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 5 171074gwenj10
    Shinju.dot
    Shinju.dot
    FémininAge : 31Messages : 88

    le Ven 13 Juin 2014 - 10:37

    merci
    Sunn
    Sunn
    MasculinAge : 25Messages : 24

    le Ven 13 Juin 2014 - 19:59

    Merci !
    Le Dévoreur de temps
    Le Dévoreur de temps
    MasculinAge : 41Messages : 92

    le Ven 13 Juin 2014 - 22:04

    Bonsoir,

    J'aime beaucoup ces avatars qui cachent des secrets. Merci pour le partage!
    Risa
    Risa
    FémininAge : 32Messages : 260

    le Ven 13 Juin 2014 - 23:05

    Merci beaucoup !
    Raween
    Raween
    FémininAge : 29Messages : 112

    le Sam 14 Juin 2014 - 16:58

    Merci beaucoup ^^
    Nonze
    Nonze
    MasculinAge : 27Messages : 85

    le Sam 14 Juin 2014 - 22:05

    Merci
    Tatia38
    Tatia38
    FémininAge : 31Messages : 308

    le Sam 14 Juin 2014 - 23:15

    merci
    Jona'
    Jona'
    MasculinAge : 22Messages : 65

    le Dim 15 Juin 2014 - 14:53

    Merci



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 5 292891SIGNATUREIrumaNekoGirl
    hirondelle
    hirondelle
    FémininAge : 31Messages : 134

    le Dim 15 Juin 2014 - 16:26

    Merci beaucoup ♥
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 23Messages : 83

    le Lun 16 Juin 2014 - 14:18

    Merci :)
    sunalibi
    sunalibi
    FémininAge : 35Messages : 5

    le Mar 17 Juin 2014 - 11:51

    Merci beaucoup !
    Ilfasidrel
    Ilfasidrel
    FémininAge : 22Messages : 36

    le Mar 17 Juin 2014 - 13:35

    Merci!
    Ahila
    Ahila
    FémininAge : 27Messages : 107

    le Mar 17 Juin 2014 - 16:06

    Chouette merci!
    Koyangi
    Koyangi
    FémininAge : 23Messages : 15

    le Mar 17 Juin 2014 - 19:27

    Merci beaucoup !
    teteaclaquefr
    teteaclaquefr
    MasculinAge : 29Messages : 39

    le Mar 17 Juin 2014 - 21:50

    Merci beaucoup !
    Mephitis.
    Mephitis.
    FémininAge : 22Messages : 46

    le Jeu 19 Juin 2014 - 0:23

    Merci o/
    elsa2607
    elsa2607
    FémininAge : 22Messages : 81

    le Ven 20 Juin 2014 - 19:28

    Mercii !



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 5 Stvale10
    Shuna
    Shuna
    FémininAge : 26Messages : 137

    le Sam 21 Juin 2014 - 21:30

    merci ^^
    Sekai
    Sekai
    FémininAge : 22Messages : 20

    le Lun 23 Juin 2014 - 2:55

    Merci !
    Loupiotte-Fr
    Loupiotte-Fr
    FémininAge : 24Messages : 27

    le Mar 24 Juin 2014 - 18:42

    Merci ♥



    Once Upon a Time
    ... Réécrit l'histoire ...
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Jan 2021 - 11:58