Questa guida spiega come personalizzare l’aspetto delle caselle delle sottocategorie in Discourse, inclusa la regolazione degli stili per gli argomenti in primo piano, la modifica dello stile "Box" e la gestione del troncamento delle descrizioni delle categorie.
Livello utente richiesto: Amministratore
Le caselle delle sottocategorie in Discourse possono essere personalizzate per migliorare l’attrattiva visiva e l’organizzazione del tuo forum. Questa guida ti illustrerà varie opzioni di personalizzazione per le caselle delle sottocategorie, inclusi gli stili per gli argomenti in primo piano, lo stile "Box" e il troncamento delle descrizioni delle categorie.
Personalizzazione delle caselle con argomenti in primo piano
Per creare un aspetto audace e colorato per le tue caselle delle sottocategorie con argomenti in primo piano, puoi utilizzare CSS personalizzato. Questo metodo rimuove i loghi e applica colori di sfondo distinti a ciascuna sottocategoria.
Ecco come rendere le tue caselle delle sottocategorie simili a questa:
- Vai al pannello di amministrazione del tuo sito
- Naviga su Personalizza > Temi
- Crea un nuovo tema o modifica uno esistente
- Aggiungi il seguente CSS al tuo tema:
.category-programming {
.category-box, .category-box-inner {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > a[href] {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > a[href] {
color: white;
}
}
}
Regola i selettori CSS e i colori per adattarli ai nomi delle tue categorie specifiche e allo schema di colori desiderato.
Personalizzazione dello stile "Box"
Se stai utilizzando lo stile "Box" per le sottocategorie, puoi personalizzarlo in modo simile:
Nel CSS del tuo tema, aggiungi il seguente codice:
.category-programming .category-boxes {
.category-box {
border: none;
}
.category-box-heading {
padding: 0;
border-radius: 3px;
img.logo {
display: none;
}
h3 {
padding: 1em 0;
}
}
.category-box-ruby {
.category-box-heading {
background-color: #BF1E2E;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-php {
.category-box-heading {
background-color: #0E76BD;
}
.category-box-heading > h3 {
color: white;
}
}
.category-box-javascript {
.category-box-heading {
background-color: #D7BB2F;
}
.category-box-heading > h3 {
color: white;
}
}
}
Ancora una volta, modifica i selettori e i colori per adattarli alla struttura e alle preferenze di progettazione del tuo forum.
Gestione del troncamento delle descrizioni delle categorie
Per impostazione predefinita, Discourse tronca le descrizioni delle categorie a 4 righe nelle caselle delle categorie. Puoi regolarlo utilizzando CSS personalizzato:
Per accorciare la descrizione a due righe, aggiungi questo CSS al tuo tema:
.category-boxes .description .overflow {
max-height: 3em;
}
Regola il valore max-height per ottenere il numero desiderato di righe visibili.
Considerazioni per i dispositivi mobili
Quando si utilizza lo stile "Box con sottocategorie" sul desktop, tenere presente che gli argomenti potrebbero essere comunque visibili sui dispositivi mobili. Questo comportamento potrebbe essere intenzionale nel design di Discourse per mantenere la leggibilità su schermi più piccoli.
Se è necessario regolare il layout mobile, potrebbe essere necessario aggiungere CSS specifico per le visualizzazioni mobili o consultare uno sviluppatore di temi Discourse per una soluzione più personalizzata.