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 : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

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

    Jeu 19 Fév 2015 - 16:31

    Merci!!
    Blem.
    Blem.
    FémininAge : 26Messages : 54

    Ven 20 Fév 2015 - 21:41

    Marchi beaucoup ! C'est tout tout chouette ! :)



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 15 1424480619-sign
    Idril Palanén
    Idril Palanén
    FémininAge : 31Messages : 83

    Mer 25 Fév 2015 - 14:57

    Merci beaucoup pour ce code je pense que je vais l'utiliser et en plus les couleurs correspondent avec mon thème actuel ! :)
    -Jukai.
    -Jukai.
    MasculinAge : 31Messages : 18

    Ven 27 Fév 2015 - 16:25

    Merci du partage !
    avatar
    underland
    FémininAge : 24Messages : 12

    Dim 1 Mar 2015 - 13:06

    Très joli et pratique,

    Merci du partage (:
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Mar 3 Mar 2015 - 20:17

    Merci *-*
    Girly
    Girly
    FémininAge : 26Messages : 116

    Mar 3 Mar 2015 - 20:38

    meci
    Haniwa
    Haniwa
    FémininAge : 29Messages : 206

    Mer 4 Mar 2015 - 16:20

    Merci
    Silver Blast
    Silver Blast
    MasculinAge : 24Messages : 78

    Jeu 5 Mar 2015 - 19:58

    Jolie♥ merci
    Caine Lornan
    Caine Lornan
    MasculinAge : 42Messages : 87

    Lun 9 Mar 2015 - 10:57

    Thanks
    EOS
    EOS
    MasculinAge : 31Messages : 34

    Mar 10 Mar 2015 - 19:32

    Merci
    Leelo
    Leelo
    FémininAge : 32Messages : 157

    Mer 11 Mar 2015 - 17:23

    merci
    Prismatic
    Prismatic
    FémininAge : 25Messages : 31

    Ven 13 Mar 2015 - 18:43

    Merci beaucoup je vais essayer tout de suite *-*
    The Shiya
    The Shiya
    FémininAge : 34Messages : 77

    Sam 14 Mar 2015 - 14:06

    merci



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 15 Test10
    Luuny
    Luuny
    FémininAge : 26Messages : 43

    Lun 16 Mar 2015 - 21:31

    Mercii
    Adèle
    Adèle
    FémininAge : 32Messages : 96

    Lun 30 Mar 2015 - 17:23

    Merci :)
    Morten
    Morten
    FémininAge : 29Messages : 20

    Dim 5 Avr 2015 - 14:37

    Oh ! Je chercher un truc sympa pour rétrécir la taille des profils, ça à l'air bien !
    (en espérant qu'il fonctionne avec le reste de mes codes de profils ! : ))

    Merci beaucoup n.n
    Coquelicot
    Coquelicot
    FémininAge : 27Messages : 48

    Lun 6 Avr 2015 - 23:30

    Merci !!
    remrem
    remrem
    MasculinAge : 26Messages : 48

    Mer 8 Avr 2015 - 22:19

    Merci
    Mayendris
    Mayendris
    MasculinAge : 31Messages : 31

    Ven 10 Avr 2015 - 16:38

    Merci ~
    ZakenX
    ZakenX
    MasculinAge : 30Messages : 14

    Sam 11 Avr 2015 - 21:17

    Merci
    Junichi Kudo
    Junichi Kudo
    MasculinAge : 27Messages : 80

    Dim 12 Avr 2015 - 21:04

    Thanks Sparrow !
    Dark6nika
    Dark6nika
    FémininAge : 30Messages : 118

    Mar 14 Avr 2015 - 18:52

    Merci pour ce superbe Tuto ♥



    Phoenix Elen
    Phoenix Elen
    FémininAge : 31Messages : 93

    Mar 14 Avr 2015 - 22:22

    Oh ! j'veux voir ! ^^ merci beaucoup !



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 15 1u4i
    Lamire
    Lamire
    FémininAge : 30Messages : 96

    Jeu 16 Avr 2015 - 2:22

    Merci beaucoup~~
    Contenu sponsorisé


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