Cambia il colore dello sfondo della categoria per le caselle

Ho lottato per scoprire come cambiare il colore di sfondo delle categorie per le caselle delle categorie:

L’obiettivo è ereditare il colore principale della categoria e aggiungere trasparenza allo sfondo:

Qualcuno sa come posso ottenere questo risultato?

1 Mi Piace

Ciao,

Questo è possibile con css e una piccola modifica al template. :slightly_smiling_face:

Su desktop, il bordo delle categorie ha una variabile di colore che puoi usare anche per lo sfondo.

Questa è la variabile --category-color che è il colore del bordo.
Screenshot 2022-09-12 at 17.25.56

Ma poiché questa variabile è un valore esadecimale non puoi renderla trasparente. Tuttavia, puoi aggiungerla a uno pseudo ::before dove puoi anche impostare l’opacità.

L’ho reso un componente in modo che tu possa installarlo o fare un fork e modificare ciò che desideri. :slightly_smiling_face:

Componente: GitHub - VaperinaDEV/discourse-category-background-color


Il CSS desktop appare così:


Su mobile questa variabile di colore manca dal template, quindi devi aggiungere questo stile qui:


Dopo questo puoi usare la variabile --category-color e fare qualcosa di simile a quanto fatto su desktop:

Desktop


Mobile

3 Mi Piace

Sei il migliore!

Grazie per la spiegazione, ci giocherò un po’!

1 Mi Piace

Ehi @MarcP, scusa, mi sono completamente dimenticato che volevi questo per le caselle delle categorie. :smiley: Ho aggiornato il CSS desktop per funzionare anche con le caselle delle categorie.

1 Mi Piace

Ah grazie, stavo già capendo come far funzionare le caselle! È stato più complicato di quanto pensassi. Molto apprezzato!

1 Mi Piace