Personnaliser les couleurs des facettes

Support Bazar
#1

Bonjour,

Quel bout de code CSS permettrait de personnaliser la couleur des filtres facettes ?

Par exemple sur un affichage Bazar comme ça, sur la facette ListeThematique :

{{bazarliste id="1" template="liste_accordeon" dynamic="true" entrydisplay="modal" groups="listeListeThematique" nbcol="3" style="vertical" }}

Merci !

#2

Salut valentin,
La couleur des facettes peut être personnalisée avec ce code css :

/* la 1ere et la 4eme facette */
.results-container .filter-box:nth-of-type(1), .results-container .filter-box:nth-of-type(4) {
  --neutral-color: var(--primary-color);
}
/* la 2eme et la 5eme facette  */
.results-container .filter-box:nth-of-type(2), .results-container .filter-box:nth-of-type(5) {
  --neutral-color: var(--primary-color);
}
/* la 3eme et la 6eme facette */
.results-container .filter-box:nth-of-type(3), .results-container .filter-box:nth-of-type(6) {
  --neutral-color: var(--primary-color);
}
#3

Génial, merci !

J’ai juste eu un problème de copier-coller, il faut bien mettre deux tirets devant neutral et primary :
--neutral-color: var(--primary-color);

Et c’est le --var(primary-color) qui est à personnaliser avec le code couleur de son choix.

#4

Bonjour,

Ca ressemble à ce que je recherche mais impossible de faire fonctionner le code.

Voial le code sur ma page qui affiche un carte, des balises et 4 filtres (facettes):
{{bazarliste id=« 7 » template=« map » cluster=« true » colorfield=« listeListeDuration » dynamic=« true » entrydisplay=« modal » filtercolsize=« 2 » filterposition=« right » filtersresultnb=« false » groups=« listeListeDuration,listeListeDifficulty,listeListeBikeraftbikeraft,checkboxListeSeasonbf_checkbox_group » groupsexpanded=« true » lat=« 52.16045 » lon=« 12.04024 » search=« false » zoom=« 3 » zoommolette=« true » }}

Est-ce que le code ci-dessus est compatible?

Merci

#5

Alex,

Le code CSS est à ajouter sur une page spécifique de votre wiki : /?PageCss. Pour en savoir plus sur la personnalisation du look vous avez des infos dans la documentation.

Aussi dans le code CSS, avez-vous personnalisé vos couleurs ?
Ce qui peut donner par exemple :

.results-container .filter-box:nth-of-type(1) {
--neutral-color: #32AF6E;
#6

Super, ça marche.
Merci

#7

j’essai de mettre des couleurs dans un agenda (une bazarliste) pour que des événements apparaissent en couleur suivant les valeurs d’une liste de chaque événement.
Ca ne marche pas avec le code ci-dessus placé dans le Css
Je ne comprends pas comment est fait le lien entre ce code et la bazarliste et les critères de la liste ?
A moins que cela s’applique indifféremment pour toutes les bazarlistes du wiki ?

J’ai aussi tenté ce tuto YesWiki.net : colorier les valeurs dans la facette avec les couleurs choisies dans le rendu bazar sans succès
merci du retour!