1. Introduction

Pour pouvoir mettre ce tutoriel en application, vous devez avoir l'accès au compte fondateur de votre forum. Dans votre panneau d'administration, onglet Affichage, vous aurez alors accès à l'édition des templates. Lorsque vous aurez fini de faire les modifications proposées par ce tutoriel, pensez à publier votre template pour qu'elles puissent prendre effet !

2. Supprimer la colonne des derniers messages

Ouvrez le template index_box et repérez puis supprimez cette partie (Il s'agit de la colonne contenant le texte "Derniers messages") :

Code:

<th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>

Puis repérez et supprimez cette partie-ci, qui affiche les informations sur le dernier message posté dans un forum :

Code:

      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Conservez néanmoins la partie suivante dans votre bloc-notes, cela vous servira plus loin.

Code:

<span class="gensmall">{catrow.forumrow.LAST_POST}</span>

3. Création de l'infobulle

Vous trouverez plusieurs tutoriels différents sur la réalisation d'une infobulle. Pour plus d'informations, vous pouvez consulter le tutoriel de Kiwi à ce sujet.

Ici, nous souhaitons qu'une infobulle apparaisse lorsqu'on survole l’icône de catégorie.

Cherchez ce code (ne le supprimez pas !) :

Code:

<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />

Encadrez ce code par une première div en plaçant avant :

Code:

<div class="bulle_msg">

Et après :

Code:

</div>

On place ensuite une seconde div juste avant la balise div fermante, qui contiendra le code des derniers messages :

Code:

<div><span class="gensmall">Derniers messages <br /> {catrow.forumrow.LAST_POST}</span></div>

Et on referme naturellement l'infobulle par une une balise fermante

Code:

</div>

Au total, vous devrez donc avoir remplacé le premier code par ceci :

Code:

<div class="bulle_msg">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
<div><span class="gensmall">Derniers messages <br /> {catrow.forumrow.LAST_POST}</span></div>
</div>

Enregistrez et publiez le template.

4. Le CSS

Pour le CSS c'est tout bête ! On va prendre celui du tuto de Kiwi* et modifier en indiquant nos propres classes :

Code:

/* ****************************
INFOBULLES 'DERNIERS MESSAGES'
******************************* */

/* au repos */

div.bulle_msg {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.bulle_msg > div {
  display: none; /* on masque l'infobulle par défaut */
}

/* au survol */

div.bulle_msg:hover {
  background: none; /* correction d'un bug IE */
  z-index: 500; /* on s'assure que l'infobulle est bien par dessus tout */
}

div.bulle_msg:hover > div {
  display: block; /* on affiche l'infobulle */
  position: absolute; /* positionnement absolu par rapport au coin supérieur gauche de bulle_msg */
  top: 5px; /* positionnement par rapport au bord haut */
  left: 15px; /* positionnement par rapport au bord gauche */
  white-space: nowrap; /* pas de retour à la ligne non-désiré */
  background: #COULEUR; /* couleur d'arrière-plan de l'infobulle */
  color: black; /* couleur du texte dans l'infobulle */
  padding: 3px;
  border: 1px dotted black; /* bordures : épaisseur style couleur */
}

Le tutoriel est maintenant terminé. Merci de m'avoir suivi et à bientôt.

* Edit par 'Christa Lostmindy : J'ai remplacé des div par > div dans le CSS, ceci permet d'utiliser d'autres div à l'intérieur d'une infobulle sans que l'affichage en pâtisse.