Ein Banner erstellen, das oben auf Ihrer Website angezeigt wird

[Discourse]

Diese Anleitung 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 ein effektives Mittel, um wichtige Informationen an Ihre Website-Besucher zu kommunizieren. Diese Anleitung 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 die gesuchten Inhalte finden können.

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

In diesem Bereich finden Sie die folgenden Einstellungen:

• Auf Themes aktiviert…: Hiermit legen Sie fest, 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 Standardtextfarbe, die durch Ihre 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: Hiermit wird festgelegt, auf welchen Seiten das Willkommensbanner angezeigt wird. Standardmäßig wird es auf Seiten des Hauptmenüs angezeigt (d. h. die Seiten, die in der Website-Einstellung Hauptmenü ausgewählt sind), Sie können dies jedoch ändern auf:
  • Nur Startseite: Das Willkommensbanner wird nur auf der Startseite der Website angezeigt (d. h. der ersten Seite, die in der Website-Einstellung Hauptmenü aufgeführt ist).
  • Entdeckungsseiten: Das Willkommensbanner wird auf allen Seiten des Hauptmenüs angezeigt, auch wenn sie nicht im eigentlichen 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 Teilnehmen ablenkt.
• Position: Hiermit wird festgelegt, wo das Willkommensbanner auf der Seite angezeigt wird. Standardmäßig wird es Über dem Themeneinhalt angezeigt, Sie können aber auch Unter der Seitenkopfzeile auswählen. Der Unterschied ist etwas subtil und wird in den folgenden Screenshots gezeigt:

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

• Kopfzeile für neue Mitglieder: Die primäre Begrüßung, die neuen Mitgliedern beim ersten Login 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 Kategorie (öffentlich oder privat). Der ursprüngliche Beitrag (OP) oben im Thema 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…“ (Pin Topic…).
4. Wählen Sie im neuen Fenster Banner-Thema erstellen (Make Banner Topic).

Das Banner wird nun oben auf Ihrer Website angezeigt. Benutzer sehen ein ausblendbares Banner. Mitarbeiter sehen auch einen Link, um das Quell-Thema zu bearbeiten.

Tipps für effektive ausblendbare Banner:

• Halten Sie den Text klar und prägnant
• Die maximale Höhe beträgt 250px (per CSS bearbeitbar)
• Bei längerem Text können Benutzer innerhalb des Banners scrollen
• Erwägen Sie das Hinzufügen eines Links zu einem relevanten, öffentlichen Thema für weitere Informationen

Permanentes Banner

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

1. Suchen Sie in Ihren Website-Einstellungen nach global_notice.
2. Geben Sie Ihren Bannerttext 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. Bitte beachten Sie, dass diese Theme-Komponenten mit der Kernfunktion des Willkommensbanners 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, Themenseiten oder alle Seiten)
• Hinzufügen von Links mit Font Awesome-Symbolen
• Einschränkung der Sichtbarkeit basierend auf Benutzer-Trust-Levels
• Anpassen von Hintergrundbildern oder Farben
• Anpassen von Text- und Symbolfarben

Versatile Banner

Der Versatile Banner, eine der beliebtesten und am besten gewarteten Komponenten, bietet umfangreiche Anpassungsoptionen über die Benutzeroberfläche, einschließlich:

• Banneranzeige beschränkt auf
  • angemeldete oder anonyme Benutzer
  • mobile oder Desktop-Geräte
  • Startseite, Themenseite oder alle Seiten
• Ausblendbare, erweiterbare oder persistente Optionen
• Einstellung für volle Browserbreite
• Farbverwaltung
• Anpassung von Überschriften und Spalten mithilfe von HTML

Banner mit CSS anpassen

Sie können alle Bannertypen mithilfe von CSS anpassen. Weitere Informationen zur Verwendung von CSS zur Anpassung Ihrer Discourse-Website finden Sie im Anfängerleitfaden 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!