Banner erstellen, der oben auf deiner Website angezeigt wird

[Discourse]

Dieser Leitfaden erklärt verschiedene Methoden, um Banner auf Ihrer Discourse-Seite zu erstellen und anzupassen – von einfachen, schließbaren Bannern bis hin zu fortgeschrittenen Optionen.

Erforderliche Benutzerstufe: Moderator (schließbares Banner), Administrator

Banner sind eine wirksame Möglichkeit, wichtige Informationen an Ihre Besucher zu vermitteln. Dieser Leitfaden führt Sie durch verschiedene Methoden, um Banner auf Ihrer Discourse-Seite zu erstellen und anzupassen.

Willkommens-Banner

Ein Willkommens-Banner begrüßt neue und wiederkehrende Mitglieder mit einer freundlichen Nachricht und einer prominenten Suchleiste, damit Besucher schnell den Inhalt finden, nach dem sie suchen.

Um das Willkommens-Banner zu aktivieren und anzupassen, gehen Sie in den Administrationsbereich und wählen Sie den Link Darstellung > Willkommens-Banner in der Seitenleiste aus.

In diesem Bereich finden Sie die folgenden Einstellungen:

• Aktiviert für Themes…: Damit können Sie festlegen, welche Ihrer aktiven Themes das Willkommens-Banner anzeigen sollen.
• Hintergrundbild: Laden Sie ein Bild hoch, das als Hintergrund für Ihr Willkommens-Banner dient.
• Textfarbe: Wenn die Standardtextfarbe, die durch Ihre Farbpalette gesteuert wird, mit Ihrem Hintergrundbild in Konflikt steht, können Sie hier eine neue Farbe auswählen. Beachten Sie, dass diese Einstellung nur gilt, wenn Sie ein Hintergrundbild hochgeladen haben.
• Seitensichtbarkeit: Damit wird bestimmt, auf welchen Seiten das Willkommens-Banner angezeigt wird. Standardmäßig wird es auf Seiten im Hauptmenü angezeigt (was die in der Seiteneinstellung Hauptmenü ausgewählten Seiten bedeutet), aber Sie können es ändern zu:
  • Nur Startseite: Das Willkommens-Banner wird nur auf der Startseite der Website angezeigt (d. h. die erste Seite in der Seiteneinstellung Hauptmenü).
  • Entdeckungsseiten: Das Willkommens-Banner wird auf allen Hauptmenü-Seiten angezeigt, auch wenn sie nicht im eigentlichen Hauptmenü Ihrer Website angezeigt werden (d. h. in der Einstellung nicht ausgewählt sind).
  • Alle Seiten: Das Willkommens-Banner wird auf allen Seiten Ihrer Website angezeigt. Dies wird im Allgemeinen nicht empfohlen, da es auf Themen-Seiten zu visueller Unordnung führen kann, die Mitglieder vom Lesen und Mitmachen ablenkt.
• Position: Damit wird bestimmt, wo das Willkommens-Banner auf der Seite angezeigt wird. Standardmäßig wird es Über dem Themeninhalt angezeigt, aber Sie können auch Unter dem Seitenkopf auswählen. Der Unterschied ist etwas subtil und in den folgenden Screenshots gezeigt:

Sie können auch den Text des Willkommens-Banners anpassen, um die Begrüßung zu ändern und erklärenden Text zum Willkommens-Banner hinzuzufügen.

• Überschrift für neue Mitglieder: Die primäre Begrüßung, die neuen Mitgliedern beim ersten Login auf Ihrer Website angezeigt wird.
• Überschrift für angemeldete Mitglieder: Die primäre Begrüßung, die wiederkehrenden Mitgliedern angezeigt wird.
• Überschrift für anonyme Besucher: Die primäre Begrüßung, die anonymen (d. h. nicht angemeldeten) Besuchern angezeigt wird.
• Unterüberschrift für angemeldete Mitglieder: Eine optionale zweite Textzeile unter der Überschrift, die wiederkehrenden Mitgliedern angezeigt wird.
• Unterüberschrift für anonyme Besucher: Eine optionale zweite Textzeile unter der Überschrift, die anonymen (d. h. nicht angemeldeten) Besuchern angezeigt wird.
• Such-Platzhalter: Der Platzhaltertext, der im Suchfeld des Willkommens-Banners angezeigt wird.

Schließbares Banner

Ein schließbares Banner ist eine temporäre Ankündigung, die Benutzer schließen können. So erstellen Sie eines:

