Dies ist ein nicht-technisches Tutorial, das Sie Schritt für Schritt durch die Anpassung von Branding und Erscheinungsbild Ihrer Discourse-Website führt.
Erforderliche Benutzerstufe: Administrator
Möchten Sie Ihr Site-Branding anpassen, wissen aber nicht, wo Sie anfangen sollen? Lesen Sie weiter, um mehr zu erfahren!
Der Einrichtungs-Assistent
Discourse ist sehr anpassbar! Ein guter Ausgangspunkt für die Anpassung Ihrer Site ist es, sich mit Ihrem Administratorkonto auf der Site anzumelden und den Einrichtungs-Assistenten der Site auszuführen. ![]()
Der Einrichtungs-Assistent ermöglicht es Ihnen, den Titel Ihrer Site, die Standardsprache und die Zugriffseinstellungen (öffentlich vs. privat, Anmeldung vs. nur auf Einladung und ob Benutzer genehmigt werden müssen) zu konfigurieren. Dies sind die wesentlichen ersten Schritte, um Ihre Site in Betrieb zu nehmen.
Sobald der Assistent abgeschlossen ist, können Sie das Erscheinungsbild Ihrer Site weiter anpassen – Logos, Farben, Schriftarten und mehr – über das Admin-Panel.
Sie können die verfügbaren Optionen direkt auf dieser Seite vorschauen. Klicken Sie auf die Schaltfläche „Weiter“, sobald Sie die Einstellungen gefunden haben, die für Sie funktionieren. Keine Sorge, Sie können diese Einstellungen später jederzeit ändern, falls Sie feststellen, dass sie nicht Ihren Vorstellungen entsprechen.
Site-Themen
Sobald Sie eine grundlegende Konfiguration eingerichtet haben, ist es Zeit, Ihre Site noch weiter anzupassen! ![]()
Themen sind umfangreiche Anpassungen, die mehrere Elemente des Stils Ihres Forum-Designs verändern und oft zusätzliche Frontend-Funktionen enthalten. Themen haben die Fähigkeit, das Aussehen und Layout Ihres Forums erheblich zu verändern.
Die Kategorie #theme auf Meta beherbergt eine Vielzahl von vorgefertigten Themen, die Sie auf Ihrer Site verwenden können, um das Erscheinungsbild Ihrer Site anzupassen. Dies ist der beste Ort, um nach einem für Ihre Site geeigneten Thema zu suchen. Suchen Sie sich in dieser Kategorie ein Thema aus, das Sie für Ihre Site verwenden möchten.
Sobald Sie sich für ein Thema entschieden haben, können Sie es über die Seite Admin -> Anpassen -> Themen (unter /admin/config/customize/themes) zu Ihrer Site hinzufügen. Von dieser Seite aus können Sie auch Änderungen an Ihrem Site-Thema vornehmen oder sogar ein völlig neues Thema erstellen.
Der Anfängerleitfaden zur Verwendung von Discourse-Themen ist ein Crashkurs in den Grundlagen von Discourse-Themen und bietet einen Überblick darüber, wie Sie Themen auf Ihrer Discourse-Site installieren. Lesen Sie diesen Leitfaden, um Anweisungen zur Installation Ihres gewählten Themas zu erhalten.
Weitere Informationen zur Verwendung, Erstellung und zum Teilen eigener Themen finden Sie auch in:
Farbpaletten
Sie können Ihre Site weiter anpassen, indem Sie ihre Farbpalette über die Seite Admin -> Konfiguration -> Farben (unter /admin/config/colors) ändern. ![]()
Von hier aus können Sie eine neue Farbpalette erstellen, eine vorhandene Palette zur Anpassung auswählen und Paletten als Standard für das helle oder dunkle Design Ihres Themas festlegen.
Wählen Sie ein vorhandenes Farbschema aus, auf dem Ihr neues Farbschema basieren soll, und passen Sie dann die Farben Ihres neuen Schemas an, indem Sie auf die Farbe neben jedem Farbabschnitt klicken:
Vergessen Sie nicht, Ihr neues Farbschema zu benennen und Ihre Änderungen zu speichern, sobald Sie fertig sind!
Benötigen Sie Hilfe bei der Farbauswahl? Ein Farbauswahl-Tool wie Paletton - The Color Scheme Designer kann dabei sehr hilfreich sein!
Weitere Informationen zur Verwendung von Farbpaletten in Discourse finden Sie unter:
Theme-Komponenten
Ähnlich wie bei Themen gibt es in Discourse auch „Theme-Komponenten“, mit denen Sie Oberflächenelemente Ihres Forum-Designs ändern oder zusätzliche Frontend-Funktionen hinzufügen können. Sie sind kleiner und gezielter als vollständige Themen und können in der Regel (wenn auch nicht immer) mit anderen Theme-Komponenten kombiniert werden, um ein maßgeschneidertes Forum-Design für Ihre Community zu erstellen. ![]()
Die Kategorie #theme-component auf Meta enthält alle offiziellen und inoffiziellen Theme-Komponenten von Discourse. Durchsuchen Sie die dort aufgeführten Theme-Komponenten, und wenn Sie eine davon auf Ihrer Site installieren möchten, folgen Sie einfach den Anweisungen hier: Die Discourse-Theme-Oberfläche und Anleitung zur Installation von Theme-Komponenten
Zu den beliebtesten Discourse-Theme-Komponenten gehören:
Discourse verfügt außerdem über einen integrierten Dunkel-/Helltom-Umschalter, der über die Site-Einstellung
interface_color_selectorgesteuert wird und so eingestellt werden kann, dass der Umschalter entweder in der Fußzeile der Seitenleiste oder in der Kopfzeile angezeigt wird.
Der Tag theme-guides auf Meta enthält ebenfalls viele Anleitungen mit Ideen zur weiteren Anpassung Ihrer Site mit Theme-Komponenten.
Site-Branding
Discourse verfügt über eine dedizierte Logo-Konfigurationsseite unter Admin -> Erscheinungsbild -> Logo (unter /admin/config/logo), auf der Sie alle Logos und Icons Ihrer Site verwalten können.
Primäres Logo– Wird in der oberen Navigation der Site sowie oben in den E-Mail-Benachrichtigungen der Site angezeigt. Empfohlene Größe: 600 × 80 Pixel.Primäres Logo dunkel– Alternative für das dunkle Design des primären Logos. Empfohlene Größe: 600 × 80 Pixel.Quadratisches Icon– Eine quadratische Version des Logo-Bildes, die oben auf der Site angezeigt wird und auch das Logo der mobilen App ist. Empfohlene Größe: 512 × 512 Pixel.Favicon– Das Logo erscheint als Icon im Browser-Tab und in den Browser-Favoriten/Lesezeichen.Kleines Logo– Das kleine Logo-Bild oben links auf Ihrer Site, das beim Scrollen nach unten angezeigt wird. Wenn es leer gelassen wird, wird ein Home-Glyph angezeigt. Empfohlene Größe: 120 × 120 Pixel.Kleines Logo dunkel– Alternative für das dunkle Design des kleinen Logos. Empfohlene Größe: 120 × 120 Pixel.
Im Abschnitt Mobil:
Mobiles Logo– Das Logo, das in der mobilen Version Ihrer Site verwendet wird. Wenn es leer gelassen wird, wird das Bild aus der Einstellunglogoverwendet. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis von größer als 3:1.Mobiles Logo dunkel– Alternative für das dunkle Design des mobilen Logos. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis von größer als 3:1.Manifest-Icon– Bild, das als Logo/Splash-Bild auf Android verwendet wird. Wenn es leer gelassen wird, wirdlarge_iconverwendet. Empfohlene Größe: 512 × 512 Pixel.Manifest-Screenshots– Screenshots, die die Funktionen und Funktionalitäten Ihrer Instanz auf der Installationsaufforderungsseite zeigen (angezeigt bei Verwendung von „Zum Startbildschirm hinzufügen“ auf Android). Alle Bilder sollten lokale Uploads sein und die gleichen Abmessungen haben.Apple Touch Icon– Icon, das für Apple-Touch-Geräte verwendet wird. Wenn es leer gelassen wird, wirdlarge_iconverwendet. Empfohlene Größe: 180 × 180 Pixel. Ein transparenter Hintergrund wird nicht empfohlen.
Im Abschnitt E-Mail:
Digest-Logo– Das alternative Logo-Bild, das oben in der E-Mail-Zusammenfassung Ihrer Site verwendet wird. Wenn es leer gelassen wird, wird das Bild aus der Einstellunglogoverwendet. Verwenden Sie ein breites rechteckiges Bild. Verwenden Sie kein SVG-Bild.
Im Abschnitt Soziale Medien:
OpenGraph-Bild– Standard-OpenGraph-Bild, das von vielen Apps und Plattformen für Weblink-Vorschauen verwendet wird, wenn eine Seite kein anderes geeignetes Bild hat. Wenn es leer gelassen wird, wirdlarge_iconverwendet.X Summary Large Image– X-Karte „Summary Large Image“. Wenn es leer gelassen wird, werden reguläre Kartenmetadaten unter Verwendung von OpenGraph_image generiert, solange dies nicht auch eine .svg ist. Empfohlene Größe: mindestens 280 × 150 Pixel. Verwenden Sie kein SVG-Bild.
Für beste Ergebnisse empfehlen wir, die oben aufgeführten Größenrichtlinien für jede Art von Logo und Icon zu befolgen.
Zusätzliche Anpassungen
Jetzt, wo Sie ein benutzerdefiniertes Thema, eine Farbpalette, einige Brand-Logos und vielleicht ein paar Theme-Komponenten zu Ihrer Site hinzugefügt haben, sind Sie mit allen grundlegenden Site-Anpassungen fertig! ![]()
Wenn Sie noch nach weiteren Möglichkeiten suchen, um Ihre Discourse-Site anzupassen, empfehlen wir Ihnen, folgende Themen durchzulesen, die Sie interessieren könnten:





