Schema di colori unico per una categoria

Sviluppatore
1

Saluti.

Sto portando un vecchio forum su Discourse e il sito originale aveva un tema unico (incluso un logo dell’intestazione unico) per una delle loro categorie.

La mia soluzione attuale è un componente tematico che assomiglia a questo:

CSS:

body.category-target-category{
///sostituisci gli #hexcodes con i valori di colore di tua scelta
  --primary: #primaryhexcode;
  --secondary: #secondaryhexcode;
  --tertiary: #tertiaryhexcode;
///continua per tutti i valori di colore richiesti
}

HTML/JS:

<script type="text/discourse-plugin" version="0.2.0">
    api.onPageChange(() => {
        var logo = document.getElementById("site-logo");
        var categories = document.getElementsByClassName("category-target-category");
        if(categories.length > 0)
        {
           logo.src = "category-specific-logo-url";
        }
        else
        {
            logo.src = "standard-logo-url";
        }
    });
</script>

Attualmente, devo scorrere ogni possibile valore di colore menzionato in color_definitions.scss per sovrascriverli. Credo che i valori per questo file siano prodotti da foundation/color_transformations.scss, che li genera dai valori trovati in foundation/colors.scss. So che è possibile sovrascrivere i valori del tema colore principale tramite il menu admin o nel file about.json del componente tematico, ma credo che queste modifiche avvengano a livello di sito.

Esiste un modo più efficiente per personalizzare una categoria specifica oltre a elencare tutte le oltre 100 variabili in color_definitions.scss? Ad esempio, è possibile modificare il file foundation/colors.scss tramite un componente tematico?

Grazie per il tuo aiuto!

1 Mi Piace
2

Ciao @Rhababo :wave: benvenuto su Meta :slight_smile:

Se non hai mai lavorato con temi e sviluppo di Discourse, ti consiglio di iniziare con le risorse qui:

Inoltre, ad esempio, puoi cambiare il logo e il colore dell’intestazione e persino i colori delle icone per una categoria specifica con codice CSS simile a questo:

.category-<category-slug> .d-header {
    background: rgba(#ce0303, 0.90);
    .d-header-icons .d-icon  {
        color: #cccccc;
    }
    .header-sidebar-toggle button .d-icon {
        color: #cccccc;
        &:hover {
            color: #999999;
        }
    }
}    
    
.category-<category-slug> .d-header #site-logo.logo-small {
	content:url($small-logo);
}

.category-<category-slug> .d-header #site-logo.logo-big {
	content:url($big-logo);
}

Se crei semplicemente un nuovo tema, puoi aggiungere codice e caricare i loghi come asset. <category-slug> è il nome della categoria in minuscolo che appare nel campo URL del browser (separa le categorie genitore e sottocategorie con trattini “-”, come in categoria-genitore-sottocategoria.

Ci sono anche vari Theme component come questo che potresti cercare

3 Mi Piace
3

Grazie Lilly per il tuo aiuto e le tue risorse!

Apprezzo molto le istruzioni CSS per il logo. Molto più elegante del mio script goffo.

La tua soluzione funzionerà assolutamente per il mio caso d’uso. Sebbene selezionare ogni elemento e codificare direttamente il colore per esso sembrasse noioso. Mi chiedo se ci sia un modo per sfruttare il meccanismo che Discourse utilizza per generare la sua tavolozza di colori dagli unici 12 o giù di lì colori di base trovati in colors.scss. Penso che farlo possa richiedere un plugin piuttosto che un componente del tema, e questa è una sfida per un altro giorno.

Grazie!

2 Mi Piace