1. Erstellen Sie ein Thema oder navigieren Sie zu einem Thema in einer beliebigen öffentlichen Kategorie. Der ursprüngliche Beitrag (OP) oben im Thema wird die Quelle Ihres Banners sein.
2. Öffnen Sie die Admin-Optionen, indem Sie auf das Schraubenschlüssel-Symbol rechts oder unten im Thema klicken.
3. Wählen Sie „Thema anheften…“
4. Wählen Sie im neuen Fenster Als Banner-Thema festlegen

Das Banner wird nun oben auf Ihrer Website angezeigt. Benutzer werden ein schließbares Banner sehen. Mitarbeiter sehen auch einen Link zum Bearbeiten des Quellthemas.

Tipps für effektive schließbare Banner:

• Halten Sie den Text klar und prägnant
• Die maximale Höhe beträgt 20vh (per CSS anpassbar)
• Bei längerem Text können Benutzer innerhalb des Banners scrollen
• Erwägen Sie, einen Link zu einem relevanten, öffentlichen Thema für weitere Informationen hinzuzufügen
• Wenn Sie das als Banner verwendete Thema ausblenden möchten, können Sie es über das Admin-Menü des Themas als „nicht gelistet“ markieren

Dauerhaftes Banner

Um ein Banner zu erstellen, das immer sichtbar ist und von Benutzern nicht geschlossen werden kann:

1. Suchen Sie in Ihren Seiteneinstellungen nach global_notice.
2. Geben Sie Ihren Bannertext oder HTML in dieses Feld ein.

Tipps für dauerhafte Banner:

• Dieser Banner-Typ wird typischerweise für dringende Website-Kommunikationen verwendet, kann aber für jede permanente Nachricht verwendet werden
• Dieses Banner ist für alle sichtbar, einschließlich anonymer Benutzer auf login_required-Seiten
• Das Banner kann entfernt werden, indem die Seiteneinstellung global notice zurückgesetzt wird

Fortgeschrittene Banner

Sie können fortgeschrittenere Banner erstellen, indem Sie eine Theme-Komponente verwenden. Bitte beachten Sie, dass diese Theme-Komponenten mit der Kern-Willkommens-Banner-Funktion in Konflikt stehen können.

Willkommens-Link-Banner

Diese Komponente ermöglicht es Ihnen, benutzerdefinierten Text und 1–4 Links zu Ihrem Banner hinzuzufügen. Sie bietet verschiedene Anpassungsoptionen, einschließlich:

• Auswahl des Anzeigebereichs des Banners (Startseite, Themenlisten oder alle Seiten)
• Hinzufügen von Links mit Font Awesome-Icons
• Einschränkung der Sichtbarkeit basierend auf dem Vertrauenslevel der Benutzer
• Anpassung von Hintergrundbildern oder -farben
• Anpassung von Text- und Icon-Farben

Vielseitiges Banner

Eine der beliebtesten und am besten gepflegten Komponenten, bietet das Vielseitige Banner umfangreiche Anpassungsoptionen über die Oberfläche, einschließlich:

• Banner-Anzeige begrenzt auf
  • angemeldete oder anonyme Benutzer
  • Mobil- oder Desktop-Geräte
  • Startseite, Themenliste oder alle Seiten
• Optionen für schließbar, aufklappbar oder dauerhaft
• Einstellung für volle Browserbreite
• Farbverwaltung
• Anpassung von Überschrift und Spalten mit HTML

Banner mit CSS anpassen

Sie können alle Banner-Typen mit CSS anpassen. Für weitere Informationen zur Verwendung von CSS, um Ihre Discourse-Seite anzupassen, siehe den Einsteigerleitfaden zur Verwendung von Discourse Themes.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Darstellung > Themen & Komponenten Link in der Seitenleiste.

Ich konnte diese Option nicht finden… Ist das eine neue Funktion in der Beta-Version?

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

Ich konnte diese Option nicht finden… Ist das eine neue Funktion in der Beta-Version?

Update: Nach dem Update von 3.4.6 auf 3.5.0 war sie sichtbar:

[RBoy]

@Discourse

js.welcome_banner.search — Der Platzhaltertext, der im Suchfeld des Willkommensbanners angezeigt wird.

Es gibt einen Fehler im Build 3.6.0.beta1-dev (e44347414a)

Das Ändern dieses Website-Texts hat keine Auswirkung auf den Text in der Suchleiste, dort steht immer noch Search. Getestet unter Windows 10 x64 mit Chrome

