Erweiterte Suchbanner

[Discourse]

Note

We are planning to deprecate support for this theme component soon and advise you to use the welcome banner feature instead.

	Summary	Advanced Search Banner puts a search bar along with optional headline and subhead text in a banner above the main topic list navigation.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-search-banner
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

By default, this banner appears on all top-level topic pages (latest/new/unread/top/categories… anything in the top menu site setting) but it can also be set to only display on a community’s homepage.

Settings

Name	Description
show on	This determines which pages the banner appears
plugin outlet	Where on the page the banner will appear
background image light	Background image for the banner on light color palettes
background image dark	Background image for the banner on dark color palettes
tile background image	Repeat the background image
show for	Who can see the Search Banner (logged in, logged out, or both)
special style	Optional variations that change the appearance of the search banner

Translation	Default
search_banner.headline	Welcome to our community
search_banner.subhead	We’re happy to have you here. If you need help, please search before you post.
search_banner.search_button_text

To omit one from display, leave the field blank.

Custom styling

The HTML element gets a class named .display-search-banner wherever this banner appears, and the banner itself is wrapped with the .custom-search-banner class, so with some CSS you should be able to customize the appearance of this banner however you see fit.

Future enhancements

• Add an option to enable the banner in specific categories

Credits

This very heavily borrows from @angus’ Pavilion Header Search Theme Component

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @Moin 2025-11-10T16:26:58Z

Check document

Perform check on document:

[awesomerobot (Kris)]

I’ve updated the theme component to add some new settings:

show on — this determines where the banner appears and has the options

• top_menu (latest/categories/top/new/unread)
• homepage
• all (all pages except the default search page and admin pages)

show for — this determines who sees the banner

• everyone
• logged_in
• logged_out

[awesomerobot (Kris)]

Ich habe gerade ein kleines Update vorgenommen, das dieser Komponente einen optionalen Stil hinzufügt. Sie erhalten eine große Suchleiste ohne Titeltext:

Dies kann durch eine neue Einstellung „Spezialstil“ aktiviert werden. Dies aktiviert lediglich ein wenig zusätzlichen CSS.

Ich werde hier in Zukunft vielleicht noch weitere Optionen hinzufügen!

[AndyBr (Andy)]

Wie kann ich die Farbe des Begrüßungstextes in diesem Add-on ändern?

[Arkshine]

Es gibt keine Einstellung dafür. Sie können es jedoch mit etwas CSS hinzufügen:

Fügen Sie Folgendes zu Ihrem Thema oder einer neuen Themenkomponente hinzu und ändern Sie es nach Belieben.

.search-banner > .custom-search-banner {
    /* title */
    h1 {
        color: #286989;
    }

    /* description */
    p {
        color: #286989
    }
}

[AndyBr (Andy)]

Vielen Dank!

[RBoy]

Gibt es eine Möglichkeit, das Suchsymbol (mit CSS oder anders) auszublenden? Ich habe ein Problem, bei dem das Suchsymbol in Verbindung mit dieser Komponente dupliziert wird: Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

.search-input .search-icon:first-child {
  display: none;
}

sollte nur ein Suchsymbol anzeigen. Ich muss jedoch sagen, dass die gleichzeitige Verwendung des Suchbanners und der Header-Suche einige schlechte UX-Nebeneffekte hat.

Ich würde empfehlen, nur das eine oder das andere zu verwenden.

[RBoy]

Danke! Super hilfreich

@isaac

Ich muss sagen, dass die gleichzeitige Verwendung des Suchbalkens und der Header-Suche einige schlechte UX-Nebeneffekte hat.

Könnten Sie näher erläutern, welche UX-Nebeneffekte?

[isaac (Isaac Janzen)]

Das Video, das ich oben verlinkt habe, zeigt einige der Probleme

• überlappende Such-Dropdowns
• seltsame offene und geschlossene Zustände von Such-Dropdowns
• Suchsymbol ist ein Link zur erweiterten Suche in einem Suchfeld und nicht im anderen
• usw.

[RBoy]

Verstanden. Solange sie nicht auf derselben Seite zusammen sind, sollte es in Ordnung sein.

[مباركمبارك (مبارك)]

Kann mir jemand helfen? Ich habe dieses Theme auf meinem Discourse installiert, aber das Bild schneidet auf der rechten Seite ein Stück ab. Damit das Bild vollständig passt, muss ich die Schriftart der Website auf “Kleiner” stellen. Ich habe zwei verschiedene Installationen von Discourse und in einer davon hat das Bild normal funktioniert, in der anderen wird das Bild abgeschnitten?

[awesomerobot (Kris)]

Können Sie einen Screenshot einfügen? Dies wird das Verständnis des Problems erheblich erleichtern.

[ecki (Bernd)]

Ich habe das gleiche Problem, dass verschiedene Browser/Modi unterschiedliche Teile dieses Bildes anzeigen. Ich habe es gelöst, indem ich es extra breit gemacht habe, sodass die rechte Seite nur unter bestimmten Bedingungen angezeigt wird. Aber das ist bei symmetrischen Bildern nicht so einfach. Ich vermute, etwas mehr CSS (ohne nach einem thome-component-overwrite zu suchen) würde dabei helfen.

[مباركمبارك (مبارك)]

Ich habe es geschafft, einen Teil davon zu lösen. Ich habe die Theme-Komponente in den anderen Themes deaktiviert und sie nur auf 1 belassen. Unglaublich, wie es scheint, war das Bild nur wegen des Handys „normal“ mit der Schriftgröße „normal“, sodass nur eine Seite des Bildes erscheint. Gibt es etwas, das ich tun kann, damit es auch auf meinem Handy vollständig erscheint?

[Surbhi_Pal1 (Surbhi)]

Hallo,

Gibt es eine Möglichkeit, den Abstand zwischen dem Suchbanner und dem Header zu entfernen?

[Arkshine]

Hallo, Sie können dieses CSS in einer neuen Theme-Komponente verwenden:

.custom-search-banner-wrap {
    margin-top: 0;
}

[Surbhi_Pal1 (Surbhi)]

Funktionierte einwandfrei, danke!

[PT_LB (Paul)]

Es scheint, dass Discourse das gleiche Problem hat wie in meiner Community: Das Overlay braucht einige Zeit, um das abzudecken, was sich unter dem Such-Underlay (Discover) befindet:

In meiner Community ist es ausgeprägter:

Ich frage mich, ob jemand eine Lösung dafür gefunden hat, möglicherweise eine Verzögerung bei der Anzeige des Overlays? Könnte zu einer schlechten Erfahrung führen.