Tutoriel

Salut à tous, pour pouvoir afficher les informations du profil au passage de la souris sous l'avatar nous allons modifier templates et CSS, ainsi vous devrez être administrateur fondateur de votre forum.

I/ Premiers pas : On va commencer par le CSS ! Voici le code à placer dans votre CSS :
Panneau d'administration ↦ Affichage ↦ Couleurs ↦ Feuille de style CSS.
Je vous conseille de baliser vos codes avec un début et une fin grâce à cette méthode:
/* Début profil*/ ↦ /*fin profil*/
Cela permettra en effet d'éviter de vous perdre dans vos codes et de vous repérer plus facilement dans votre fiche de CSS.

Code:

#englob { /* Encadrement global des 2 divs */
    position:relative;
    width:200px;
    height:320px;
    border:1px solid black;
    overflow:hidden; /* Permet de cacher ce qui dépasse et d'éviter d'avoir une barre de défilement*/
    border-radius: 15px 15px 15px 15px;
}

.avapro /*avatar et ce qui est a l'intérieur */{
    background:coral; /* le bg  de la div qui contient l'avatar */
    position:absolute; /* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
  margin-top:-50px;
    z-index:1;/* La position par rapport à l'autre div qui contient les infos */
    -webkit-transition:all 0.5s;/* on prépare la transition de l'avatar */
    -moz-transition:all 0.5s;
    -o-transition:all 0.5s;
    -ms-transition:all 0.5s;
    transition:all 0.5s;
}
#englob:hover > .avapro {
    margin-top:-320px; /* Lorsque la souris passe sur la div #englob, on fait glisser l'image vers le bas de 320px */
}

.infosprof {/*les infos générales*/
    overflow:hidden;
    background:wheat; /* le bg  de la div qui contient les infos*/
    position:absolute;/* Laissez comme ceci */
    top:0;/* Laissez comme ceci */
    left:0;/* Laissez comme ceci */
    width:100%;/* Laissez comme ceci */
    height:100%;/* Laissez comme ceci */
    z-index:0;/* La position par rapport à l'autre div qui contient les infos (ici en dessous)*/
    opacity:0;/* on met l'opacité à zero pour un effet stylé  */
    margin-top:320px;/* on décale la div de 320px, elle est invisible grâce a l'overflow:hidden de #englob */
    -webkit-transition:all 0.5s;/* Laissez comme ceci */
    -moz-transition:all 0.5s;/* Laissez comme ceci */
    -o-transition:all 0.5s;/* Laissez comme ceci */
    -ms-transition:all 0.5s;/* Laissez comme ceci */
    transition:all 0.5s;/* Laissez comme ceci */
}

#englob:hover > .infosprof {
   opacity:0.8;/* Lorsque la souris passe sur la div #englob, on augmente l'opacité des infos */
   margin-top:0px;/* et on décale cette div à 0px (position par défaut) */
  oveflow:hidden;
}

.profildesc
{  
   width: 200px;
  overflow:hidden;
padding:5px;}

II/ Le Template.
Cette partie est ce qui est à modifier dans votre template viewtopic_body auquel vous accédez en passant par:
Panneau d'administration ↦ Affichage ↦ Templates ↦ Général ↦ viewtopic_body

Alors ici vous devrez remplacer:

Code:

<!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{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 -->

Par:

Code:

<!-- BEGIN displayed -->
   <tr class="post">
      <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></span><br />
           <span class="postdetails poster-profile">
          
              <div class="fondava"><div id="englob"><div class="avapro">{postrow.displayed.POSTER_AVATAR}</div>
              
             <div class="infosprof"><div class="profildesc" style="overflow:hidden;">        <!-- BEGIN profile_field -->
     <span id="delf2" class="label">{postrow.displayed.profile_field.LABEL}</span> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<script type="text/javascript">
  jQuery('#delf2').html(jQuery('#delf2').removeAttr('id');
 </script>
<!-- END profile_field --></div></div></div><div class="profilname">{postrow.displayed.POSTER_NAME}</div><div class="profilrang">{postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}</div>
  <center>  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.contact_field.CONTENT}  {postrow.displayed.ONLINE_IMG}  
              </center>

N'oubliez surtout pas de publier votre template, sinon vous n'aurez rien ^^


III/ Modifications esthétiques

Nous y voilà, pour modifier tout ce qui touche à l'esthétique, il faudra toucher au CSS. Vous pouvez enlever l'effet d'opacité, modifier le texte des infos du profil, enlever l'effet coins arrondi (#englob) Tout cela en modifiant juste le CSS !

Le tutoriel est terminé, merci à vous d'avoir lu tout cela ! si jamais vous avez des problèmes avec le code, vous pouvez poser toutes vos questions dans la partie Questions & Problèmes. Bon Codage et à bientôt !

Sleepy