Voglio che sia visibile solo il colore dell’icona della sottocategoria.
La categoria principale non dovrebbe avere un colore dell’icona.
Non voglio che sembri bicolore.
Come posso fare?
[image]
Non sono sicuro che ci sia un’impostazione per questo, ma posso mostrarti come proverei a cambiarla usando CSS:
-
Fai clic con il pulsante destro del mouse sull’icona e scegli “Ispeziona”.
-
Questo aprirà gli strumenti per sviluppatori del browser. (Nota: sto usando Chrome qui, ma la maggior parte dei browser può fare la stessa cosa!) C’è molto da guardare, ma ci concentreremo su due sezioni principali: Elementi, che mostra le parti della pagina in una gerarchia nidificata, e Stili, che mostra quale CSS sta influenzando l’elemento selezionato.
-
Usare il clic destro → Ispeziona di solito ci porta abbastanza vicino all’elemento che vogliamo modificare, ma spesso è necessario scavare un po’. In questo caso, ha selezionato un elemento
<span>, ma sembra che l’elemento responsabile dell’icona sia al suo interno: un elemento::before.
-
Uno dei modi per trovare l’elemento giusto è osservare la pagina mentre passi il mouse sugli elementi elencati nel pannello degli elementi. Quando ho passato il mouse sul
::before, solo l’icona è stata evidenziata:
-
Nel pannello Stili, possiamo vedere che c’è una dichiarazione che imposta lo sfondo su rosso, ma viene sovrascritta da una regola diversa che lo imposta su uno sfondo a 2 colori. (Nota: sentiti libero di modificare qualsiasi CSS nel pannello Stili per sperimentare. Qualsiasi modifica è temporanea e verrà annullata al refresh della pagina. Puoi anche attivare o disattivare singole dichiarazioni per vederne gli effetti)
-
Possiamo creare una nuova regola per sovrascriverla di nuovo copiando la parte del selettore dalla regola in alto e la dichiarazione di sfondo originale dalla regola in basso.
-
Questa nuova regola andrebbe nel tuo CSS personalizzato/tema e, se tutto funzionasse correttamente, le icone dovrebbero essere di colori solidi che rappresentano le sottocategorie!
.badge-category__wrapper .badge-category.--has-parent:before {
background: var(--category-badge-color);
}
5 Mi Piace
Grazie per la spiegazione dettagliata
1 Mi Piace
@Bryce_Huhtala il desktop ha funzionato
Non ha funzionato su mobile
Quale codice dovrei inserire per il mobile?
Hmm, è strano. Quando uso la visualizzazione mobile sul mio computer, mostra le stesse regole CSS, quindi non sono sicuro del perché venga visualizzato in modo diverso. L’unica cosa a cui riesco a pensare è assicurarmi che il nuovo codice sia nella sezione Common.scss in modo che venga utilizzato per entrambi.
2 Mi Piace
è tutta colpa mia
Funziona bene, nessun problema
Nessun problema, sono contento che funzioni! 
2 Mi Piace
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.