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 : -26%
369€ PC Portable HP 15-fd0064nf – ...
Voir le deal
369.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 28 953155exemple1 => Cacher le profil sous l'avatar (dévoilé en hover) - Page 28 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
    avatar
    Yunroxas
    FémininAge : 31Messages : 37

    Sam 1 Avr 2017 - 21:29

    Merci du partage
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Mar 4 Avr 2017 - 4:13

    merci
    Fleazy
    Fleazy
    FémininAge : 20Messages : 31

    Mar 4 Avr 2017 - 18:18

    Meurrrci Very Happy
    Firamary
    Firamary
    FémininAge : 26Messages : 15

    Sam 8 Avr 2017 - 16:33

    Merci beaucoup! Very Happy
    Asa Ikeda
    Asa Ikeda
    FémininAge : 30Messages : 36

    Sam 15 Avr 2017 - 1:07

    Merci pour ce code :)
    Voxiom
    Voxiom
    MasculinAge : 24Messages : 10

    Mar 18 Avr 2017 - 19:43

    Merci ^^
    warning.sign
    warning.sign
    FémininAge : 34Messages : 58

    Mer 19 Avr 2017 - 21:56

    merci !
    Alsan
    Alsan
    MasculinAge : 27Messages : 55

    Ven 21 Avr 2017 - 3:23

    Merci
    RigoloDiabolo_
    RigoloDiabolo_
    MasculinAge : 23Messages : 15

    Dim 23 Avr 2017 - 12:01

    mrci
    Athéna
    Athéna
    FémininAge : 63Messages : 29

    Mar 25 Avr 2017 - 6:56

    C'est très joli, merci ! Je veux voir même si à mon avis je ne serai pas capable de le faire Rolling Eyes



    "L'esprit est un instrument de musique avec une certaine gamme de tons,
    au-deLà desquels s'étend un silence infini."
    Chimik Girl
    Chimik Girl
    FémininAge : 31Messages : 128

    Lun 1 Mai 2017 - 13:14

    Merci, c'est très pratique en effet.
    Wildness
    Wildness
    MasculinAge : 32Messages : 16

    Lun 1 Mai 2017 - 17:52

    Merci
    Misery Devil
    Misery Devil
    FémininAge : 34Messages : 163

    Mar 2 Mai 2017 - 20:07

    jolie



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 28 121584Signature
    Dinoni
    Dinoni
    FémininAge : 26Messages : 13

    Ven 5 Mai 2017 - 21:46

    Merci !
    Lyo
    Lyo
    FémininAge : 28Messages : 104

    Dim 7 Mai 2017 - 20:20

    Merci !
    Sup
    Sup
    FémininAge : 25Messages : 2

    Lun 8 Mai 2017 - 13:02

    Merci bien :)))
    Jenova
    Jenova
    MasculinAge : 30Messages : 153

    Jeu 11 Mai 2017 - 16:18

    Je vais tenter d'utilisr votre code ! merci <3



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 28 I3k3
    nuanciel
    nuanciel
    FémininAge : 33Messages : 139

    Lun 15 Mai 2017 - 12:36

    merci !
    Ezehkiel
    Ezehkiel
    MasculinAge : 28Messages : 2

    Mar 16 Mai 2017 - 10:25

    Merci!



    Cacher le profil sous l'avatar (dévoilé en hover) - Page 28 3OgVQ
    Irone
    Irone
    MasculinAge : 24Messages : 2

    Sam 20 Mai 2017 - 10:24

    merci bien
    wally the bully
    wally the bully
    MasculinAge : 25Messages : 58

    Dim 21 Mai 2017 - 5:00

    cimer
    Rikudou-senin
    Rikudou-senin
    MasculinAge : 30Messages : 6

    Mar 23 Mai 2017 - 19:53

    Merci
    Jay K.
    Jay K.
    MasculinAge : 33Messages : 23

    Jeu 25 Mai 2017 - 19:38

    Merci beaucoup !
    Lessien
    Lessien
    FémininAge : 42Messages : 163

    Lun 26 Juin 2017 - 12:13

    Merci :)
    Xophyas
    Xophyas
    MasculinAge : 28Messages : 4

    Lun 26 Juin 2017 - 18:35

    L'effet à l'air sympa
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 7:45