Ich verfolge Discourse seit Jahren, zögerte aber mit dem Wechsel, da ich mit Programmierung oder Kommandozeilen-Setups nicht vertraut bin. Die spannenden Funktionen und der Open-Source-Charakter haben mich jedoch schließlich überzeugt, von XenForo zu migrieren, mit Hilfe eines technikaffinen Freundes.
Jetzt bin ich bestrebt, mein Forum anzupassen! Als UI/UX-Designer habe ich viele Ideen, bin mir aber nicht sicher, wo ich anfangen soll. Bei XenForo habe ich Themes verwendet, die meiner Vision sehr nahe kamen, und mit CSS kleinere Anpassungen vorgenommen. Die integrierten Theme-Optionen ermöglichten es mir auch, bestimmte UI-Elemente wie Beitrags-Hintergründe oder Seitenleisten-Ränder mit einer GUI anzupassen.
In Discourse sehe ich eine Farbpaletten-Option, aber gibt es integrierte Steuerelemente für detailliertere Stile, oder muss ich mich für alles auf Code verlassen? Jede Anleitung wäre sehr willkommen! Abgesehen davon bin ich wirklich beeindruckt von der Funktionalität von Discourse und freue mich darauf, sein Potenzial zu erkunden.
Neben der Farbpalette wird es CSS/SCSS und bei Bedarf mehr (JS, HTML) geben.
Das könnte Sie interessieren:
Sie können Themes und Komponenten erstellen. Komponenten sind wie „Unterthemen“ (sie können Stile und Funktionen enthalten), und jede Komponente kann für ein oder mehrere Themes aktiviert werden.
Es gibt ein Befehlszeilentool, das bei der Erstellung von Themes und Komponenten hilft, und ich empfehle Ihnen, es sich anzusehen:
Es gibt auch eine spezielle Seite, die die meisten Discourse-HTML-Elemente auflistet, damit Sie einen Überblick darüber bekommen, wie sie aussehen, und Ihre Stile entsprechend erstellen können.
Die Seite muss mit der Site-Einstellung Styleguide enabled aktiviert sein.
Obwohl es mir etwas entmutigend erscheint, bin ich dem gegenüber immer noch positiv eingestellt. Vielen Dank für diese erstaunliche Antwort. Ich denke, die Stilrichtlinie wird sich auf jeden Fall als nützlich erweisen. Vielen Dank!
@manuel erweitert die Optionen für das Theme-Erstellen und Anpassen, die wenig bis gar keinen Code erfordern. Ich würde dort anfangen (ganz eigennützig würde ich gerne deinen Fortschritt dabei verfolgen, bis ich selbst Zeit finde, mich damit zu beschäftigen , also wenn du das machst, gib bitte unterwegs Feedback und Berichte weiter!!!). Es scheint, als würde er einige Vereinfachungen für uns UI/UX-Nerds entwickeln.
Nicht bei allem, aber für die Implementierung von benutzerdefinierteren Designs müssen Sie meiner Meinung nach Code schreiben. Meine empfohlenen Schritte wären:
Lernen Sie, wie Sie das Theme CLI gem verwenden, das @Canapin bereits erwähnt hat. Dies kann ein einschüchternder erster Schritt sein, aber wenn etwas Sie dazu bringt, sich in die Anpassung von Discourse zu verlieben, dann ist es dieses kleine Gem! Es ist wie ein Zauberstab für Designer Ohne es werden Sie wahrscheinlich bei jedem Schritt auf Reibungsverluste stoßen.
Üben Sie die Implementierung von Stilen mit CSS Custom Properties.
Ich denke, die Anleitungen sind in dieser Hinsicht nicht auf dem neuesten Stand. Es gibt noch viel zu tun für ein wirklich konsistentes System von Design-Tokens, aber Discourse hat bereits einen langen Weg zurückgelegt! Wenn Sie herausfinden, wo und wie Custom Properties verwendet werden, hilft Ihnen das sehr, die Best Practices für das Frontend von Discourse zu verstehen.
Sie können Custom Properties mit dem Browser-Inspektor finden oder sich diese Liste für einen ersten Eindruck ansehen: Documenting custom properties. Und Sie können neuere Vorlagen, wie die Seitenleiste, fast vollständig mit Custom Properties gestalten.
Wie @denvergeeks vorgeschlagen hat, könnten Sie sich die Canvas-Theme-Vorlage ansehen. Sie fügt eine Reihe von Custom Properties für das Layout-Styling hinzu, die im Kern nicht verfügbar sind.
, also wenn du das machst, gib bitte unterwegs Feedback und Berichte weiter!!!). Es scheint, als würde er einige Vereinfachungen für uns UI/UX-Nerds entwickeln.
Ohne es werden Sie wahrscheinlich bei jedem Schritt auf Reibungsverluste stoßen.