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.


    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 26 953155exemple1 => Cacher le profil sous l'avatar (dévoilé en hover) - Page 26 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
    SuperSpaceCab
    SuperSpaceCab
    MasculinAge : 39Messages : 36

    Mer 28 Sep 2016 - 7:04

    Merci !
    Lireloth
    Lireloth
    MasculinAge : 27Messages : 4

    Mer 28 Sep 2016 - 21:32

    Merci !! :DD
    Liintu
    Liintu
    FémininAge : 34Messages : 67

    Sam 1 Oct 2016 - 14:01

    Original et un rendu vraiment sympa
    Merci beaucoup !
    Twearky
    Twearky
    FémininAge : 30Messages : 7

    Dim 2 Oct 2016 - 18:59

    Pas mal !
    MARLEY SMITH.
    MARLEY SMITH.
    FémininAge : 30Messages : 156

    Jeu 6 Oct 2016 - 0:59

    Merci pour le tutoriel :)
    Lilou O'Neill
    Lilou O'Neill
    FémininAge : 24Messages : 62

    Jeu 6 Oct 2016 - 2:53

    Merci !
    Bully
    Bully
    FémininAge : 21Messages : 39

    Ven 7 Oct 2016 - 17:26

    merci
    Pamplemousse
    Pamplemousse
    FémininAge : 33Messages : 31

    Lun 10 Oct 2016 - 22:08

    Merci !!



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 26 849596fdt5
    Argimpasa
    Argimpasa
    FémininAge : 32Messages : 100

    Mer 12 Oct 2016 - 2:38

    Merci pour le codage.
    TiGraou
    TiGraou
    MasculinAge : 30Messages : 243

    Jeu 13 Oct 2016 - 15:15

    Merci
    Alborio
    Alborio
    MasculinAge : 24Messages : 37

    Sam 15 Oct 2016 - 15:01

    Excellent travail.
    Louaque
    Louaque
    MasculinAge : 58Messages : 60

    Sam 22 Oct 2016 - 21:49

    Bonsoir,

    décidément, chaque fois qu'un code me plait bien, c'est toi le créateur!!!
    Merci.
    Bryan1997
    Bryan1997
    MasculinAge : 26Messages : 51

    Dim 23 Oct 2016 - 14:13

    MERCI A TOI
    STL
    STL
    FémininAge : 48Messages : 12

    Dim 30 Oct 2016 - 0:17

    Merci pour ce partage. Very Happy
    Voyageur-B21E3
    Voyageur-B21E3
    MasculinAge : 29Messages : 35

    Sam 5 Nov 2016 - 21:35

    Merci !
    Justin237
    Justin237
    MasculinAge : 25Messages : 11

    Dim 6 Nov 2016 - 0:01

    Yeyy
    îra
    îra
    FémininAge : 27Messages : 2

    Lun 7 Nov 2016 - 0:01

    Merci =D
    Cendre de Lune
    Cendre de Lune
    FémininAge : 60Messages : 11

    Lun 7 Nov 2016 - 19:13

    Merci pour ce tuto que je recherchais
    thidabou
    thidabou
    FémininAge : 23Messages : 37

    Jeu 10 Nov 2016 - 22:44

    Merci beaucoup !
    avatar
    Alancar
    MasculinAge : 26Messages : 57

    Mar 22 Nov 2016 - 1:11

    Merci beaucoup :)
    Valens88
    Valens88
    MasculinAge : 35Messages : 9

    Dim 18 Déc 2016 - 13:23

    merci
    Borée
    Borée
    MasculinAge : 24Messages : 56

    Lun 19 Déc 2016 - 13:28

    Merci du partage!
    geen.
    geen.
    FémininAge : 36Messages : 23

    Ven 23 Déc 2016 - 16:19

    Parfait
    br6668lo
    br6668lo
    MasculinAge : 29Messages : 7

    Dim 25 Déc 2016 - 16:17

    merci
    neurosis
    neurosis
    MasculinAge : 27Messages : 6

    Lun 2 Jan 2017 - 20:48

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 2:03