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