Come personalizzare l'aspetto delle sezioni come Amazon?

Ciao, comunità!

Ho recentemente installato Discourse e vorrei personalizzare l’aspetto.

Tuttavia, non so come selezionare gruppi di sezioni con rientri rispetto ad altre sezioni, né come creare un elenco di sottosezioni in una colonna.

Ho esaminato le impostazioni nel pannello di amministrazione, ma non ho trovato nulla di simile che potesse aiutarmi.

Sarei grato per qualsiasi aiuto.
Ho iniziato da poco a studiare questa piattaforma.

Grazie!

Ad esempio, per trasformare un elenco di sottosezioni in una singola colonna, devo modificare i valori qui (category-list.scss)

In questi valori

Ma come posso farlo correttamente tramite il pannello di amministrazione senza modificare direttamente i file sul server?

display: block;
align-items: baseline;
margin-right: 0;

1 Mi Piace

Ho capito correttamente: si deve fare così?
È questo il modo corretto per risolvere il problema?

Questo è il CSS predefinito per le sottocategorie. Assegna semplicemente una “Categoria genitore” nella finestra di modifica della categoria e imposta la stessa colore per la sottocategoria e la categoria genitore.

1 Mi Piace

Non capisco davvero cosa c’entri il colore.
Di default, le sottocategorie vengono visualizzate come segue: una dopo l’altra, in orizzontale

Dopo aver applicato il CSS che ho indicato sopra, le sottosezioni si allineano in verticale come volevo.

Volevo solo sapere: aggiungere il CSS nel formato che ho indicato, tramite il pannello di amministrazione, è il modo corretto?

E la seconda domanda principale è: come fare in modo che le sezioni stesse siano separate l’una dall’altra da rientri, come nell’esempio dello screenshot del forum di Amazon?

1 Mi Piace

Ah, capisco.

La cosa corretta da fare è inserire questo CSS in un componente del tema, che è solo leggermente diverso da ciò che stai facendo!

Se modifichi il tema Chiaro, le modifiche non saranno visibili nel tema Scuro.

Crea un unico componente del tema per tutte le personalizzazioni locali del tuo sito!

4 Mi Piace

Grazie per il consiglio su come sia meglio allocarlo come componenti.

Se parliamo di un esempio specifico Amazon - non si tratta solo di CSS, anche il loro markup differisce da quello standard (HTML).

Come organizzare rapidamente la stessa visualizzazione?

Purtroppo ho una conoscenza superficiale del layout, sono uno sviluppatore backend, quindi il layout è difficile.

Posso trasferire questo layout senza modificare il codice dei file sorgente stessi?

Ho esaminato molti temi pronti diversi
Ma la maggior parte di essi è simile tra loro e non ne ho trovato uno così conciso come Amazon. Forse possiamo farlo insieme alla community? Con gli spazi tra le sezioni sembra più conciso

Il loro markup è parzialmente diverso perché sembrano non aver aggiornato il loro sito da molto tempo.

Aggiungendo questo CSS arrivi quasi alla fine per quanto riguarda lo stile delle sottocategorie…

.category-list .subcategories .subcategory {
  display: flex;
}

Se vuoi apportare modifiche al markup, dovrai iniziare a esplorare come funzionano le sovrascritture dei template in Discourse… ciò si trova nella sezione avanzata della Guida per sviluppatori ai temi di Discourse