Ein Banner erstellen, das oben auf Ihrer Seite angezeigt wird

[Discourse]

Dieser Leitfaden erklärt verschiedene Methoden zum Erstellen und Anpassen von Bannern auf Ihrer Discourse-Website, von einfachen ausblendbaren Bannern bis hin zu erweiterten Optionen.

Erforderliche Benutzerebene: Moderator (Ausblendbares Banner), Administrator

Banner sind eine effektive Möglichkeit, wichtige Informationen an Ihre Website-Besucher zu kommunizieren. Dieser Leitfaden führt Sie durch verschiedene Methoden zum Erstellen und Anpassen von Bannern auf Ihrer Discourse-Website.

Willkommensbanner

Ein Willkommensbanner begrüßt neue und wiederkehrende Mitglieder mit einer freundlichen Nachricht und einer prominenten Suchleiste, sodass Besucher schnell Inhalte finden können, nach denen sie suchen.

Um das Willkommensbanner zu aktivieren und anzupassen, gehen Sie zum Admin-Bereich und wählen Sie in der Seitenleiste den Link Erscheinungsbild > Willkommensbanner.

In diesem Bereich finden Sie die folgenden Einstellungen:

• Aktiviert in Themes…: Hiermit können Sie festlegen, welche Ihrer aktiven Themes das Willkommensbanner anzeigen sollen.
• Hintergrundbild: Laden Sie ein Bild hoch, das als Hintergrund für Ihr Willkommensbanner dient.
• Textfarbe: Wenn die standardmäßige Textfarbe, die von Ihrer Farbpalette gesteuert wird, mit Ihrem Hintergrundbild kollidiert, können Sie hier eine neue Farbe auswählen. Beachten Sie, dass diese Einstellung nur gilt, wenn Sie ein Hintergrundbild hochgeladen haben.
• Seiten-Sichtbarkeit: Legt fest, auf welchen Seiten das Willkommensbanner angezeigt wird. Standardmäßig wird es auf Seiten des Hauptmenüs angezeigt (d. h. die im Website-Einstellung Hauptmenü ausgewählten Seiten), Sie können dies jedoch ändern auf:
  • Nur Startseite: Das Willkommensbanner wird nur auf der Startseite der Website angezeigt (d. h. der ersten im Website-Einstellung Hauptmenü aufgeführten Seite).
  • Entdeckungsseiten: Das Willkommensbanner wird auf allen Seiten des Hauptmenüs angezeigt, auch wenn sie nicht im tatsächlichen Hauptmenü Ihrer Website angezeigt werden (d. h. nicht in der Einstellung ausgewählt sind).
  • Alle Seiten: Das Willkommensbanner wird auf allen Seiten Ihrer Website angezeigt. Dies wird im Allgemeinen nicht empfohlen, da es auf Themenseiten zu visueller Unordnung führen kann, die Mitglieder vom Lesen und Mitmachen ablenkt.
• Position: Legt fest, wo das Willkommensbanner auf der Seite angezeigt wird. Standardmäßig wird es Über dem Themainhalt angezeigt, Sie können aber auch Unter der Website-Kopfzeile auswählen. Der Unterschied ist etwas subtil und wird in den Screenshots unten gezeigt:

Sie können auch den Text des Willkommensbanners anpassen, um die Begrüßung zu ändern und dem Willkommensbanner erklärenden Text hinzuzufügen.

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

Ausblendbares Banner

Ein ausblendbares Banner ist ein temporärer Hinweis, den Benutzer schließen können. So erstellen Sie eines:

1. Erstellen oder navigieren Sie zu einem Thema in einer beliebigen öffentlichen Kategorie. Der ursprüngliche Beitrag (OP) am Anfang des Themas ist die Quelle Ihres Banners.
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 Banner-Thema erstellen
   Die Banner wird nun oben auf Ihrer Website angezeigt. Benutzer sehen ein ausblendbares Banner. Das Personal sieht auch einen Link, um das Quellthema zu bearbeiten.

Tipps für effektive ausblendbare Banner:

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

Permanentes Banner

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

1. Suchen Sie in Ihren Website-Einstellungen nach global_notice.
2. Geben Sie Ihren Bannertest oder HTML in dieses Feld ein.

Tipps für permanente Banner:

• Diese Art von Banner wird typischerweise für dringende Website-Mitteilungen verwendet, kann aber für jede permanente Nachricht genutzt werden
• Dieses Banner ist für alle sichtbar, einschließlich anonymer Benutzer auf Websites mit login_required
• Das Banner kann entfernt werden, indem die Website-Einstellung global notice zurückgesetzt wird

Erweiterte Banner

Sie können erweiterte Banner erstellen, indem Sie eine Theme-Komponente verwenden. Beachten Sie, dass diese Theme-Komponenten mit der Kernfunktion für Willkommensbanner in Konflikt geraten können.

Welcome 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, Themalisten oder alle Seiten)
• Hinzufügen von Links mit Font Awesome-Symbolen
• Begrenzung der Sichtbarkeit basierend auf den Benutzer-Trust-Levels
• Anpassen von Hintergrundbildern oder Farben
• Anpassen von Text- und Icon-Farben

Versatile Banner

Einer der beliebtesten und am besten gewarteten Komponenten, der Versatile Banner, bietet über die Oberfläche umfangreiche Anpassungsmöglichkeiten, darunter:

• Banner-Anzeige beschränkt auf
  • angemeldete oder anonyme Benutzer
  • mobile oder Desktop-Geräte
  • Startseite, Themaliste oder alle Seiten
• Ausblendbare, erweiterbare oder permanente Optionen
• Einstellung für volle Browserbreite
• Farbverwaltung
• Kopf- und Spaltenanpassung mittels HTML

Banner mit CSS anpassen

Sie können alle Banner-Typen mithilfe von CSS anpassen. Weitere Informationen zur Verwendung von CSS zur Anpassung Ihrer Discourse-Website finden Sie im Leitfaden für Anfänger 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!