Questa guida spiega come personalizzare lâaspetto delle caselle delle sottocategorie in Discourse, inclusa la regolazione degli stili per gli argomenti in evidenza, la modifica dello stile âBoxesâ e la gestione dellâabbreviazione delle descrizioni delle categorie.
Livello utente richiesto: Amministratore
Le caselle delle sottocategorie in Discourse possono essere personalizzate per migliorare lâaspetto visivo e lâorganizzazione del tuo forum. Questa guida ti illustrerĂ le varie opzioni di personalizzazione per le caselle delle sottocategorie, inclusi gli stili per gli argomenti in evidenza, lo stile âBoxesâ e lâabbreviazione delle descrizioni delle categorie.
Personalizzazione delle caselle con argomenti in evidenza
Per creare un aspetto audace e colorato per le tue caselle delle sottocategorie con argomenti in evidenza, puoi utilizzare CSS personalizzato. Questo metodo rimuove i loghi e applica colori di sfondo distinti a ciascuna sottocategoria.
Ecco come far apparire le tue caselle delle sottocategorie in questo modo:
- Vai al pannello di amministrazione del tuo sito
- Naviga in Personalizza > Temi
- Crea un nuovo tema o modificane 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;
.category-logo {
display: none;
}
h3 {
padding: 2em 0;
}
}
.category-box-ruby {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #BF1E2E;
}
}
.category-box-php {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #0E76BD;
}
}
.category-box-javascript {
.category-box-heading > a[href] {
color: white;
}
.category-box-heading {
background-color: #D7BB2F;
}
}
}
Regola i selettori CSS e i colori per adattarli ai nomi delle tue categorie specifiche e alla palette di colori desiderata.
Personalizzazione dello stile âBoxesâ
Se stai utilizzando lo stile âBoxesâ 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-logo {
display: none;
}
}
.category-box-heading {
padding: 0;
border-radius: 3px;
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;
}
}
}
Anche in questo caso, modifica i selettori e i colori per adattarli alla struttura del tuo forum e alle preferenze di design.
Gestione dellâabbreviazione delle descrizioni delle categorie
Per impostazione predefinita, Discourse abbrevia le descrizioni delle categorie a 4 righe nelle caselle delle categorie. Puoi regolare questo aspetto utilizzando CSS personalizzato:
Per accorciare la descrizione a due righe, aggiungi questo CSS al tuo tema:
.category-boxes .description {
-webkit-line-clamp: 2;
}
Regola il valore di -webkit-line-clamp per ottenere il numero desiderato di righe visibili.
Considerazioni per i dispositivi mobili
Quando utilizzi lo stile âBoxes con sottocategorieâ su desktop, tieni presente che gli argomenti potrebbero essere ancora visibili sui dispositivi mobili. Questo comportamento potrebbe essere intenzionale nel design di Discourse per mantenere la leggibilitĂ su schermi piĂč piccoli.
Se hai bisogno di regolare il layout per dispositivi mobili, potresti dover aggiungere CSS specifici per le visualizzazioni mobili o consultare uno sviluppatore di temi Discourse per una soluzione piĂč personalizzata.
