Also, du hast Interesse daran, dein eigenes Theme für Discourse zu entwerfen? Dann bist du hier genau richtig 
Dieser Leitfaden konzentriert sich stärker auf die SCSS/CSS-Aspekte der Arbeit mit Themes in Discourse. Wenn du auch Kenntnisse in JS/EmberJs/Handlebars hast, kannst du noch tiefer einsteigen, indem du dir diesen Leitfaden ansiehst.
Ich werde dir meine persönlichen Methoden zum Designen und Theming in Discourse vorstellen. Wie bei den meisten Dingen gibt es HAUFENWEISE Möglichkeiten, deine eigenen Designs umzusetzen. Ich nutze die Inspektor-Tools beim Erstellen von Themes sehr intensiv und werde dir in diesem Beitrag ein paar Mal zeigen, wie ich das mache.
Einrichtung für das Theming
Bitte lies zuerst den Anfängerleitfaden zur Verwendung von Discourse-Themes sowie die Struktur von Themes…, bevor du weitermachst. Eine tiefgehende Kenntnis ist an dieser Stelle nicht notwendig, aber diese Artikel geben dir vor dem Start ein wenig mehr Vertrautheit.
Um das Theming in Discourse bestmöglich zu gestalten, empfehle ich dir, dich mit folgenden Schritten einzurichten, um einen schnellsten und effizientesten Designprozess zu gewährleisten. Diese Schritte ermöglichen es dir, deine Änderungen sofort zu sehen, ohne dass du sie im Admin-Panel einer Discourse-Website speichern und aktualisieren musst.
Es ist absolut möglich, diesen Leitfaden über die Admin-Konsole durchzuarbeiten (vorausgesetzt, du hast Admin-Zugriff auf ein Discourse-Forum.)
- Installiere Discourse Theme CLI und lies dir das entsprechende Thema durch, um zu verstehen, was es leisten kann.
- Hole dir einen API-Schlüssel von https://discourse.theme-creator.io/
- Melde dich mit deinem Meta-Konto an.
- Klicke auf Meine Themes.
- Klicke auf den API-Schlüssel.
- Klicke im Popup-Fenster auf API-Schlüssel generieren und kopiere den generierten Schlüssel (wir werden ihn gleich verwenden).
Ausführen des Discourse Theme CLI
Nachdem das Discourse Theme CLI installiert und dein API-Schlüssel bereit ist, öffne deinen bevorzugten Texteditor oder das Terminal-Fenster und wechsle in das Verzeichnis, in dem dein Theme-Ordner eingerichtet werden soll.
Führe dort den folgenden Befehl aus: discourse_theme new dein_theme_name und beantworte die Eingabeaufforderungen wie folgt:
-
Wie möchtest du dein Theme nennen? Wähle deinen Theme-Namen.
-
Möchtest du mit dem Überwachen dieses Themes beginnen? Ja.
-
Was ist die Root-URL deiner Discourse-Site?
https://discourse.theme-creator.io/ -
Möchtest du diesen Site-Namen speichern…? Ja.
-
Was ist dein API-Schlüssel? Gib den von Theme Creator erhaltenen API-Schlüssel ein.
-
Möchtest du diesen API-Schlüssel speichern…? Ja.
-
Wähle bei der Aufforderung Erstellen und mit einem neuen Theme synchronisieren.
-
Wähle bei der Aufforderung zu untergeordneten Theme-Komponenten Nichts tun.
Wenn alles korrekt funktioniert hat, solltest du nun auf https://discourse.theme-creator.io/ unter Meine Themes navigieren und dein neues Theme in der Themenliste links sehen.
Um diese Änderungen in Echtzeit anzuzeigen, klicke auf deinen Theme-Namen und dann unten im Informationsbereich auf Vorschau.
Das Theme CLI überwacht nun auch Änderungen im neu erstellten Verzeichnis und speichert sowie aktualisiert das Theme auf theme-creator bei jeder Änderung.
Erste Schritte
Das Discourse Theme CLI hat für uns ein Theme-Gerüst im Ordner erstellt, den wir im zuvor ausgeführten Befehl angegeben haben. Viele generierte Dateien werden wir nicht benötigen, daher löschen wir alles außer Folgendem:
common/common.scss
desktop/desktop.scss
mobile/mobile.scss
about.json
Führe im Verzeichnis zudem rm -rf .git aus, um die Git-Versionierung zu entfernen; diese wird für diesen Leitfaden nicht benötigt.
Dein Theme-Verzeichnis sollte nun wie folgt aussehen:
Es ist erwähnenswert, dass die Styles, die wir diesen Dateien hinzufügen, in ihrem jeweiligen Verwendungszweck gerendert werden. Styles in common.scss werden auf Desktop und Mobile angewendet, während Styles in desktop.scss nur auf Desktop-Browsing und solche in mobile.scss nur auf Mobile-Ansichten angewendet werden.
Hello World (in Farbe)
Discourse verwendet SCSS für sein Styling. Um Styles bestmöglich zu nutzen, solltest du dich vielleicht mit SASS vertraut machen. Falls nicht, kannst du diesem Leitfaden trotzdem folgen.
Okay, jetzt zu dem, worauf wir alle gewartet haben… THEMING!
Momentan hat unsere about.json noch keine definierten color_schemes. Füge daher den folgenden Code in diesen Abschnitt ein und speichere.
{
"name": "mein theme",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Standard": {
"primary": "222222",
"secondary": "ffffff",
"tertiary": "0088cc",
"quaternary": "e45735",
"header_background": "ffffff",
"header_primary": "333333",
"highlight": "ffff4d",
"danger": "e45735",
"success": "009900",
"love": "fa6c8d"
}
}
}
Wenn du deinen Browser geöffnet hast, wirst du noch keine Änderungen bemerkt haben, da dies das Standard-Farbschema ist, das verwendet wird, wenn kein Schema vorhanden ist.
Theme-Übersicht
Um etwas zu haben, das wir in diesem Leitfaden tatsächlich umsetzen können, zeige ich dir, wie man ein einfaches Theme basierend auf dieser Farbpalette erstellt.
Hintergrundfarbe + Primärfarbtexfarbe ändern
Lass uns etwas ganz Einfaches machen. Wir ändern den Wert "Secondary" unseres aktuellen Farbschemas. Ändern wir ihn in "secondary": "EEF4F7" (dadurch ändert sich die Hintergrundfarbe). Ändern wir auch den Wert "primary" in "203243".
Mit nur dieser Zeile haben wir bereits das Aussehen und die Anmutung unseres Forums verändert. Viel Anpassung lässt sich allein durch das Bearbeiten der Farben im Farbschema erreichen.
Verwendung des Farbschemas
Alle folgenden Schlüssel sind in der Datei about.json unter dem entsprechenden Farbschemanamen definiert. Diese Beschreibungen dienen als gute Referenz, um dir zu helfen, den Hauptzweck jedes Variablennamens zu verstehen:
| Farbe | Beschreibung |
|---|---|
| primary | Meist Text, Symbole und Rahmen |
| secondary | Die Haupt-Hintergrundfarbe und die Textfarbe einiger Buttons |
| tertiary | Links, einige Buttons, Benachrichtigungen und Akzentfarbe |
| quaternary | Navigationslinks |
| header_background | Hintergrundfarbe des Site-Headers |
| header_primary | Text und Symbole im Site-Header |
| highlight | Die Hintergrundfarbe hervorgehobener Elemente auf der Seite, wie Beiträge und Themen |
| danger | Hervorhebungsfarbe für Aktionen wie das Löschen von Beiträgen und Themen |
| success | Wird verwendet, um anzuzeigen, dass eine Aktion erfolgreich war |
| love | Die Farbe des „Gefällt mir“-Buttons |
Jede dieser Variablen können wir in unseren SCSS-Dateien wie folgt verwenden.
body {
background-color: var(--primary);
}
Es werden auch andere Versionen jeder Farbe für uns erstellt. Dinge wie var(--primary-medium) oder var(--primary-very-low) können verwendet werden, um verschiedene Töne derselben Farbe zu erhalten.
Lass uns die anderen Farben in unserem Standard-Farbschema so anpassen:
"Standard": {
"primary": "203243",
"secondary": "EEF4F7",
"tertiary": "416376",
"quaternary": "5E99B9",
"header_background": "FaFaFa",
"header_primary": "EEF4F7",
"highlight": "86BDDB",
"danger": "8F393E",
"success": "70DB82",
"love": "FC94CB"
}
Du kannst alle verfügbaren Variablen für die Verwendung in deinen SCSS-Dateien sehen, wenn du auf dem Theme Creator während der Vorschau deines Themes auf den Link Style Guide klickst und dann im linken Menü auf Farben klickst.
Der Styleguide ist ein sehr hilfreicher Bereich, den du dir ansehen solltest, wenn du ein benutzerdefiniertes Theme erstellst. Jeder Atom zeigt dir, wie bestimmte Elemente von Discourse mit deinen angewendeten Styles aussehen.
Tiefer einsteigen
Nachdem wir den vorherigen Abschnitt hinter uns haben, ist es an der Zeit, etwas tiefer zu gehen, was in Discourse nur mit SCSS möglich ist. (Tipp: HAUFENWEISE!)
Styling des Headers
Du wirst bemerken, dass unsere vorherigen Änderungen am Farbschema bei unserem Header noch Verbesserungspotenzial lassen. Die Symbole sind kaum sichtbar!
Der Discourse-Header enthält einen Container (mit einer Hintergrundfarbe), der ein Site-Logo sowie die Navigations-Symbole rechts hält. All dies kann angepasst werden.
Die Zielklasse zum Anpassen des Headers ist .d-header.
Füge in unserer Datei common/common.scss Folgendes hinzu:
.d-header {
box-shadow: none;
border-bottom: 1px solid var(--primary-low-mid);
height: 5em;
}
Dies entfernt den Standard-Box-Schatten am Header, gibt ihm etwas mehr Höhe und setzt einen unteren Rahmen, um uns eine gewisse Abgrenzung zu geben.
Für die Symbole – Füge innerhalb der .d-header SCSS-Klammern diesen verschachtelten Code hinzu.
.d-header {
// ...vorheriger Code
.d-icon {
color: var(--primary-low-mid);
}
}
Das sieht gut aus, aber ein aufmerksames Auge wird bemerken, dass die erhöhte Header-Höhe uns weniger Platz zwischen ihm und den restlichen Discourse-Forum-Elementen gelassen hat!
Der Abstand zwischen dem Hauptbereich und dem Header wird durch das Ziel #main-outlet gesteuert. Lass uns diesen Abstand etwas vergrößern, indem wir Folgendes an den unteren Rand deiner common/common.scss-Datei hinzufügen.
#main-outlet {
padding-top: 6.5em;
}
Navigationscontainer
Der Navigationscontainer enthält die folgenden Teile.
Der linke Bereich sind die Dropdown-Menüs für Kategorie/Tag, gefolgt von den Navigationslinks und endend mit dem Button “Neues Thema”.
Kategorie- / Tag-Dropdown
Lass uns Änderungen in diesem Bereich vornehmen. Füge dazu Folgendes zu deiner Datei common.scss hinzu.
.navigation-container {
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
}
}
Hier zielen wir auf .select-kit-header, um ihnen jeweils einen identischen Border-Radius sowie eine hellere Hintergrundfarbe zu geben.
Beim Klicken auf eines davon öffnet sich ein Dropdown-Menü.
Momentan hat es auch harte Ecken, also fügen wir Styles hinzu, um diese abzurunden, und ändern die Hintergrundfarbe so, dass sie der des Headers entspricht.
.navigation-container {
.select-kit.combo-box {
// ...vorheriger Code
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
}
}
}
}
Das ergibt das folgende Aussehen…
Wenn du genau hinsiehst, kannst du sehen, dass unsere Änderungen einen kleinen Rahmen oben rechts im Suchbereich sichtbar gemacht haben.
Lass uns das beheben, indem wir im Inspektor unseres Browsers nachsehen. Dies ist immer ein super hilfreiches Werkzeug, um zu lernen, welche Klassen/IDs wir ansprechen müssen, um Styles korrekt anzuwenden.
Mit dem sichtbaren Dropdown-Menü klicke mit der rechten Maustaste auf den Suchbereich und wähle “Untersuchen” des Elements in deinem Browser.
Wir können sehen, dass diese Eingabe in einem div mit der Klasse select-kit-filter liegt.
Wenn wir uns die Regeln ansehen, die auf diesen Selektor angewendet werden, sehen wir, dass er derzeit einen oberen und unteren Rahmen sowie einige Abstände hat. Wir möchten nur das Styling des oberen Rahmens ändern.
Füge den folgenden Code verschachtelt in das .select-kit-body-SCSS von früher hinzu.
.select-kit.combo-box.category-drop,
.select-kit.combo-box.tag-drop {
.select-kit-body {
// ...vorheriger Code
.select-kit-filter {
border-top: 0px;
}
}
}
Damit sollte unser Code zum Styling des Navigationscontainers so aussehen.
.navigation-container {
// Kategorie + Tag Dropdown
.select-kit.combo-box {
.select-kit-header {
border-radius: 0.9em;
background-color: var(--header_background);
}
&.category-drop,
&.tag-drop {
.select-kit-body {
border-radius: 0.9em;
background-color: var(--header_background);
.select-kit-collection {
background-color: var(--header_background);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
.select-kit-filter {
border-top: 0px;
}
}
}
}
}
Navigationslinks
Lass uns einige Styles hinzufügen, damit diese Navigationslinks ähnlich aussehen wie hier:
Lass uns unseren Inspektor erneut verwenden, um herauszufinden, was wir hier ansprechen sollen.
Wir können sehen, dass unsere Navigationselemente in einem UL mit der Klasse "nav nav-pills ..." liegen.
Zurück in unserer Datei common.scss, unter dem vorherigen Abschnitt, aber immer noch verschachtelt innerhalb von navigation-container, fügen wir Folgendes hinzu:
.nav-pills {
& > li a {
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
}
}
Diese Änderung zielt nur auf unsere Links mit der Klasse active ab, die Kinder von nav-pills sind. Diese Änderung sollte unseren aktiven Link so aussehen lassen:
Das ist in Ordnung, aber ich möchte, dass der untere Rahmen nur so weit reicht wie der Text. Dazu fügen wir oberhalb der Zeile &.active { Folgendes hinzu, was alle A-Links innerhalb der Navigation <li>-Tags beeinflusst.
// ...anderer Code
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
// ...weiterer Code
}
}
}
Jetzt müssen wir den “Hover”-Effekt so gestalten, dass er dem “Active”-Effekt entspricht.
Unter unserem vorherigen &.active fügen wir hinzu:
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
Also sollte unser gesamter Navigationscode nun so aussehen:
// Nav Pills
.nav-pills {
& > li a {
padding: 0;
margin-right: 20px;
color: var(--tertiary-high);
border-bottom: 4px solid transparent;
&.active {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--tertiary);
}
&:hover {
color: var(--tertiary);
background-color: var(--secondary);
border-bottom: 4px solid var(--primary);
}
}
}
Buttons
Buttons in Discourse gibt es in vielen Formen und Größen. Du kannst eine Auswahl davon im Style Guide im Abschnitt Buttons sehen.
Ich möchte die meisten Buttons in diesem Theme abgerundet mit einigen benutzerdefinierten Styles gestalten. Dies ändert den + Neues Thema-Button sowie andere Buttons auf der gesamten Site.
Am unteren Rand unserer Datei common.scss fügen wir Folgendes hinzu:
.btn {
background-color: var(--header_background);
color: var(--primary);
border-radius: 1.2em;
border: 1px solid var(--primary-low-mid);
.d-icon {
color: var(--primary);
}
&:hover {
background-color: var(--quaternary-low);
color: var(--primary);
.d-icon {
color: var(--primary);
}
}
&.btn-default,
&.btn-primary {
padding: 10px 12px;
}
}
Das lässt unsere Buttons so aussehen:
Jetzt, da unsere Buttons gestylt sind, möchte ich auf etwas bezüglich Button-Styling hinweisen und warum es wichtig ist, alle deine Designs zu testen.
Klicke dich in deiner Site-Vorschau zu einem Thema durch und drücke dann den Antworten-Button auf einer Themenantwort oder vom Antwort-Button am Ende des Themenstreams. Du wirst sehen, dass unser Button-Styling einige Dinge beeinflusst hat, die wir vielleicht nicht im Sinn hatten.
Ich möchte nicht, dass diese Textbearbeitungs-Buttons von meinem vorherigen Styling betroffen sind. Dies erfordert etwas komplexeres SASS/CSS, aber wir können unseren Code so anpassen, dass er diese Buttons nicht (:not()) beeinflusst. 
Füge diese Codezeile vor unserem aktuellen .btn-Ziel hinzu. Dies wird unseren Styles mitteilen, dass sie nur auf Buttons angewendet werden sollen, die keine Kinder von .d-editor-button-bar sind.
:not(.d-editor-button-bar) > .btn
Okay, das hat gut funktioniert… aber warte! Jetzt gibt es diesen seltsamen Rebellen, der sein eigenes Ding macht.
Beim Untersuchen im Browser sehe ich, dass dieser Button die Klasse .select-kit-header hat, da beim Klicken auf dieses Zahnrad weitere Optionen angezeigt werden.
Jetzt, wo wir wissen, dass wir diesen Button NICHT ansprechen wollen, fügen wir mehr :not()-Funktionalität zu unserem Code hinzu.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header)
Dies wählt alle Buttons aus, die KEINE Kinder von .d-editor-button-bar sind und NICHT die Klasse .single-select-header haben. Ich weiß, das ist etwas verwirrend, aber innerhalb von Discourse gibt es viele bewegliche Teile, sodass das Styling manchmal sehr spezifisch sein muss, um Elemente korrekt zu beeinflussen.
Ich habe auch bemerkt, dass unser aktuelles Styling den Modal-Schließ-Button unangemessen beeinflusst. Klicke auf alles, was ein Modal öffnet, um dies zu sehen, oder noch einfacher: Wir können zum Modal-Abschnitt des Style Guides navigieren.
Um dies zu beheben, füge ich ein weiteres Ziel zu unserem Code hinzu.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close)
Weitermachen…
Ich sehe einen weiteren Button, der von unserem Code nicht betroffen zu sein scheint. Es ist der Button Tracking, der ganz unten im Themenbeitrags-Stream liegt.
Ich füge nach einem Komma die folgende Zeile zu unserem aktuellen .btn-Code hinzu.
:not(.d-editor-button-bar) >
.btn:not(.single-select-header):not(.modal-close),
.topic-notifications-button > .select-kit > .btn
Dies wird den Button, der in diesem Abschnitt erscheint, korrekt ansprechen, und vorerst sind wir mit dem Styling des oberen Bereichs unseres Forums fertig.
Wohin es jetzt geht
Dieser Leitfaden sollte nur einen ersten Eindruck davon vermitteln, wie du dein eigenes Theme für Discourse anpassen kannst. Ich hoffe, du hast nun mehr Einblick darin, wie du Bereiche der App für deine eigenen Anpassungen ansprechen kannst.
Denk daran: Vieles kann nur mit SCSS angepasst werden. Wenn du noch tiefer in die Entwicklung einsteigen möchtest, empfehle ich dir, die Artikel zu lesen, die oben in diesem Beitrag verlinkt sind.
Fühle dich frei, Fragen zu stellen, und ich helfe dir gerne oder weise dich in die richtige Richtung.
Dieses Dokument ist versioniert – schlage Änderungen auf GitHub vor.