[Toutes les versions] Ajouter un élément personnalisé à coté / en dessous du titre des catégories (Texte ou image)

Salut salut !

Suite à une aide quelque part sur le net, voilà un tutoriel qui peut s'avérer très utile.
Comme tu le sais peut-être, ForumActif limite le nombre de caractères dans les titres de catégories. Pas toujours facile quand on veut ajouter une petite description ou une image personnalisée à chaque titre.
Je viens t'expliquer comment contrer cette limitation !

Voilà ce que ça pourrait donner :

Spoiler:

Ou pour faire un peu plus concret :

Spoiler:

Il est nécessaire de comprendre le HTML et le CSS pour comprendre ce tutoriel
Il ne faut pas avoir peur de faire un peu de Javascript
L'accès aux templates est nécessaire

Pour le tutoriel je pars de templates non modifiés : c'est à adapter selon les modifications.
La hiérarchie du forum (PA > Affichage > Structure et hiérarchie) doit être sur la ligne 2, en colonne 1 ou 2.


Tout d'abord, on prépare notre texte, ou notre image, que nous voulons ajouter.
Pour cela, on va aller dans PA > Général > Catégories et forums.
Ici, je veux ajouter quelque chose au titre de ma première catégorie. Pour cela, je vais aller dans le premier forum qui suit cette catégorie et le modifier (petit écrou) :

Spoiler:

Et on va y ajouter du texte (ou une image) dans une classe description_cate , à la suite de la description de ce forum :

Code:

<span class="description_cate">  J'ajoute ce texte sous le nom de ma catégorie</span>

Spoiler:

On enregistre et on peut passer à la modification suivante.


On a de la chance ici, c'est pareil partout

Dans le template Index_box (PA > Affichage > Template ), on va rechercher ceci :

Code:

{catrow.tablehead.L_FORUM}

Puis juste après cela, on colle la classe qui va recevoir le texte / l'image :

Code:

<span class="conteneur-description"></span>

Pour préparer notre js, on va faire une petite modification sur PunBB.

Dans le même template, juste après :

Code:

<!-- BEGIN tablehead -->

On va ajouter ça :

Code:

<div class="categorie">

Et juste avant :

Code:

<!-- END tablefoot -->

On ajoute ça :

Code:

</div>

Pour pouvoir adapter le js plus tard, on va aussi récupérer la classe qui contient toute la catégorie (généralement celle de la balise juste après :

Code:

<!-- BEGIN tablehead -->

Sur les templates non modifé on retrouve :
> Pour phpBB2 : forumline
> Pour phpBB3 : forabg
> Pour punBB : categorie
> Pour Invision : borderwrap
> Pour ModernBB : forabg
> Pour AwesomeBB : forum

On valider et on publie le template


Dans Modules > Gestion des codes javascripts > Créer, tu vas coller ceci :

Code:

$(function(){
 $('.forumline').each(function(){ // Pour chaque catégorie
  var desc;
  if($(this).find('.description_cate').length){ // On regarde s'il y a un texte / une image à récupérer
  desc=$(this).find('.description_cate')[0].innerHTML; // Si oui on le récupère
  $(this).find('.conteneur-description')[0].innerHTML = desc; // et on l'insère dans la bonne classe.
    }
  });
});

Et modifier les informations suivantes :
.forumline -> par la classe récupérée à la fin de l'étape précédente
.description_cate et .conteneur-description si tu leur a donné un nom différent.

Ensuite tu enregistres et on passe à la partie suivante =)


Ici, on va simplement cacher ce qu'on a mis dans la description du forum :

Code:

.description_cate{
 display:none;
}

Et on met en forme ce qu'on veut ajouter au besoin :

Code:

.conteneur-description{
    color:#fff;
  font-weight:bold;
  font-style:italic;
}

---

Et voilà, tu sais maintenant comment contrer la limitation du nombre de caractère dans les descriptions !