[RÉGLÉ] Icones pour catégories

[Leondit]

Bonjour à tous

J'utilise Joomla depuis quelques temps et je viens de me rendre compte qu'il n'est pas possible de personnaliser les catégories auxquelles sont assignées les articles.

Par exemple, j'aimerais pouvoir associer une icone à chaque catégorie, ou encore faire en sorte que telle ou telle catégorie puisse s'afficher sur un fond de couleur différente (histoire d'aider le lecteur à s'y retrouver dans une page qui affiche une multitude d'articles).

Je viens de passer ma journée à fouiller le web pour tenter de trouver une solution, mais en vain :-(

Si quelqu'un a une piste, je suis preneur !

[nossibe]

Bonsoir Leondit,

Concernant l’icône associé à la catégorie, je dirais que c'est possible depuis "Contenu" -> "Gestion des catégories" -> Nom de la catégorie -> Onglet "Paramètres" -> image.

Pour modifier la couleur, tu devrais tester d'ajouter un menu "technique" dans lequel tu crées un nouveau lien de type "Blog d'une catégorie" pour chaque catégorie. Ensuite tu dupliques ton template en modifiant la couleur souhaitée à chaque fois et tu assignes chaque template au lien de menu de la catégorie souhaitée.
C'est un peu lourd comme système, mais je pense que ça peut marcher... Et après rien ne t'empêche d'optimiser en ne conservant que le fichier CSS modifié et en appelant les autres fichiers depuis le template originel.

[lomart]

Bonjour,

Une autre solution est de faire une surcharge. Pour exemple, je vais utiliser le blog des articles en vedette

1/ Créer une surcharge pour composant > com_content > featured (https://docs.joomla.org/J3.x:How_to_...ate_Manager/fr)
2/ Dans l'onglet éditeur, rechercher le fichier html/com_content/featured/default.php
3/ modifier la ligne 61 en ajoutant le code en vert

            <div class="item column-<?php echo $rowcount; ?> [B][COLOR=#008000]catid-<?php echo $item->catid; ?>[/COLOR][/B]<?php echo $item->state == 0 ? ' system-unpublished' : null; ?> span<?php echo round(12 / $this->columns); ?>"

La première partie est terminée. Maintenant le bloc de l'article est identifié par une classe catid-xx où xx est l'ID de la catégorie

Dans le fichier CSS perso, il suffit d'ajouter des règles pour personnaliser le rendu. Exemples pour la catégorie 2

.catid-2 h2{background-color:yellow}
.catid-2 h2 a {color:red}
.catid-2 h2::before{content:"icone"}

A vous d'adapter le CSS selon votre template
et de créer les autres surcharges pour les articles, blog, ...

[Eddy.vh]

Bonjpur.

On peut aussi récupérer l'ID de catégorie dans le code source de la page blog d'une catégorie et formater à l'aide d'un peu de cas.

[Leondit]

Merci pour vos réponses !

Bon, je ne suis pas un pro, mais j'ai quand même tenté de me lancer dans la modification de fichier, notamment le fichier html/com_content/featured/default.php (comme préconisé par lomart). Lorsque j'insère catid-<?php echo $item->catid; ?> dans le fichier à l'endroit indiqué, et que je me rends ensuite dans le frontend pour afficher la page des articles en vedette, je vois des modifications, mais pas pour tous les articles, ce qui est assez surprenant. En effet, les 3 premiers articles n'affichent pas les modifications, alors que les 3 suivants les affiche (les 6 articles appartiennent tous à la même catégorie pourtant).

Ensuite, je n'ai pas trouvé le moyen de remplacer l'affichage du mot "icone" par une véritable icone :-( Mes connaissances en CSS sont clairement insuffisantes. J'ai tenté de remplacer .catid-2 h2::before{content:"icone"} par des choses dans le genre .catid-2 h2::before{content:icon-calendar} mais rien n'y fait.

Et enfin, je ne sais pas si c'est possible, mais j'aimerais faire en sorte que l'on puisse associer une icone à l'intitulé d'une catégorie plutôt qu'à l'intitulé de l'article. Pour faire des tests, j'utilise le template Protostar. Sous le titre de chaque article apparaissent diverses informations, comme le nom de l'auteur, la date de publication, le nombre de vues et... la catégorie. Et en fait, c'est juste avant l'affichage de la catégorie que je voudrais faire apparaître une icone.

Merci pour votre aide.

[lomart]

En effet, les 3 premiers articles n'affichent pas les modifications, alors que les 3 suivants les affiche (les 6 articles appartiennent tous à la même catégorie pourtant).

C'est peut-être du fait qu'il y en a 3 en pleine largeur et 3 en introtext ?
Si c'est le cas, il faut aussi ajouter le code ligne 32

Ensuite, je n'ai pas trouvé le moyen de remplacer l'affichage du mot "icone" par une véritable icone

Ce peut-être simplement une image. On met content: url(../monicone.png) Le chemin est relatif à l'emplacement du fichier CSS

Et enfin, je ne sais pas si c'est possible, mais j'aimerais faire en sorte que l'on puisse associer une icone à l'intitulé d'une catégorie plutôt qu'à l'intitulé de l'article.

Tout à fait, il faut jouer sur le sélecteur CSS. Exemple
.catid-X .category-name::before {
content: url(../monicone.png)";
}

[Leondit]

Bonjour lomart, et merci pour ces précisions !

En effet, il y a 3 articles en pleine largeur, et 3 en introtext ; seuls ceux en "introtext" héritaient des modifications de titraille, et pas les 3 autres. J'ai ajouté catid-<?php echo $item->catid; ?> en ligne 32 du fichier html/com_content/featured/default.php et cela permet d'afficher les modifications sur tous les articles en vedette. C'est parfait !

J'ai utilisé content: url(../monicone.png) dans le fichier template.css pour pointer vers une image, et cela fonctionne parfaitement aussi ! (template Protostar)

En revanche, lorsque j'ai ajouté

.catid-X .category-name::before {
content: url(../monicone.png)";
}

en bas du fichier template.css, cela n'a pas permis d'afficher une image devant la catégorie. Peut-être n'ai-je pas modifié le bon fichier CSS ?

[lomart]

Quand je dis catid-X, il est évident que le X doit être remplacé par l'ID de la catégorie !

Voit-on la règle avec un inspecteur de code ?

[Leondit]

Oui, évidemment, j'ai pris soin de remplacer X par l'ID de la catégorie. En fait, j'ai fait des tests sur 2 catégories (afin de comparer) en plaçant ce code dans le fichier template.css :

.catid-8 h2 {background-color:yellow}
.catid-8 h2 a {color:red}
.catid-8 h2::before{content: url(http://localhost/joomla/images/joomla_black.png)}
.catid-9 h2 {background-color:yellow}
.catid-9 h2 a {color:red}
.catid-9 .category-name::before {
content: url(http://localhost/joomla/images/Gold_Star.png)";
}

Et les premières lignes sont bien interprétées (les règles apparaissent dans l'inspecteur de code), mais .catid-9 .category-name ne semble pas être appliqué, et je ne parviens pas à le voir via l'inspecteur de code (que ce soit en testant avec le template Protostar ou avec Purity iii).

[Leondit]

Cher lomart,

Un grand merci pour l'aide apportée ! En effet, après quelques essais (qui ont pris du temps vu que je tâtonne), je suis enfin parvenu à un rendu intéressant :-)

Tout d'abord, j'ai cherché à utiliser une icone issue d'une police de caractères pour représenter une catégorie, en plaçant l'icone juste devant le titre d'un article. Avec le template Protostar et la police Icomoon, j'ai inséré ce genre de code à la fin du fichier template.css :

.catid-8 h2:before {
    content: "\e001";
    font-family: "icomoon";
    color: #00888a;
    speak: none;
}

Ensuite, j'ai tenté de faire la même chose pour afficher une icone juste devant l'intitulé d'une catégorie (dans la partie qui figure sous le titre d'un article). Pour y parvenir, j'ai inséré (toujours à la fin du fichier template.css) :

.catid-9 .category-name:before {
    content: "\e001";
    font-family: 'icomoon';
    color: #00888a;
    speak: none;
}

Et là, joie-bonheur : ça marche ! L'icone apparaît devant l'intitulé de la catégorie. Le seul souci, c'est que le terme "Catégorie : " apparaît entre l'icone et l'intitulé de la catégorie. Bon, ce n'est pas très gênant, et si vraiment ça l'était, on peut contourner le problème :
- soit en éditant le fichier de langue et en remplaçant "Catégorie : " par un texte vide, genre ""
- soit en changeant légèrement le code dans le fichier CSS, en remplaçant "before" par "after" par exemple

J'ai eu un peu plus de mal pour obtenir la même chose avec le template purity iii : il a fallu que je remplace "icomoon" par "FontAwesome" et évidemment cahnger le "content" pour afficher l'icone choisie.

Je n'ai pas encore parcouru le web, mais je crois que l'on peut obtenir les références des icones icomoon en utilisant l'inspecteur d'éléments sur les icones de la page https://icomoon.io/#preview-free et en regardant ce qui suit la partie ".free-uni" pour obtenir le code à placer après "content", et aller sur https://fontawesome.com/icons?d=gallery pour trouver les références de la police FontAwesome.

Merci encore !
J'espère qu'un jour quelqu'un développera un petit plugin pour parvenir à faire ceci sans passer par les lignes de codes ;-)

A bientôt.