Bonjour à tous !
Vous aussi les affreuses virgules qui séparent par défaut les sous-forums de votre forum vous embêtent ? C'est fini tout ça ^^, et en plus c'est très simple.

Première étape : édition des templates

Rendez-vous dans votre Panneau d'Administration, onglet Affichage puis dans le menu Templates » Général et éditez le template index_box.

Cherchez les variables suivantes :

Code:

{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}

Et entourez-les d'une balise <span> dotée d'une classe .ListeSousForums qui permettra la suppression des virgules plus tard, comme ceci :

Code:

<span class="ListeSousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>

Validez votre modification et publiez votre template.

Deuxième étape, la suppression des virgules

Il existe deux méthodes pour se débarrasser des virgules, une par javascript, et l'autre par le CSS. Elles ont chacune leurs avantages et leurs défauts, à vous de voir celle que vous préférez.

La version CSS

'Christa Lostmindy nous propose une méthode pour retirer les virgules avec l'aide d'un peu de CSS seulement.

Pour ajouter du code CSS à votre forum, rendez-vous dans votre panneau d'administration, sous l'onglet Affichage, puis dans le menu Images et couleurs » Couleurs et enfin dans l'onglet Feuille de style CSS. Vous n'avez plus qu'à coller le code suivant dans le champ de texte :

Code:

.ListeSousForums {
   font-size:0px;
}

.ListeSousForums a {
   font-size:10px; /* indiquez la taille du texte des liens */
   padding-right:5px; /* on rajoute un espace après le lien */
}

/* pour les navigateurs qui acceptent la pseudo-classe :last-child, on supprime l'espace final qui ne sert à rien */
.ListeSousForums a:last-child {
   padding-right:0px;
}

Le padding-right est nécessaire sous certains navigateurs qui collent les liens une fois que la virgule a disparu.

Il est aussi possible de mettre un texte ou une image de séparation :

Code:

.ListeSousForums a:after {
   content:" • "; /* ou bien content:url('URL_IMG'); */
   
}

/* on ne met rien après le dernier élément */
.ListeSousForums a:last-child:after {
   content:"";
}

Défauts de la version CSS : Comme toujours, il y a un risque que le code ne fonctionne pas sous des navigateurs trop anciens. Testé et compatible avec Firefox 14 et 3.5, Chrome 18, Safari 5.1, et Internet Explorer jusqu'à IE6 au moins (cependant les séparateurs ne fonctionnent qu'à partir de IE8, mais il y a des espaces malgré tout.)

La version javascript

Pour installer un code javascript, vous devez vous rendre dans l'onglet Modules de votre panneau d'administration, puis dans HTML & Javascript » Gestion des codes javascript et créer un nouveau code javascript, sans oublier d'activer la gestion des codes javascript sur le forum, et de cocher les cases "Sur l'index" et "sur les sous-forums" lors de la création de votre script.

Dans votre nouveau code javascript, collez le code suivant, gracieusement fourni par Espeon :

Code:

$(function(){
    $('.ListeSousForums').each(function(){
        $(this).html($(this).html().replace(/<\/a>,/ig, '</a>'));
    });
});

Le code, très simple, remplace la "fin de lien" (le </a>) suivie d'une virgule par une "fin de lien" tout court (sans la virgule). Cette méthode nous évitera de remplacer toutes les virgules dans la description des sous-forums (que vous pouvez voir quand vous laissez votre souris au-dessus d'un nom de forum) en ne ciblant que les virgules qui suivent les liens.

Pour modifier le séparateur entre les forums, par exemple pour mettre une image ou un symbole à la place de la virgule, il vous faut modifier légèrement la troisième ligne du code :

Pour mettre une image :

Code:

$(this).html($(this).html().replace(/<\/a>,/ig, '</a><img src="URL_IMG" alt="" />'));

Pour mettre un symbole ou autre texte :

Code:

$(this).html($(this).html().replace(/<\/a>,/ig, '</a> • '));

Une autre méthode, plus lourde:

Défauts de la méthode Javascript
• Ca ne marchera évidemment pas si le visiteur a le javascript désactivé, ce qui est rare mais pas impossible
• L'utilisation d'un script nécessite un temps de chargement supplémentaire, votre forum sera donc plus lent à charger.

Addendum : Et si je veux les séparer par un saut de ligne ?

Vous pouvez le faire simplement en CSS, il vous suffit de rajouter display:block; dans le sélecteur .ListeSousForums a:

Code:

.ListeSousForums a {
   display:block;
   /* autres propriétés CSS */
}

On a ainsi transformé les liens en blocs, rien ne vous empêche par la suite de modifier votre template index_box pour placer les sous-forums à côté de la description du forum.