[awesomerobot (Kris)]

Arbeite hier an einer Lösung: DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

[RBoy]

Großartig, danke – das hat es behoben!

[tknospdr (David Muszynski)]

Ich habe ein Problem mit meinem Hintergrundbild für das Willkommensbanner.
Ich verwende Cloudflare R2 S3-Buckets für die Objektspeicherung auf der betreffenden Website.
Wenn ich im Admin-Bereich ein Hintergrundbild hochlade, wird es korrekt angezeigt. Wenn ich darauf klicke, um es in voller Größe anzuzeigen, funktioniert es. Und wenn ich mit der rechten Maustaste darauf klicke und das Bild in einem neuen Tab anzeigen lasse, funktioniert es und verwendet die öffentliche Bucket-URL:
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Was es jedoch in das CSS einfügt, ist diese URL:
https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Ich habe eine andere Website, die lokalen Speicher verwendet und das Banner-Hintergrundbild funktioniert korrekt.

Ist das ein Fehler im Code oder mache ich etwas falsch?

Nachdem ich mich weiter umgesehen habe, scheint dieses CSS das Hintergrundbild zu steuern:

Wenn ich die URL im Inspektor manuell ersetze, funktioniert es.
Ich habe versucht, dies zu überschreiben mit:

.custom-search-banner-wrap .welcome-banner__wrap {
  background-image: "eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg";
}

Aber das funktioniert nicht. Es fühlt sich trotzdem wie ein Fehler an.

[yuriy (Yuriy Kurant)]

@tknospdr, ich verstehe nicht ganz, welches Problem du hast?

Ich habe deine Website https://eu.technospider.com überprüft und sehe, dass das Hintergrundbild wie erwartet gerendert wird:

[tknospdr (David Muszynski)]

Ich glaube, ich habe den CSS-Override endlich zum Laufen gebracht. Das Problem ist, dass er keinen Override benötigen sollte.

Es scheint, dass der Banner-Code das falsche Asset verwendet, wenn Sie mit Cloudflare S3 hosten.

[yuriy (Yuriy Kurant)]

Was genau ist Ihr Override?

Auf unserer Seite könnten wir sicherstellen, dass wir nur einen URL-Pfadnamen /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS anwenden:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Ich glaube, diese Regel würde für Sie funktionieren, ohne dass Sie Overrides benötigen?

[tknospdr (David Muszynski)]

@yuriy

Welche genau ist Ihre Überschreibung?

Meine gesamte Überschreibung ist:

.welcome-banner {
  background-image: url(//eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg);
}
.--with-bg-img .welcome-banner__wrap {
  border-radius: 20px;
}
.welcome-banner__title {
  font-size: var(--font-up-4);
  max-width: 900px;
}
.welcome-banner__subheader {
  font-size: 17px;
  padding-bottom: 20px;
}

Auf unserer Seite könnten wir sicherstellen, dass wir nur einen URL-Pfadnamen /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg in CSS anwenden:

background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)

Ich glaube, diese Regel würde für Sie funktionieren, ohne dass Sie eine Überschreibung benötigen?

In der Benutzeroberfläche kann ich nur ein Bild hochladen, daher glaube ich, dass eine Codeänderung erforderlich ist, um meine CSS-Überschreibung zu entfernen.
Ich würde gerne alle Korrekturen ausprobieren, die Sie implementieren möchten.

[Frenky]

Hallo zusammen,

mit dem neuesten Discourse-Update wird die Theme-Komponente Advanced Search Banner nicht mehr unterstützt und anscheinend auch nicht mehr gepflegt. Stattdessen gibt es jetzt die offizielle Welcome Banner-Erweiterung.

Das Problem ist, dass man in der neuen Komponente aktuell nur ein einziges Background-Image auswählen kann. Mit der alten Advanced Search Banner-Komponente war es möglich, verschiedene Hintergrundbilder für den Light- und den Dark-Mode zu definieren, was für unterschiedliche Layouts und Themes natürlich ideal war.

Meine Frage an die Community:

• Gibt es eine Möglichkeit, diese Funktionalität im Welcome Banner nachzubilden?

• Hat vielleicht schon jemand eine Erweiterung oder einen Workaround implementiert, um unterschiedliche Background-Images für Light- und Dark-Mode zu nutzen?

• Ist es geplant, dass die Entwickler das eventuell noch implementieren?

Ich würde mich über Hinweise, Tipps oder Ideen freuen!

Danke vorab!