Partie Templates

Rendez vous dans votre panneau d'administration, onglet Affichage, puis dans le menu Templates » Général, et éditez le template viewtopic_body.

Le profil des membres dans les messages est affiché dans la cellule de gauche, c'est à dire dans cette partie du code (pour un template par défaut) :

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>

Vous souhaitez cacher les informations du profil par défaut, et les rendre visible dans une infobulle au survol de l'avatar, vous allez donc avoir besoin :
• de la partie qui affiche l'avatar : {postrow.displayed.POSTER_AVATAR}
• de la partie qui affiche le profil :

Code:

<!-- 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}

Préparation préalable

Avant de faire la moindre modification, vous allez devoir préparer le code d'origine. En effet, sachant qu'on ne peut pas mettre de <div> dans un <span> (jamais d'élément bloc dans un élément en ligne !), il va falloir faire quelque chose de la balise span qui entoure tout le profil !

• Repérez la ligne :

Code:

<span class="postdetails poster-profile">

Remplacez le span par div :

Code:

<div class="postdetails poster-profile">

• Repérez la ligne

Code:

{postrow.displayed.POSTER_RPG}

Juste après, vous voyez le </span> associé à la balise précédemment modifiée, remplacez le donc par </div>

Et puis, pour bien séparer l'avatar du pseudo et du rang :
• Repérez cette ligne :

Code:

{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />

Et remplacez-la par :

Code:

{postrow.displayed.RANK_IMAGE}
<!-- DEBUT PROFIL MODIFIÉ : Infos de profil en infobulle -->
{postrow.displayed.POSTER_AVATAR}

Passons aux choses sérieuses

Maintenant, on va s'attaquer aux modifications nécessaires pour l'affichage des informations de profil en infobulles. Si vous ne connaissez pas les bases de la création d'une infobulle, allez consulter ce tutoriel, car on ne développera pas trop ici.

Si vous avez suivi les modifications jusqu'à maintenant et que votre profil n'était pas déjà modifié, vous devriez avoir ce code comme base de départ :

Code:

<!-- DEBUT PROFIL MODIFIÉ : Infos de profil en infobulle -->
        {postrow.displayed.POSTER_AVATAR}
        <!-- 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}

Appliquez le principe des infobulles sur cette partie :
• Encadrez le tout par des balises <div> </div> auquel vous attribuerez la classe de votre choix, par exemple .ProfilInfobulle
• Encadrez La section correspondant au profil par des balises <div> </div>, sans attribuer de classe cette fois.

Ca vous donnera ceci :

Code:

<!-- DEBUT PROFIL MODIFIÉ : Infos de profil en infobulle -->
<div class="ProfilInfobulle">
  {postrow.displayed.POSTER_AVATAR}
  <div>
    <!-- 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}
  </div>
</div>
<!-- FIN PROFIL MODIFIÉ -->

Vous pouvez également ne pas inclure le profil "RPG" dans votre infobulle:

Et c'est fini pour la partie HTML, c'est simple, non ?

Partie CSS

Vous n'avez plus, en fait, qu'à suivre le tutoriel sur la création d'une infobulle pour personnaliser l'affichage final. Voici un exemple de code, à vous de le modifier à votre guise ensuite !

Code:

div.ProfilInfobulle {
  position: relative; /* on définit le bloc comme élément de référence */
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.ProfilInfobulle > div{
  display: none; /* masque l’infobulle par défaut */
}

div.ProfilInfobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'arrange pour que notre bloc soit au dessus des autres en cas de conflit */
}

/* Lorsqu'on survole le contenu du bloc */
div.ProfilInfobulle:hover > div{
  display: block; /* Affiche l’infobulle (on peut aussi utiliser inline au lieu de block) */

  /* on positionne notre infobulle par rapport au bloc conteneur */
  position: absolute;
  top: 5px; /* 5px par rapport au haut du bloc .ProfilInfobulle (= par rapport à l’avatar) */
  left: 15px; /* 15 px par rapport à la gauche du bloc .ProfilInfobulle */

  /* Et puis on rajoute tous les éléments de mise en forme de l’infobulle */
  background: #ebebeb; /* arrière-plan de l’infobulle */
  color: black; /* texte dans l’infobulle */
  padding: 3px; /* marges internes par rapport aux bords */
  border: 1px dotted black; /* bordures de votre infobulle : épaisseur style couleur*/
  width:180px; /* largeur de l’infobulle */
  -moz-border-radius: 7px 0px 7px 0px ; /*angles arrondis*/
  -webkit-border-radius: 7px 0px 7px 0px ; /*angles arrondis*/
  border-radius: 7px 0px 7px 0px ; /*angles arrondis*/
  -moz-box-shadow: 0px 0px 4px #000; /*ombre portée*/
  -webkit-box-shadow: 0px 0px 4px #000; /*ombre portée*/
  box-shadow: 0px 0px 4px #000; /*ombre portée*/
  font-size:10px; /*taille de la police */
  color:#000; /* couleur de la police */
}

Pour aller plus loin

Rien ne vous empêche de rajouter quelques éléments de profil supplémentaires dans l'infobulle (entre les balises <div> sans classe associée, pour rappel), voici quelques unes des variables que vous pouvez réutiliser :
{postrow.displayed.PROFILE_IMG} : Vouton "voir le profil"
{postrow.displayed.PM_IMG} : Bouton "envoyer un MP"
{postrow.displayed.EMAIL_IMG} : Bouton "Envoyer un Mail"
{postrow.displayed.ONLINE_IMG} : Icone En ligne/Hors ligne