Passen Sie Ihr Site-Branding an

[Discourse]

Dies ist ein nicht-technisches Tutorial, das dich durch die Anpassung des Brandings und Erscheinungsbilds deiner Discourse-Website führt.

Erforderliche Benutzerrolle: Administrator

Möchtest du das Branding deiner Website anpassen, weißt aber nicht, wo du anfangen sollst? Lies weiter, um mehr zu erfahren!

Der Setup-Assistent

Discourse ist sehr anpassbar! Ein guter Ausgangspunkt für die Anpassung der Website ist die Anmeldung in deinem Admin-Konto auf der Website und das Starten des Setup-Assistenten der Website.

Der Setup-Assistent ermöglicht es dir, den Titel deiner Website, die Standardsprache und die Zugriffssettings (öffentlich vs. privat, Anmeldung vs. Einladung nur, und ob Benutzer genehmigt werden müssen) zu konfigurieren. Dies sind die wesentlichen ersten Schritte, um deine Website in Betrieb zu nehmen.

Sobald der Assistent abgeschlossen ist, kannst du das Erscheinungsbild deiner Website – Logos, Farben, Schriftarten und mehr – über das Admin-Panel weiter anpassen.

Du kannst die verfügbaren Optionen direkt auf dieser Seite vorschauen. Klicke auf die Schaltfläche „Weiter“, wenn du die für dich passenden Einstellungen gefunden hast. Keine Sorge, du kannst diese Einstellungen jederzeit später ändern, falls sie dir nicht zusagen.

Website-Themes

Sobald du eine grundlegende Konfiguration vorgenommen hast, ist es an der Zeit, deine Website noch weiter anzupassen!

Themes sind umfangreiche Anpassungen, die mehrere Elemente des Designs deines Forums verändern und oft auch zusätzliche Frontend-Funktionen enthalten. Themes können das Aussehen und Layout deines Forums erheblich verändern.

Die Kategorie Customization > Theme auf Meta bietet eine Vielzahl von vorgefertigten Themes, die du auf deiner Website verwenden kannst, um das Erscheinungsbild deiner Website anzupassen. Dies ist der beste Ort, um nach einem Theme für deine Website zu suchen. Such dir einfach ein Theme aus dieser Kategorie aus, das du für deine Website verwenden möchtest.

Sobald du dich für ein Theme entschieden hast, kannst du es über die Seite Admin -> Anpassen -> Themes (unter /admin/config/customize/themes) zu deiner Website hinzufügen. Auf dieser Seite kannst du auch Änderungen am Theme deiner Website vornehmen oder sogar ein komplett neues Theme erstellen.

Der Einsteiger-Leitfaden zur Verwendung von Discourse-Themes ist ein Crashkurs in den Grundlagen von Discourse-Themes und bietet einen Überblick darüber, wie man Themes auf deiner Discourse-Website installiert. Lies dir diesen Leitfaden durch, um Anweisungen zur Installation des von dir gewählten Themes zu erhalten.

Weitere Informationen zur Verwendung, Erstellung und Freigabe deiner eigenen Themes findest du auch hier:

• Designer-Leitfaden für Discourse-Themes
• Entwickler-Leitfaden für Discourse-Themes

Farbpaletten

Du kannst deine Website weiter anpassen, indem du die Farbpalette über die Seite Admin -> Konfiguration -> Farben (unter /admin/config/colors) anpasst.

Von hier aus kannst du eine neue Farbpalette erstellen, eine vorhandene Palette zur Anpassung auswählen und Paletten als Standard-Hell- oder -Dunkelmodus für dein Theme festlegen.

Wähle ein vorhandenes Farbschema aus, das als Grundlage für dein neues Farbschema dient, und passe dann die Farben deines neuen Schemas an, indem du auf die Farbe neben jedem Farbbereich klickst:

Vergiss nicht, deinem neuen Farbschema einen Namen zu geben und deine Änderungen zu speichern, sobald du fertig bist!

Brauchst du 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 findest du unter:

Farbschema erstellen und teilen

