Préparation

Tout d'abord, il vous faudra vous rendre dans votre panneau d'administration et cliquer sur l'onglet Affichage puis dans le menu Page d'accueil » Structure et Hiérarchie. Choisissez alors l'option séparer les catégories (deuxième ligne), sans quoi ce tutoriel ne fonctionnera pas.

Sans logo pour signaler la rétraction

Rendez-vous dans l'onglet Affichage puis dans le menu Templates » Général et éditez le template Index_box. Cherchez le code suivant (n'oubliez pas le <tr>, c'est le plus important) :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>

Maintenant que vous avez trouvé cette portion de code, enregistrez-la quelque part au cas où vous voudriez revenir sur votre décision. Puis remplacez-la par le code suivant :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr onClick="i= 0;e=this.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';">

Si vous suivez bien, nous venons d'ajouter un attribut onClick dans la balise <tr>, dont la valeur est le script nécessaire pour votre effet.

Enregistrez votre modification, publiez votre template et voilà ! Ce n'était pas bien difficile, n'est-ce pas ?

Avec un bouton (+) et (-) cliquable pour signaler la rétraction

Si vous préférez afficher un petit bouton pour faciliter la compréhension de vos membres, la méthode est légèrement différente.

On va utiliser deux boutons : et

► Placer le bouton après "Derniers messages" :
Cherchez cette partie du code :

Code:

{L_LASTPOST}

Et ajoutez juste avant :

Code:

<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right"  class="BoutonRetrac" />

Ce bouton s'affichera juste après le texte "Derniers messages".

► Placer le bouton après le titre du forum
Si cet emplacement ne vous plaît pas, vous pouvez aussi placer le bouton juste après le titre du forum. Pour cela, cherchez la ligne :

Code:

 {catrow.tablehead.L_FORUM} 

Et ajoutez juste avant :

Code:

<img onClick="i= 0;e=this.parentNode.parentNode.parentNode.childNodes; while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif" align="right"  class="BoutonRetrac" />

► Modifier l'image utilisée
Dans les deux codes sont utilisés quatre liens, dans cette partie plus exactement :

Code:

this.src=(this.src=='http://i45.tinypic.com/2z9dxyt.gif')?'http://i47.tinypic.com/xmmlpg.gif':'http://i45.tinypic.com/2z9dxyt.gif';" src="http://i45.tinypic.com/2z9dxyt.gif"

Si vous voulez mettre d'autres images, voici comment placer les liens :

Code:

this.src=(this.src=='IMG-OUVERTURE')?'IMG-FERMETURE':'IMG-OUVERTURE;" src="IMG-OUVERTURE"

► Placer le bouton devant le texte plutôt que après
Dans les deux cas, vous pouvez aussi remplacer align="right" par align="left" pour que l'image se trouve à gauche et non plus à droite.

► Ajouter un pointeur au survol de l'image
L'image est associée à la classe .BoutonRetrac, ce qui facilite toute mise en page supplémentaire.

Dans votre panneau d'administration, sous l'onglet Affichage et dans le menu Images et couleurs » Couleurs, rendez vous dans l'onglet Feuille de styles CSS et déclarez la classe comme ceci :

Code:

.BoutonRetrac {
    cursor:pointer; /* un curseur au survol de l'image */
}

► Positionner l'image de façon plus originale
La méthode la plus simple consisterait à utiliser un peu de positionnement absolu. Pour cela, comme précédemment vous devrez définir un peu de CSS. Commencez par définir le conteneur (classe .forumline) comme élément relatif :

Code:

.forumline { position:relative; }

Partant de là, vous pourrez positionner votre bouton comme vous voulez par rapport à la table contenant la catégorie, en le définissant en position absolue et en spécifiant sa distance par rapport aux bords de la table :

Code:

.BoutonRetrac {
    position:absolute;
    top : -5px;
    left:20px;
}

Vous avez besoin d'un positionnement vertical (top ou bottom) et d'un positionnement horizontal (left ou right), donc même si l'exemple utilise top/left, vous pouvez aussi utiliser top/right, bottom/left et bottom/right. Faites vos essais pour positionner votre bouton comme vous le voulez.

Mais comment ça marche ce code ?

(Explication par 'Christa Lostmindy)
Cette explication vous servira si jamais vous comptez personnaliser votre forum et que la structure du template index_box est différente de celle d'origine.

Dans les deux cas, nous utilisons un script qui se déclenche au clic grâce à l'attribut HTML onclick.

Le script pour la première méthode (placé dans la ligne <tr>) est le suivant :

Code:

i=0;
e=this.parentNode.childNodes;
while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';

Le script pour la seconde méthode (placé sur l'image) est le suivant :

Code:

i=0;
e=this.parentNode.parentNode.parentNode.childNodes;
while(++i<e.length) if(e[i].tagName=='TR')e[i].style.display=(e[i].style.display=='none')?'':'none';
this.src=(this.src=='IMG_OUVRIR')?'IMG_FERMER':'IMG_OUVRIR';

Ces deux scripts contiennent trois instructions (qui finissent par un point virgule) communes :
- On initialise la variable i en lui donnant la valeur 0
- On initialise la variable e en lui attribuant un tableau de valeurs
- Pour chaque valeur de e, si e contient l'élément TR (ligne de tableau) on cache cet élément (sauf s'il était déjà caché, dans ce cas on l'affiche), puis on incrémente i (c'est à dire qu'on ajoute 1 à la valeur de la variable i)
En plus de ces instructions, dans le cas de l'image on a rajouté une instruction supplémentaire qui permet de changer l'image au clic.

En ce qui concerne la valeur de "e", vous constaterez qu'elle change selon les cas, elle a même trois valeurs différentes dans tout le tutoriel. Voyons-ça de plus près :

► this désigne l'élément qui contient le script. Il s'agit donc de <tr> dans la version sans image, et de <img> dans la version avec l'image.

► parentNode désigne le parent de l'élément ciblé, c'est à dire l'élément HTML qui contient l'élément ciblé. Donc c'est <table> dans le premier cas, et <tr> ou <div> dans la version avec image (si, si, vérifiez le code source, il y a un <div> autour de {L_LASTPOST})

► parentNode.parentNode.parentNode c'est le parent du parent du parent. En gros, remontez d'un cran pour chaque parentNode. L'objectif est de monter jusqu'au <table class="forumline" ... >.

► chidNodes cible donc les enfants du dernier élément trouvé (bah oui c'est au pluriel).

Au final, dans tous les cas, la variable contient toujours la liste des "enfants" de <table class="forumline" ... >.

Et pour conclure

Si vous utilisez ce tutoriel, pensez à créditer Etana du forum des forums de ForumActif pour son script