Seguo Discourse da anni, ma ho esitato a passare dato che non ho familiarità con la programmazione o le configurazioni da riga di comando. Tuttavia, le funzionalità entusiasmanti e la natura open-source mi hanno finalmente convinto a migrare da XenForo, con l’aiuto di un amico esperto di tecnologia.
Ora sono ansioso di personalizzare il mio forum! Come UI/UX designer, ho molte idee, ma non sono sicuro da dove iniziare. Con XenForo, utilizzavo temi che si avvicinavano alla mia visione e apportavo piccole modifiche con CSS. Le opzioni di tema integrate mi permettevano anche di regolare elementi specifici dell’interfaccia utente, come gli sfondi dei post o i bordi della barra laterale con un’interfaccia grafica.
In Discourse, vedo un’opzione per la palette di colori, ma ci sono controlli integrati per uno styling più dettagliato, o devo affidarmi al codice per tutto? Qualsiasi guida sarebbe molto apprezzata! Detto questo, sono veramente colpito dalla funzionalità di Discourse ed entusiasta di esplorarne il potenziale.
Oltre alla palette di colori, ci saranno CSS/SCSS e altro se necessario (JS, HTML).
Potrebbe interessarti questo:
Puoi creare temi e componenti. I componenti sono come “sotto-temi” (possono contenere stili e funzionalità) e qualsiasi componente può essere abilitato per uno o più temi.
Esiste uno strumento da riga di comando che aiuta nella creazione di temi e componenti e ti consiglio di dargli un’occhiata:
Esiste anche una pagina speciale che elenca la maggior parte degli elementi HTML di Discourse in modo da poter avere una panoramica del loro aspetto e creare i tuoi stili di conseguenza.
La pagina deve essere abilitata con l’impostazione del sito Styleguide enabled.
Anche se mi sembra un po’ scoraggiante, mi sento comunque positivo al riguardo, grazie per questa incredibile risposta, penso che la guida di stile tornerà sicuramente utile. Grazie mille!
@manuel sta ampliando le opzioni non (o meno) di codifica per la creazione e la personalizzazione dei temi. Inizierei da lì (egoisticamente, mi piacerebbe seguire i tuoi progressi finché non troverò il tempo di approfondire , quindi se lo fai, per favore fornisci/pubblica feedback e resoconti lungo il tuo percorso!!!). Sembra che stia innovando alcune semplificazioni per noi nerd dell’UI/UX.
Non per tutto, ma per implementare qualsiasi design più personalizzato, penso che dovrai scrivere codice. I miei passaggi consigliati sarebbero:
Impara a usare la Theme CLI gem che @Canapin ha già menzionato. Questo può essere un primo passo scoraggiante, ma se c’è qualcosa che ti farà innamorare della personalizzazione di Discourse, è quella piccola gemma! È come una bacchetta magica per i designer Senza di essa, probabilmente sentirai attrito ad ogni passo.
Esercitati nell’implementazione degli stili utilizzando le proprietà personalizzate CSS.
Penso che le guide non siano aggiornate a questo riguardo. C’è ancora molto da fare per un sistema veramente coerente di design token, ma Discourse ha già fatto molta strada! Capire dove e come vengono utilizzate le proprietà personalizzate ti aiuterà molto a comprendere le best practice per la parte front-end di Discourse.
Puoi trovare le proprietà personalizzate usando l’ispettore del tuo browser, o dare un’occhiata a questo elenco per una prima impressione: Documenting custom properties. E puoi stilizzare modelli recenti, come la barra laterale, quasi interamente con proprietà personalizzate.
Come suggerito da @denvergeeks, potresti dare un’occhiata al modello del tema Canvas. Quello che fa è aggiungere un set di proprietà personalizzate per lo styling del layout che non sono disponibili nel core.
, quindi se lo fai, per favore fornisci/pubblica feedback e resoconti lungo il tuo percorso!!!). Sembra che stia innovando alcune semplificazioni per noi nerd dell’UI/UX.
Senza di essa, probabilmente sentirai attrito ad ogni passo.