🌅 Wir stellen vor: Horizon, unser neuestes Theme

In den letzten Monaten haben wir intensiv an unserem neuesten Discourse-Theme, Horizon, gearbeitet und freuen uns heute, unsere Arbeit mit Ihnen zu teilen und Sie einzuladen, Horizon in Ihrer Community auszuprobieren.



In diesem Thema werden wir über Horizon sprechen und Sie durch die Installation führen.

:sun: Alles über Horizon

Horizon ist ein einfaches, schönes Theme, das darauf ausgelegt ist, eine großartige Benutzererfahrung für Communities zu bieten, ohne zusätzlichen Aufwand für den Administrator. Der Name spiegelt unsere Hoffnung wider, dass dieses Theme eine umfassendere Vision dafür ausdrückt, wer Discourse nutzen kann und wie Discourse-Communities aussehen können.

Heller Modus

Dunkler Modus

:woman_shrugging: Warum haben wir Horizon entwickelt?

Wir haben Horizon entwickelt, um es jedem einfacher zu machen, eine Discourse-Community zu starten und sie stolz mit ihren Mitgliedern zu teilen.

Im Gespräch mit Discourse-Administratoren haben wir gelernt, dass einer der wichtigsten Aspekte beim Start einer Community die Anpassung ihres Erscheinungsbildes ist, um sicherzustellen, dass sie ein einladender und angenehmer Ort für die Community-Mitglieder ist. Horizon ermöglicht es, eine großartig aussehende Community ohne zusätzlichen Aufwand oder Anpassung zu haben.

:mirror: Für wen ist Horizon gedacht?

Horizon ist für Communities konzipiert, die nicht über die Expertise oder die Ressourcen verfügen, das Erscheinungsbild von Discourse anzupassen.

Wir sind stolz darauf, wie flexibel und anpassbar Discourse ist – und das wird sich nicht ändern! Aber wir glauben, dass mehr Discourse in der Welt eine gute Sache ist, und dass der beste Weg, dies zu erreichen, darin besteht, es für technisch weniger versierte Communities einfacher zu machen, mit unserem Produkt erfolgreich zu sein.

:magic_wand: Was macht Horizon besonders?

Während Default eine leere Leinwand ist, hat Horizon eigene Vorstellungen. Es legt Wert auf Großzügigkeit, Einfachheit und moderne Designästhetik.

Um den Unterschied zu sehen, verwenden Sie den Theme-Umschalter unten in der Seitenleiste hier auf Meta, um zu Horizon zu wechseln:

Hier sind einige der Dinge, die Sie an Horizon anders bemerken werden:

  • Geringere Informationsdichte. Das auffälligste Merkmal von Horizon ist die Themenkarte, die von der Standard-Tabellenansicht verschlankt wurde, um sie zugänglicher und einfacher zu machen. Bestimmte Informationen wie detaillierte Angaben zu Thema-Teilnehmern, Tags und zugewiesenen Benutzern sind nicht sichtbar.
  • Größere Schrift und mehr Platz. Über die Themenkarte hinaus haben wir Horizon mehr Raum gegeben, indem wir die Basisschriftgrößen im Lesebereich erhöht und eine Vollbildstruktur integriert haben.
  • Gebaut für die Verwendung “wie es ist”. Communities, die eine umfassende Kontrolle über das Erscheinungsbild der Website wünschen oder sehr spezifische Designanforderungen haben, können weiterhin auf unserem Standard-Theme aufbauen oder ihr eigenes Theme erstellen, um ihren Bedürfnissen am besten gerecht zu werden. Obwohl wir Horizon gegen die beliebtesten offiziellen Theme-Komponenten getestet und nur geringfügige Inkompatibilitäten festgestellt haben, empfehlen wir nicht, inoffizielle Komponenten oder anderen benutzerdefinierten Code zu Horizon hinzuzufügen.

:gear: Horizon verwenden

Sie können Horizon mit wenigen Schritten für Ihre Mitglieder aktivieren:

  1. Gehen Sie zum Bereich :wrench: Admin, navigieren Sie zum Abschnitt Erscheinungsbild und klicken Sie auf Themes & Komponenten.
  2. Finden Sie die Horizon-Theme-Karte, klicken Sie auf die Schaltfläche und wählen Sie Als aktiv festlegen, um Horizon zum neuen Standard-Theme Ihrer Community zu machen. (Möglicherweise müssen Sie Ihren Bildschirm aktualisieren, um diese Änderung zu sehen.)

Sie können optional eine der neuen Farbpaletten aktivieren, die speziell für die gute Zusammenarbeit mit Horizon entwickelt wurden.

\u003e :warning: Hinweis: Sie können die auf Horizon verwendeten Paletten ersetzen, aber nur Paletten mit den Namen Clover, Horizon, Lily, Marigold, Royal und Violet werden im Farbwähler in der Seitenleiste angezeigt.

Anweisungen zur Konfiguration von Farbpaletten.
  1. Klicken Sie in der Admin-Seitenleiste auf Farbpaletten.
  2. Wählen Sie die gewünschte Farbpalette (z. B. Horizon).
  3. Aktivieren Sie die Einstellung Farbpalette kann von Benutzern ausgewählt werden und klicken Sie dann auf das Häkchen, um zu bestätigen.
  4. Wiederholen Sie die Schritte 2-3 für alle Paletten, die Sie verwenden möchten.

Nach der Aktualisierung sehen Sie einen Pinsel unten in der Seitenleiste. Sie können darauf klicken, um Ihre spezifische Farbpalette für Horizon auszuwählen (wie in der obigen Abbildung gezeigt). Ihre Mitglieder können dasselbe tun, um zwischen den von Ihnen aktivierten Paletten zu wählen. Um die neue Standardpalette für Horizon festzulegen (d. h. wie Horizon aussieht, bevor Mitglieder Änderungen vorgenommen haben, und für anonyme Besucher):

  1. Gehen Sie im Admin-Bereich zu Themes & Komponenten.
  2. Finden Sie die Horizon-Karte und klicken Sie auf Bearbeiten.
  3. Ändern Sie das Feld Farbpalette zu Ihrer gewünschten Standardeinstellung.

:crystal_ball: Was kommt als Nächstes für Horizon

Wir fangen gerade erst an! Wir haben hart an dieser ersten Version des Themes gearbeitet, aber wir werden weiterhin in Horizon investieren und es im Laufe der Zeit verbessern. Wir werden aktiv Feedback von Websites einholen, die Horizon nutzen, um es weiter zu verbessern, und hoffen, es eines Tages zum Standard-Theme zu machen, das mit Discourse-Websites ausgeliefert wird.

:folded_hands: Danke

Wir sind allen sehr dankbar, die Horizon (und das Discourse-Team!) unterstützt haben, indem sie Horizon hier auf Meta getestet haben oder an unserem Beta-Test teilgenommen haben. Dieses Feedback war von unschätzbarem Wert, um Fehler zu finden, Anpassungen vorzunehmen und das Gesamterlebnis von Discourse mit diesem Theme zu verbessern. Vielen Dank für Ihre Zeit, Ihr Feedback und Ihre Unterstützung!

41 „Gefällt mir“

Das sieht großartig aus! Ich möchte es wirklich ausprobieren.