Discourse unterstützt nun den Import von Farbschemata aus einem Remote-Repository. Hier zeige ich Ihnen, wie Sie dabei vorgehen. Zu den Farben navigieren und ein Farbschema hinzufügen Gehen Sie auf Ihrer Seite zu /admin/customize/colors und erstellen Sie ein Farbschema. [image] Tipps: Ich habe eine Chrome-Erweiterung (Farbwähler) verwendet, um Farben aus einem vorhandenen Bild einer Farbpalette im Web auszuwählen. Wenn Sie ein Theme erstellen, weisen Sie das Farbschema dem Theme zu u…

Theme-Komponenten

Ähnlich wie Themes bietet Discourse auch „Theme-Komponenten“ an, die du verwenden kannst, um Oberflächenelemente deines Forum-Designs zu ändern oder zusätzliche Frontend-Funktionen hinzuzufügen. Sie sind kleiner und gezielter als vollständige Themes und können in der Regel (obwohl nicht immer) mit anderen Theme-Komponenten kombiniert werden, um ein maßgeschneidertes Forum-Design für deine Community zu erstellen.

Die Kategorie Customization > Theme component auf Meta enthält alle offiziellen und nicht-offiziellen Theme-Komponenten von Discourse. Schau dir die dort aufgeführten Theme-Komponenten an, und wenn du einige davon auf deiner Website installieren möchtest, folge einfach den Anweisungen hier: Die Discourse-Theme-Schnittstelle und Anleitung zur Installation von Theme-Komponenten

Zu den beliebtesten Discourse-Theme-Komponenten gehören:

• Brand Header
• DiscoTOC - automatic table of contents
• Custom Header Links
• Versatile Banner

Discourse verfügt auch über einen integrierten Umschalter für den Dunkel-/Hellmodus, der über die Website-Einstellung interface_color_selector gesteuert wird. Dieser kann so eingestellt werden, dass der Umschalter im Footer der Seitenleiste oder im Header angezeigt wird.

Das Tag theme-guides auf Meta enthält außerdem viele Anleitungen mit Ideen zur weiteren Anpassung deiner Website mit Theme-Komponenten.

Website-Branding

Discourse hat eine dedizierte Seite zur Logo-Konfiguration unter Admin -> Erscheinungsbild -> Logo (unter /admin/config/logo), auf der du alle Logos und Icons deiner Website verwalten kannst.

• Primäres Logo - Erscheint in der oberen Navigation der Website sowie oben in den E-Mail-Benachrichtigungen der Website. Empfohlene Größe ist 600 × 80 Pixel.
• Primäres Logo dunkel - Alternative für den Dunkelmodus des primären Logos. Empfohlene Größe ist 600 × 80 Pixel.
• Quadratisches Icon - Eine quadratische Version des Logo-Bildes, die oben auf der Website angezeigt wird und auch das Logo der mobilen App ist. Empfohlene Größe ist 512 × 512 Pixel.
• Favicon - Das Logo wird als Icon in der Browser-Registerkarte und in den Browser-Lesezeichen/Favoriten angezeigt.
• Kleines Logo - Das kleine Logo-Bild oben links auf deiner Website, das beim Scrollen nach unten sichtbar wird. Wenn es leer gelassen wird, wird ein Haus-Symbol angezeigt. Empfohlene Größe ist 120 × 120 Pixel.
• Kleines Logo dunkel - Alternative für den Dunkelmodus des kleinen Logos. Empfohlene Größe ist 120 × 120 Pixel.

Im Abschnitt Mobil:

• Mobiles Logo - Das Logo, das auf der mobilen Version deiner Website verwendet wird. Wenn es leer gelassen wird, wird das Bild aus der Einstellung logo verwendet. Verwende 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 den Dunkelmodus des mobilen Logos. Verwende 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, wird large_icon verwendet. Empfohlene Größe ist 512 × 512 Pixel.
• Manifest-Screenshots - Screenshots, die die Funktionen und Funktionen deiner Instanz auf der Installationsaufforderungsseite zeigen (angezeigt bei Verwendung von „Zum Home-Bildschirm 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, wird large_icon verwendet. Empfohlene Größe ist 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 deiner Website verwendet wird. Wenn es leer gelassen wird, wird das Bild aus der Einstellung logo verwendet. Verwende ein breites rechteckiges Bild. Verwende 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, wird large_icon verwendet.
• X-Zusammenfassung großes Bild - X-Karte „Zusammenfassung großes Bild“. Wenn es leer gelassen wird, werden reguläre Karten-Metadaten unter Verwendung von OpenGraph_image generiert, solange dies keine .svg-Datei ist. Empfohlene Größe ist mindestens 280 × 150 Pixel. Verwende kein SVG-Bild.

Für die besten Ergebnisse empfehlen wir, die oben aufgeführten Größenvorgaben für jede Art von Logo und Icon zu befolgen.

Zusätzliche Anpassungen

Nun, da du ein benutzerdefiniertes Theme, eine Farbpalette, einige Marken-Logos und vielleicht ein paar Theme-Komponenten zu deiner Website hinzugefügt hast, bist du mit allen grundlegenden Website-Anpassungen fertig!

Wenn du weiterhin nach Möglichkeiten suchst, deine Discourse-Website anzupassen, empfehlen wir dir, dich durch die folgenden Themen zu lesen, die dich interessieren könnten:

• Jeden Text in Discourse anpassen
• Customizing the Discourse outer email template
• Creating and configuring custom user fields
• Configure custom emoji

[jordan-violet]

Was bewirkt Manifest-Screenshots eigentlich? Wo werden diese Screenshots verwendet? Ist es, wenn jemand Ihre Community als lokale App über seinen Browser installiert? Sind es die Bilder, die angezeigt werden, wenn Sie Ihre Community mit Discourse Discover auffindbar machen?

[Moin]

Ich sehe diese Screenshots, wenn ich die Option „Zum Startbildschirm hinzufügen“ in Chrome auf meinem Android-Gerät verwende

[jordan-violet]

Interessant! Ich dachte, das tun sie, aber ich habe sie nicht gesehen, als ich sie auf meinem Desktop (Chrome, Windows) installiert habe. Aber vielleicht habe ich ihnen nicht genug Zeit gegeben, um irgendwo zu laden/sich zu verbreiten.

Ich bin froh zu wissen, dass ich mit dem, was sie tun, richtig lag!

[calebhearth]

@Discourse

Für beste Ergebnisse empfehlen wir, die Größenrichtlinien für jeden Logo-Typ zu befolgen.

Es sieht so aus, als wäre dieser Abschnitt versehentlich weggelassen worden.

[Moin]

Nachdem ich es zweimal gelesen hatte, glaube ich, dass ich es verstanden habe. Die Größenrichtlinien sind oben enthalten. Zum Beispiel:

@Discourse

• logo - Das Logo-Bild oben links auf Ihrer Website. Verwenden Sie ein breites rechteckiges Bild mit einer Höhe von 120 und einem Seitenverhältnis größer als 3:1. Wenn leer gelassen, wird der Website-Titeltext angezeigt.

Ich denke, dass dieser Leitfaden im Allgemeinen ziemlich veraltet ist. Sie können kein Logo mehr hinzufügen oder das Aussehen und Gefühl im Assistenten konfigurieren. Die Admin-Seite für Themen sieht jetzt völlig anders aus, und Farbschemata wurden in Farbpaletten umbenannt.
Die Theme-Komponente für den Umschalter für den Dunkel-/Hellmodus wurde in den Kern verschoben. Und Branding hat eine neue Konfigurationsseite unter /admin/config/logo.
Ich frage mich nur, warum die auf der Konfigurationsseite angegebene Größe von der Beschreibung abweicht, wenn ich die Website-Einstellung betrachte.

600×80 unterscheidet sich von min. 360×120.

[nathank (Nathan Kershaw)]

Dieses Thema ist nun etwas veraltet, da diese Dinge kürzlich überarbeitet wurden.

Hier sind meine Gedanken zu einigen kleineren (aber wertvollen) Verbesserungsvorschlägen:

Some additional tweaks for Logos and Icons in the core settings

I’ve just set up a new site, and hit a few hiccoughs. First, I love the new admin settings (/admin/config/logo) - they are a vast improvement and visually very nice. Suggestion 1 That the new term “Square icon” be used instead of large_icon in the text explainers. The old name has been changed, but this hasn’t been followed through with in the text. Suggestion 2 That there is a separate Android icon under Mobile, as there is for iOS. At present, the Square Icon is used for the Android home …