[RÉGLÉ] une couleur assignée à une catégorie?

[altacrea]

Bonjour,
J'avance doucement dans ma personnalisation Cassiopiea (encore merci pour vos conseils)
Le custom de l'info_block me cause (encore) quelques soucis.

Je voudrais une couleur différente pour chaque catégorie :

>> Captures en mode Blog 3 colonnes

1- AVANT : Mes infos de catégories sont toutes sur fond noir, sans distinction (la petite "étiquette" noire, en bas, à gauche, de chaque photo)



2- APRES : Chaque catégorie est assignée à une couleur avec son background css ! (cette capture est une simu, j'ai pas réussie en vraie)



Le défi est pas évident et je suis pas sur que ce soit possible ?
Qu'en pensez vous ?

Merci

NB :Avec UP! je dois pouvoir bricoler cette fonction, mais, je préférerais par override

[daneel]

Bonjour,

Voici une idée d'après ta demande.

- Dans l'administration du site, cliquer sur contenus > Groupes de champs
- Choisissez categorie dans le menu en haut à gauche de la liste puis sur le bouton nouveau pour créer un groupe de champs
- Dans champs, on choisit également "catégorie" dans le menu de selection puis on définit un nouveau champ de type couleur que l'on associera au groupe de champ.
Ne pas oublier de desactiver affichage automatique dans l'onglet paramètre du champ.

Pour rappel, l'infoblock correspond à la mise en forme d'un article dans l'affichage blog. Pour modifier l'affichage, il faut avoir précédemment effectuer une substitution des mises en page standard du contenu joomla (layout/joomla/content) depuis l'administration du site.

L'affichage du terme "catégorie" dans cette vue blog correspond à une mise en forme enfant de l'infoblock présent dans le sous-repertoire du même nom (infoblock). Le fichier se nomme category.php Sous Cassiopeia, le chemin est : templates\cassiopeia\html\layouts\joomla\content\i nfo_block\category.php
Donc editer le fichier category.php puis ajouter le champ correspondant en style inline (voir la documentation officielle à ce sujet)

L'avantage de cette solution, c'est de pouvoir définir la couleur via la palette de couleur du champ et de continuer à gérer le site sans devoir toucher au template par la suite.
SI vous avez d'autres avis ou une meilleure adaptation (notamment avec l'utilisation de variables css), n'hésitez pas à partager vos idées. !

[woluweb]

Très bon plan que celui de Yann aka daneel !

Une variante : ne pas créer de Champ Perso (je penserais jamais que je dirais qqch comme ça ), mais dans l'override de templates\cassiopeia\html\layouts\joomla\content\i nfo_block\category.php, simplement ajouter une classe comprenant l'ID ou l'Alias de la Catégorie.

Du coup, c'est directement dans le fichier CSS qu'on pourra dire que
.category_web { background-color: red;}
.category_print { background-color: blue;}

En fait, si on veut que l'utilisateur final puisse changer la couleur depuis l'interface, je partirais vers le Champ Perso évoqué par Yann.
Si les couleurs ne changent pas souvent ou si l'utilisateur est capable d'éditer un fichier CSS, alors ma variante fait sens.

[daneel]

Une variante : ne pas créer de Champ Perso (je penserais jamais que je dirais qqch comme ça

Effectivement, je reste sans voix ! Tu as eu raison de l'évoquer car c'est une solution plus simple à réaliser.

[woluweb]

En fait, c'est un peu comme cela que ça fonctionne en natif pour les Tags si je me souviens bien (en tout cas dans J3, dans J4 j'ai pas encore eu besoin des tags) : chaque tag a une classe avec son ID, ce qui permet de personnaliser son style.

[altacrea]

Une variante : ne pas créer de Champ Perso (je penserais jamais que je dirais qqch comme ça ), mais dans l'override de templates\cassiopeia\html\layouts\joomla\content\i nfo_block\category.php, simplement ajouter une classe comprenant l'ID ou l'Alias de la Catégorie

