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 : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €

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

    Sam 23 Mai 2015 - 1:22

    Merci
    maagic
    maagic
    MasculinAge : 26Messages : 10

    Sam 23 Mai 2015 - 1:22

    Merci
    Poké_Eievui
    Poké_Eievui
    MasculinAge : 23Messages : 34

    Sam 23 Mai 2015 - 11:08

    Merci pour le partage ! Very Happy
    Nastooo
    Nastooo
    FémininAge : 31Messages : 22

    Mar 26 Mai 2015 - 16:30

    Oh celui-ci je l'aime beaucoup ! Merci ~
    stormy.night
    stormy.night
    FémininAge : 31Messages : 3

    Lun 1 Juin 2015 - 2:00

    Un grand merci pour ce partage !!
    ( Lou' )
    ( Lou' )
    FémininAge : 28Messages : 108

    Lun 1 Juin 2015 - 20:33

    Merci !
    Vishetani
    Vishetani
    FémininAge : 29Messages : 5

    Mar 2 Juin 2015 - 14:17

    merci !
    Milou
    Milou
    FémininAge : 24Messages : 163

    Mer 3 Juin 2015 - 15:16

    Marfi :3



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 17 693002signa
    Kaamee
    Kaamee
    FémininAge : 28Messages : 110

    Mer 3 Juin 2015 - 23:04

    Merci ♥



    Lunara
    Lunara
    FémininAge : 37Messages : 95

    Jeu 4 Juin 2015 - 19:23

    merci du partage
    kinai0107
    kinai0107
    MasculinAge : 48Messages : 15

    Jeu 4 Juin 2015 - 19:37

    merci
    Laetizya
    Laetizya
    FémininAge : 25Messages : 54

    Sam 13 Juin 2015 - 9:24

    Merci beaucoup ! :o
    Scythe
    Scythe
    FémininAge : 33Messages : 41

    Lun 15 Juin 2015 - 1:53

    Merci. ^^
    AkaZukin
    AkaZukin
    FémininAge : 29Messages : 35

    Mer 17 Juin 2015 - 14:25

    Merci!
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 29Messages : 169

    Ven 19 Juin 2015 - 15:57

    Merci ♥
    Chione
    Chione
    MasculinAge : 23Messages : 397

    Mar 23 Juin 2015 - 21:53

    Merci!



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 17 1435969469-signd
    FEZ!FEZ!
    Cacher le profil sous l'avatar (dévoilé en hover) - Page 17 150804081846482087
    Misery Mind™
    Misery Mind™
    FémininAge : 33Messages : 152

    Jeu 25 Juin 2015 - 17:39

    merci !
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Ven 26 Juin 2015 - 2:37

    Merci beaucoup. Very Happy
    Solid6Snake
    Solid6Snake
    MasculinAge : 40Messages : 146

    Ven 26 Juin 2015 - 21:56

    Merci.
    avatar
    GEnterZ
    MasculinAge : 25Messages : 63

    Sam 27 Juin 2015 - 15:37

    Thanks.
    allcl
    allcl
    FémininAge : 24Messages : 81

    Mar 30 Juin 2015 - 21:58

    Merci
    avatar
    Nextalius
    MasculinAge : 23Messages : 22

    Jeu 2 Juil 2015 - 12:32

    merci
    avatar
    Hinate-Chan
    FémininAge : 29Messages : 44

    Sam 4 Juil 2015 - 16:57

    Merci beaucoup ~
    Prissy
    Prissy
    FémininAge : 23Messages : 23

    Lun 6 Juil 2015 - 16:13

    Merci !
    luna-chan86
    luna-chan86
    FémininAge : 34Messages : 201

    Ven 10 Juil 2015 - 1:58

    Owiiiie merciiiii Very Happy



    Contenu sponsorisé


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