Bannière de recherche avancée

[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)]

Je viens de faire une petite mise à jour qui ajoute un style optionnel à ce composant, il vous donne une grande barre de recherche sans texte de titre :

Cela peut être activé par un nouveau paramètre « style spécial ». Tout cela fait est d’activer un peu de CSS supplémentaire.

Je pourrais ajouter d’autres options ici à l’avenir !

[AndyBr (Andy)]

Comment puis-je changer la couleur du texte de bienvenue dans ce module complémentaire ?

[Arkshine]

Il n’y a pas de paramètre pour cela. Cependant, vous pouvez l’ajouter avec un peu de CSS :

Ajoutez ce qui suit à votre thème ou à un nouveau composant de thème, et modifiez-le comme vous le souhaitez.

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

[AndyBr (Andy)]

Merci beaucoup !

[RBoy]

Existe-t-il un moyen de masquer l’icône de recherche (en utilisant CSS ou autrement) ? J’ai un problème où l’icône de recherche est dupliquée lorsqu’elle est utilisée conjointement avec ce composant : Advanced Header Search - #56 by RBoy

[isaac (Isaac Janzen)]

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

ne devrait afficher qu’une seule icône de recherche. Je dois dire cependant que l’utilisation simultanée de la bannière de recherche et de la recherche dans l’en-tête a des effets secondaires négatifs sur l’expérience utilisateur.

Je recommanderais de n’en utiliser qu’une seule.

[RBoy]

Merci ! Très utile

@isaac

Je dirai cependant que l’utilisation de la bannière de recherche et de la recherche dans l’en-tête de manière tangentielle a des effets secondaires négatifs sur l’UX.

Pourriez-vous préciser quels effets secondaires sur l’UX ?

[isaac (Isaac Janzen)]

La vidéo que j’ai liée ci-dessus montre quelques-uns des problèmes

• listes déroulantes de recherche qui se chevauchent
• états ouverts et fermés étranges des listes déroulantes de recherche
• l’icône de recherche est un lien vers la recherche avancée dans une zone de saisie de recherche et pas dans l’autre
• etc.

[RBoy]

Compris. Tant qu’ils ne sont pas sur la même page, tout devrait aller bien.

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

Quelqu’un peut-il m’aider ? J’ai installé ce thème sur mon Discourse mais l’image est coupée sur le côté droit. Pour que l’image s’affiche complètement, je dois définir la police du site sur « Plus petite ». J’ai deux installations différentes de Discourse et dans l’une d’elles, l’image fonctionnait normalement, dans l’autre, pourquoi l’image est-elle coupée ?

[awesomerobot (Kris)]

pouvez-vous inclure une capture d’écran ? cela facilitera grandement la compréhension du problème

[ecki (Bernd)]

J’ai le même problème : différents navigateurs/modes affichent différentes parties de cette image. Je l’ai résolu en la rendant très large, de sorte que le côté droit n’apparaît que dans certaines conditions. Mais ce n’est pas si facile pour les images symétriques. Je suppose que quelques CSS supplémentaires (sans chercher à remplacer un composant d’accueil) aideraient.

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

J’ai réussi à résoudre une partie du problème, j’ai désactivé le composant de thème dans les autres thèmes et je l’ai laissé uniquement sur 1, aussi incroyable que cela puisse paraître, l’image était « normale » avec la taille de police sur « normale » uniquement à cause du téléphone portable où un seul côté de l’image apparaît, y a-t-il quelque chose que je puisse faire pour qu’elle apparaisse complètement sur mon téléphone portable aussi ?

[Surbhi_Pal1 (Surbhi)]

Salut,

Y a-t-il un moyen de supprimer l’espace entre la bannière de recherche et l’en-tête ?

[Arkshine]

Salut, vous pouvez utiliser ce CSS dans un nouveau composant de thème :

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

[Surbhi_Pal1 (Surbhi)]

Ça a parfaitement fonctionné, merci !

[PT_LB (Paul)]

Il semble que Discourse ait le même problème que dans ma communauté, la superposition met du temps à couvrir ce qui se trouve sous le fond de recherche (Discover) :

C’est plus prononcé dans ma communauté :

Je me demande si quelqu’un a trouvé une solution à cela, potentiellement un délai pour afficher la superposition ? Cela pourrait entraîner une mauvaise expérience.