Titre des catégories en image

Coucou toi !

Dans ce tutoriel, nous allons voir comment mettre des images en tant que titre des catégories, c'est-à-dire, comment faire ceci :
Tout en évitant d'avoir ces mêmes images dans le fil de navigation, c'est-à-dire là :

Pré-requis :
• Avoir accès aux templates du forum ;
• Avoir des connaissances de base en HTML & CSS ;
• Avoir préparer toutes les images des titres des catégories et les avoir uploadées (!!! Attention à la longueur des liens, nous allons être limité en nombre de caractères par la suite ) ;
• Ce tutoriel peut s'adapter à toutes les versions.

On y va !


Pour commencer, on va devoir cibler nos titres de catégories. Pour cela, dans le template "index_box" (qui se trouve dans PA > Affichage > Templates > Général), on va ajouter autour des titres un élement avec une classe qu'on pourra utiliser pour notre CSS.

Je pars du template par défaut, non modifié.

On va donc repérer ceci :

Code:

{catrow.tablehead.L_FORUM}

qui sert à afficher le titre de ta catégorie, et on va le remplacer par ça :

Code:

<div class="titre-categorie">{catrow.tablehead.L_FORUM}</div>

Ici, on a donc simplement ajouté une div avec une classe autour du titre .

On enregistre et on publie


Etape suivante, on ajoute les images dans les titres des catégories.

Pour cela, on va aller dans l'édition des forums, c'est-à-dire dans PA > Général > Forum > Catégories et forums.

Ici, on va ajouter les images "titre" de nos catégories, mais attention : il va falloir le faire en html, c'est-à-dire utiliser un code qui ressemble à ça :

Code:

<img src="lien-de-limage" alt="" />

Du coup, par exemple, je vais avoir ceci :

Code:

<img src="https://i.servimg.com/u/f71/20/05/19/39/titre-10.png" alt="" />

Si on s'arrête là, "chouette ! Ça fonctionne !".

> Sur l'index :

Spoiler:

Mais problème ! Voilà le rendu quand on regarde le fil de navigation :

Spoiler:

Eh oui ! Patatra ça ne va pas ! On va donc devoir corriger ça avec une petite astuce ^^ Pour cela, on va ajouter, en plus de l'image, un span avec une class et du texte. Par exemple, pour moi ça sera :

Code:

<img src=" https://i.servimg.com/u/f71/20/05/19/39/titre-10.png" alt="Cate1" /><span class="tcat">Catégorie 1</span>

Attention, c'est là où tu es limité en nombre de caractères .

Bon ok, c'est encore pire Cette fois, on a l'image ET le texte qui s'affichent.

> Sur l'index :

Spoiler:

> Dans le fil de navigation :

Spoiler:

Mais pas de panique, on va corriger ça à coup de baguette CSS magique ! :=):


Ici, on va devoir faire 2 choses :
• masquer le texte sur l'index et dans les blocs "forums" ;
• masquer l'image dans le fil de navigation.

Au travail !


Pour masquer le text, c'est simple : on va cibler le bloc qui a pour classe "titre-categorie" puis le span ayant pour class "tcat" que l'on va mettre en "display:none;" pour ne pas l'afficher. Ce qui donne :

Code:

.titre-categorie .tcat{display: none;}

Notre index est réglé :

Spoiler:

Ici, on va cibler le fil de navigation (qui a pour classe "nav") et on va masquer toutes les images à l'intérieur, ce qui nous donne :

Code:

a.nav img{display: none;}

Spoiler:

Ici, on va devoir ajouté un peu plus de CSS pour l'index. Eh oui, si on se contente de ça, on a cet affichage :

Spoiler:

On va donc ajouter une ligne de CSS pour :
• ne pas bloquer la hauteur max de notre image de titre :

Code:

.titre-categorie img{
 max-height: inherit !important;
}

• supprimer la petite icone avant notre image :

Code:

.category-title .material-icons{
 display: none;
}

---

Eh hop ! C'est terminé ^^

Pour résumer :

1) On modifie le template "index_box" pour "cibler" le titre des catégories

Code:

<div class="titre-categorie">{catrow.tablehead.L_FORUM}</div>

2) On ajoute les images des catégories en suivant ce modèle :

Code:

<img src="LIEN-IMAGE" alt="" /><span class="tcat">TEXTE POUR LE FIL DE NAVIGATION</span>

En faisant attention à ce que ça ne soit pas trop long.

3) On ajoute cette CSS pour afficher uniquement l'image sur l'index et dans les forums, et pour n'afficher que le texte dans le fil de navigation :

Code:

.titre-categorie .tcat,
a.nav img{display: none;}

Pour la version AwesomeBB, on a cette CSS :

Code:

.titre-categorie .tcat,
a.nav img{display: none;}
.titre-categorie img{
 max-height: inherit !important;
}

.category-title .material-icons{
 display: none;
}

Simple non ?