Comment puis-je rendre la couleur de l'icône de catégorie d'une seule couleur ?

Dev
1

Je veux que seule la couleur de l’icône de la sous-catégorie soit visible.
La catégorie principale ne doit pas avoir de couleur d’icône.
Je ne veux pas que cela ait l’air bicolore.

Comment puis-je faire cela ?

[image]

ert
ert905×371 27.8 KB

2

Je ne suis pas sûr qu’il existe un paramètre pour cela, mais je peux vous montrer comment j’essaierais de le modifier en utilisant CSS :

  1. Faites un clic droit sur l’icône et choisissez ‘Inspecter’.

    image
    image494×447 51.6 KB

  2. Cela ouvrira les outils de développement du navigateur. (Note : j’utilise Chrome ici, mais la plupart des navigateurs peuvent faire la même chose !) Il y a beaucoup de choses à regarder, mais nous nous concentrerons sur deux sections principales : Éléments, qui montre les parties de la page dans une hiérarchie imbriquée, et Styles, qui montre quel CSS affecte l’élément sélectionné.

    image
    image786×804 178 KB

  3. Utiliser le clic droit → Inspecter nous amène généralement assez près de l’élément que nous voulons modifier, mais il faut souvent creuser un peu. Dans ce cas, il a sélectionné un élément <span>, mais il semble que l’élément responsable de l’icône soit à l’intérieur : un élément ::before.

    image
    image766×644 113 KB

  4. L’une des façons de trouver le bon élément est d’observer la page lorsque vous survolez les éléments listés dans le panneau des éléments. Lorsque j’ai survolé le ::before, seule l’icône a été mise en surbrillance :
    image

  5. Dans le panneau Styles, nous pouvons voir qu’il y a une déclaration définissant l’arrière-plan en rouge, mais elle est remplacée par une règle différente qui la définit comme un arrière-plan à 2 couleurs. (Note : n’hésitez pas à modifier le CSS dans le panneau Styles pour expérimenter. Toutes les modifications sont temporaires et seront annulées lorsque la page sera actualisée. Vous pouvez également activer ou désactiver des déclarations individuelles pour voir leurs effets)

    image
    image768×282 80.4 KB

  6. Nous pouvons créer une nouvelle règle pour la remplacer à nouveau en copiant la partie sélecteur de la règle supérieure et la déclaration d’arrière-plan d’origine de la règle inférieure.

    image
    image1139×504 106 KB

  7. Cette nouvelle règle irait dans votre CSS personnalisé/thème et, si tout fonctionnait correctement, les icônes seraient de couleurs unies représentant les sous-catégories !

.badge-category__wrapper .badge-category.--has-parent:before {
  background: var(--category-badge-color);
}
5 « J'aime »
3

Merci pour l’explication détaillée

1 « J'aime »
4

@Bryce_Huhtala le bureau a fonctionné

N’a pas fonctionné sur mobile

Quel code dois-je entrer pour le mobile ?

5

Hmm, c’est étrange. Lorsque j’utilise la vue mobile sur mon ordinateur, elle affiche les mêmes règles CSS, je ne suis donc pas sûr de la raison pour laquelle elle s’affiche différemment. La seule chose à laquelle je peux penser est de m’assurer que le nouveau code se trouve dans la section Common.scss afin qu’il soit utilisé pour les deux.

2 « J'aime »
6

C’est entièrement de ma faute

Ça fonctionne très bien, aucun problème

7

Pas de problème, content que ça fonctionne ! :slight_smile:

2 « J'aime »
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.