L’idée est super mais : "ajouter une classe comprenant l'ID ou l'Alias de la Catégorie". Je comprends la démarche mais je vois pas trop où mettre les id dans le code :

<dd class="category-name">
<?php echo LayoutHelper::render('joomla.icon.iconclass', ['icon' => 'icon-folder-open icon-fw']); ?>
<?php $title = $this->escape($displayData['item']->category_title); ?>
<?php if ($displayData['params']->get('link_category') && !empty($displayData['item']->catid)) : ?>
<?php $url = '<a href="' . Route::_(
RouteHelper::getCategoryRoute($displayData['item']->catid, $displayData['item']->category_language)
)
. '" itemprop="genre">' . $title . '</a>'; ?>
<?php echo Text::sprintf(//'COM_CONTENT_CATEGORY',
$url); ?>
<?php else : ?>
<?php echo Text::sprintf(//'COM_CONTENT_CATEGORY',
'<span itemprop="genre">' . $title . '</span>'); ?>
<?php endif; ?>
</dd>

De plus, dans mon exemple, il y a 3 couleurs, donc 3 id à incorporer? Pige pas...

[altacrea]

puis ajouter le champ correspondant en style inline (voir la documentation officielle à ce sujet)

J'ai refait tes étapes et je suis bloqué sur la phrase, hélas, la + importante !

Avec J3, déjà réalisé des overrides avec insertion de champs mais avec J4 les codes semblent différents.

[woluweb]

j'ai pas le fichier entier sous les yeux, mais à voir ton extrait, je pense que l'ID de catégorie est

$displayData['item']->catid)

Et non, tu dois pas le mettre 10 fois dans le code si tu as 10 catégories : si tu as 10 catégories, chacune n'a qu'un seul ID
Par contre, dans ton CSS tu auras autant de lignes que de couleurs différentes que tu veux pour les Catégories

[altacrea]

j'ai pas le fichier entier sous les yeux, mais à voir ton extrait, je pense que l'ID de catégorie est

$displayData['item']->catid)

Euh, cela doit être simple pour toi, mais, moi je suis largué. Je vais bidouiller en m'inspirant du fichier tag.php pour tenter de comprendre le code à modifier/insérer.

[daneel]

Euh, cela doit être simple pour toi, mais, moi je suis largué. Je vais bidouiller en m'inspirant du fichier tag.php pour tenter de comprendre le code à modifier/insérer.

D'après ce que propose Marc et si on utilise l'id de la catégorie, le code doit être après un <a ou <span ou div et doit être adapté avec ta personnalisation en classe css... Cela donne un truc comme

class="category_'.$displayData['item']->catid.'"

ce qui donnera <a class="category_8" ..... si 8 est l'id de la catégorie et ainsi de suite.
Il te restera à définir dans ta css, ce qui correspond à category_8
.category_8 { background-color: red;}

[altacrea]

Merci daneel pour l'indice
class="category_'.$displayData['item']->catid.'"

Je continue à bidouiller en mode "aveugle sur la route" avec cette petite lueur. (pour le css en rapport ok, ça, je comprend)

NB : Pour rappel c'est du Joomla 4!

[altacrea]

C'est bon, l'override fonctionne, j'ai trouvé et compris la bonne ligne à changer

Dans le dossier override d'info_block, fichier category.php

il faut modifier le début de ligne :

<?php $url = '<a href="' . Route::_(

par l'ajout class="category_'.$displayData['item']->catid.'"

<?php $url = '<a class="category_'.$displayData['item']->catid.'" href="' . Route::_(

et bien sur le css en rapport pour, par ex, id 15 et 16
.category_15 { background-color: red;}
.category_16 { background-color: blue;}

>> Lorsque l'on inspecte le code on voit bien que cela a changé ! top !



Solution validée !
Merci

[woluweb]

en plus, c'est minime comme changement : juste une ligne de PHP à changer, puis une ligne de CSS par catégorie à "coloriser"