Aber es gibt keine Route für /admin/customize/themes/1/common/*/editcustomization. Können Sie es bitte hinzufügen? Ich verwende es, um spezielle Header und andere Anpassungen unabhängig vom gewählten Thema bereitzustellen.

Danke!

1 „Gefällt mir“

Warum erstellen Sie nicht eine neue Theme-Komponente, in der Sie Änderungen vornehmen und diese zur Horizon-Theme hinzufügen?

1 „Gefällt mir“

Habe ich es verpasst oder wurde Horizon noch nicht zu Crowdin zur Übersetzung hinzugefügt? Soll ich stattdessen einen Pull Request mit den Übersetzungen erstellen?

1 „Gefällt mir“

Horizon ist in erster Linie so konzipiert, dass es wie vorgesehen verwendet wird. Daher werden direkte Anpassungen oder Anpassungen über inoffizielle Komponenten nicht empfohlen. Dennoch würde ich gerne mehr darüber erfahren, was Sie an Horizon ändern möchten, um zu sehen, ob es ein guter Kandidat für uns sein könnte, um es direkter in das Thema zu integrieren.

Ich schaue mir das gerade an, ich melde mich bald wieder!

1 „Gefällt mir“

Tatsächlich ist es nur eine Kopfzeile, um das Forum mit einem Fediverse-Konto zu verknüpfen (und ein <noscript>-Tag, um dasselbe im Footer zu tun).

Ich habe den Code der Themenkomponente hier eingefügt: https://git.z7l.eu/ps/discourse-lire.im

Siehe die Begründung für Mastodon.

1 „Gefällt mir“

Das sieht großartig aus!! Ich gehe davon aus, dass das Theme nicht mit benutzerdefinierten Komponenten kompatibel sein wird, die wir derzeit verwenden? Z.B.:

1 „Gefällt mir“

Diskussion fortgesetzt von Helfen Sie uns, Horizon, unser neuestes Theme zu testen:

Das hat bei mir auf dem Handy (iPhone 11 Pro Max) nicht funktioniert. Ich vermute, es liegt daran, dass ich die Schriftgröße in meinen Telefoneinstellungen erhöht habe.

Dieses Thema ist wunderbar, danke für Ihre Arbeit!

Ich frage mich, wie ich Forked Horizons auf dem neuesten Stand halten kann? Wir haben einige benutzerdefinierte Modifikationen, die wir behalten möchten :slight_smile:

1 „Gefällt mir“

Komponenten erstellen und zum Theme hinzufügen, um anzupassen.

4 „Gefällt mir“

Langfristig ist es unser Ziel, dass unsere offiziellen Komponenten alle gut auf Horizon funktionieren. Für kundenspezifische Arbeiten können Sie sich gerne an @team wenden, um zu sehen, ob wir Ihnen helfen können (möglicherweise sind kostenpflichtige kundenspezifische Arbeiten erforderlich).

2 „Gefällt mir“

Ich möchte eine vom Benutzer wählbare Option für dieses Theme erstellen, damit ich die Theme-Komponente hinzufügen kann, die dieses Theme modifiziert. Ich möchte, dass die Benutzer das Horizon-Theme so wie es ist auswählen oder seine Variation auswählen können.

Die Variation dieses Themes wird im Vollbildmodus sein. Es wird auch das CSS einzelner Beitragszeilen gestalten, um den Inhalt in der visuellen Hierarchie über andere Elemente auf der Seite zu stellen, wie z. B. die Scrollleiste, neue und ungelesene Themen am unteren Rand usw.

Horizon sieht wirklich gut aus, löst aber immer noch nicht das Problem der Informationsdichte auf der Themen-Seite. Es ist visuell überwältigend für Leute, die von anderer traditioneller Forensoftware kommen.

Meine Kommentare sind für native Discourse-Benutzer möglicherweise nicht nachvollziehbar, aber ich bringe eine externe Sichtweise ein. Ich muss diese Änderungen zumindest für meine Community vornehmen.

1 „Gefällt mir“

Ich habe hier einen kleinen Fehler im Gruppen-Display gefunden, wo es zu einem Überlauf kommen kann:

Dies kann durch Hinzufügen von CSS behoben werden:

.group-box-inner {
	overflow: auto;
}
2 „Gefällt mir“

Ist es beabsichtigt, dass so viel Platz zwischen der Navigationsleiste und dem Inhalt ist?

2 „Gefällt mir“

Nein, ich glaube nicht, dass das erwartet wird. Vielleicht stört eine Komponente dabei :thinking:?

Ich glaube, es ist gerade so. Meine Vermutung ist, dass dies ein zugeschnittener Screenshot eines ultrawide Vollbild-Browsers ist.

3 „Gefällt mir“

Ich liebe dieses Theme total, aber es scheint, als ob die Search Banner-Komponente nicht gut damit zurechtkommt. Der Text search_banner.subhead wird nicht angezeigt, wodurch er unaligned aussieht. Es gibt auch eine schwache graue Linie

Update:
Ich habe den Suchbanner deaktiviert und das integrierte Willkommens-/Suchfeld sieht besser aus. Allerdings erhalte ich den Untertiteltext im unten stehenden Screenshot.

Außerdem besagt der Lesezeichen-Link auf der Startseite, dass ich noch keine Lesezeichen habe, obwohl ich welche habe. Er verlinkt zu /bookmarks anstatt zu /u/johndoe/activity/bookmarks

Es ist tatsächlich ein Widescreen. Allerdings ist die große Menge an leerem weißen Raum ablenkend. Ist es möglich, dies anzupassen?

Danke für die Information – ich habe jemanden aus dem Designteam gebeten, sich das Problem anzusehen.

4 „Gefällt mir“

Habe dies vor fast einem Monat gemeldet, aber…