Créer une bannière à afficher en haut de votre site

Discourse · Août 17, 2020, 9:16

Ce guide explique différentes méthodes pour créer et personnaliser des bannières sur votre site Discourse, des bannières simples fermables aux options plus avancées.

Niveau d’utilisateur requis : Modérateur (bannière fermable), Administrateur

Les bannières sont un moyen efficace de communiquer des informations importantes à vos visiteurs. Ce guide vous guidera à travers les différentes méthodes pour créer et personnaliser des bannières sur votre site Discourse.

Bannière d’accueil

Une bannière d’accueil salue les nouveaux membres et les membres de retour avec un message amical et une barre de recherche bien visible, permettant aux visiteurs de trouver rapidement le contenu qu’ils recherchent.

Pour activer et personnaliser la bannière d’accueil, accédez à la zone d’administration et sélectionnez le lien Apparence > Bannière d’accueil dans la barre latérale.

Dans cette zone, vous trouverez les paramètres suivants :

Activé sur les thèmes…: Cette option vous permet de désigner quels thèmes actifs doivent afficher la bannière d’accueil.
Image de fond: Téléversez une image pour servir de fond à votre bannière d’accueil.
Couleur du texte: Si la couleur du texte par défaut, contrôlée par votre palette de couleurs, entre en conflit avec votre image de fond, vous pouvez sélectionner une nouvelle couleur ici. Notez que ce paramètre ne s’applique que lorsque vous avez téléversé une image de fond.
Visibilité de la page: Cela détermine sur quelles pages la bannière d’accueil est affichée. Par défaut, elle s’affiche sur les Pages du menu supérieur (c’est-à-dire les pages sélectionnées dans le paramètre de site Menu supérieur), mais vous pouvez changer vers :
- Page d'accueil uniquement: La bannière d’accueil ne s’affiche que sur la page d’accueil du site (c’est-à-dire la première page listée dans le paramètre de site Menu supérieur).
- Pages de découverte: La bannière d’accueil s’affiche sur toutes les pages du Menu supérieur, même si elles ne sont pas affichées dans le menu supérieur réel de votre site (c’est-à-dire non sélectionnées dans le paramètre).
- Toutes les pages: La bannière d’accueil s’affiche sur toutes les pages de votre site. Cela est généralement non recommandé car cela peut créer un désordre visuel sur les pages de sujets qui distrait les membres de la lecture et de la participation.
Emplacement: Cela détermine où la bannière d’accueil s’affiche sur la page. Par défaut, elle s’affiche Au-dessus du contenu du sujet, mais vous pouvez également sélectionner Sous l'en-tête du site. La différence est un peu subtile, comme le montrent les captures d’écran ci-dessous :

Vous pouvez également personnaliser le texte de la bannière d’accueil pour modifier la salutation et ajouter plus de texte explicatif à la bannière d’accueil.

En-tête pour les nouveaux membres: La salutation principale affichée aux nouveaux membres la première fois qu’ils se connectent à votre site.
En-tête pour les membres connectés: La salutation principale affichée aux membres de retour.
En-tête pour les visiteurs anonymes: La salutation principale affichée aux membres anonymes (c’est-à-dire non connectés).
Sous-en-tête pour les membres connectés: Une ligne de texte secondaire facultative sous l’en-tête affichée aux membres de retour.
Sous-en-tête pour les visiteurs anonymes: Une ligne de texte secondaire facultative sous l’en-tête affichée aux membres anonymes (c’est-à-dire non connectés).
Texte de substitution de recherche: Le texte de substitution affiché dans le champ de recherche de la bannière d’accueil.

Bannière fermable

Une bannière fermable est un avis temporaire que les utilisateurs peuvent fermer. Voici comment en créer une :

Créez ou accédez à un sujet dans n’importe quelle catégorie publique. Le premier message (OP) en haut du sujet sera la source de votre bannière.
Ouvrez les options d’administration en cliquant sur l’icône de clé à molette à droite ou en bas du sujet.
Sélectionnez « Épingler le sujet… »
Dans la nouvelle fenêtre, choisissez Faire du sujet une bannière

La bannière apparaîtra maintenant en haut de votre site. Les utilisateurs verront une bannière fermable. Le personnel verra également un lien pour modifier le sujet source.

Conseils pour des bannières fermables efficaces :

Gardez le texte clair et concis
La hauteur maximale est de 20vh (modifiable via CSS)
Pour un texte plus long, les utilisateurs peuvent faire défiler dans la bannière
Envisagez d’ajouter un lien vers un sujet public pertinent pour plus d’informations
Si vous souhaitez masquer le sujet utilisé comme bannière, vous pouvez le retirer de la liste en utilisant le menu d’administration du sujet

Bannière permanente

Pour créer une bannière toujours visible et qui ne peut pas être fermée par les utilisateurs :

Dans vos paramètres de site, recherchez global_notice.
Saisissez votre texte de bannière ou votre HTML dans ce champ.

Conseils pour les bannières permanentes :

Ce type de bannière est généralement utilisé pour les communications urgentes du site, mais peut être utilisé pour tout message permanent
Cette bannière est visible par tous, y compris les utilisateurs anonymes sur les sites login_required
La bannière peut être supprimée en réinitialisant le paramètre de site global notice

Bannières avancées

Vous pouvez créer des bannières plus avancées en utilisant un composant de thème. Veuillez noter que ces composants de thème peuvent entrer en conflit avec la fonctionnalité de bannière d’accueil intégrée.

Bannière de lien d’accueil

Ce composant vous permet d’ajouter un texte personnalisé et 1 à 4 liens à votre bannière. Il offre diverses options de personnalisation, notamment :

Choisir où afficher la bannière (page d’accueil, listes de sujets ou toutes les pages)
Ajouter des liens avec des icônes Font Awesome
Limiter la visibilité en fonction des niveaux de confiance des utilisateurs
Personnaliser les images de fond ou les couleurs
Ajuster les couleurs du texte et des icônes

Bannière polyvalente

L’un des composants les plus populaires et les mieux entretenus, la Bannière polyvalente offre d’extensives options de personnalisation via l’interface, notamment :

Affichage de la bannière limité à
- utilisateurs connectés ou anonymes
- appareil mobile ou ordinateur de bureau
- page d’accueil, liste de sujets ou toutes les pages
Options fermables, dépliables ou persistantes
Paramètre de pleine largeur du navigateur
Gestion des couleurs
Personnalisation de l’en-tête et des colonnes en utilisant HTML

Personnalisation des bannières avec CSS

Vous pouvez personnaliser tous les types de bannières en utilisant CSS. Pour plus d’informations sur l’utilisation de CSS pour personnaliser votre site Discourse, consultez le Guide du débutant pour l’utilisation des thèmes Discourse.

leopedrini · Août 22, 2025, 11:11

Je n’ai pas trouvé cette option… Est-ce une nouvelle fonctionnalité en version bêta ?

leopedrini · Août 22, 2025, 12:57

Mise à jour : après la mise à jour de la version 3.4.6 à la version 3.5.0, elle était visible :

RBoy · Août 24, 2025, 10:28

Il y a un bug dans la version 3.6.0.beta1-dev (e44347414a)

Changer ce texte du site n’a aucun effet sur le texte dans la barre de recherche, il affiche toujours Search. Testé sur Windows 10 x64 avec Chrome.

awesomerobot · Août 25, 2025, 4:26

Travail sur une correction ici : DEV: use welcome_banner.search placeholder in search banner by awesomerobot · Pull Request #34523 · discourse/discourse · GitHub

RBoy · Août 26, 2025, 4:12

Génial, merci - ça a résolu le problème !

tknospdr · Octobre 3, 2025, 2:42

J’ai un problème avec mon image d’arrière-plan pour la bannière de bienvenue.
J’utilise les buckets Cloudflare R2 S3 pour le stockage d’objets sur le site en question.
Lorsque je télécharge une image d’arrière-plan dans la section admin, elle s’affiche correctement, si je clique pour l’afficher en taille réelle, cela fonctionne. Et si je fais un clic droit et que j’affiche l’image dans un nouvel onglet, cela fonctionne et utilise l’URL du bucket public :
https://eufiles.technospider.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

Ce qu’il injecte dans le CSS, cependant, c’est cette URL :

https://exotics-unlimited.7100e60b936991e069a3230dc05d4976.r2.cloudflarestorage.com/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg

J’ai un autre site qui utilise le stockage local et l’image d’arrière-plan de la bannière fonctionne correctement.

Est-ce un bug dans le code, ou est-ce que je fais quelque chose de mal ?

Après avoir creusé un peu plus, il semble que ce CSS contrôle l’image d’arrière-plan :

Si je remplace manuellement l’URL dans l’inspecteur, cela fonctionne.
J’ai essayé de le remplacer par :

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

Mais cela ne fonctionne pas. J’ai toujours l’impression que c’est un bug.

yuriy · Octobre 30, 2025, 2:43

@tknospdr, je ne comprends pas tout à fait le problème que vous rencontrez ?

J’ai vérifié votre site https://eu.technospider.com, et je vois que l’image d’arrière-plan est rendue comme prévu :

tknospdr · Octobre 30, 2025, 2:49

Je pense que j’ai enfin réussi à faire fonctionner le remplacement CSS. Le problème est qu’il ne devrait pas nécessiter de remplacement.

Il semble que le code de la bannière utilise le mauvais actif si vous hébergez avec Cloudflare S3.

yuriy · Octobre 30, 2025, 3:17

quel est exactement votre remplacement ?

De notre côté, nous pourrions nous assurer de n’appliquer qu’un chemin d’URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg en CSS :

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

Je pense que cette règle fonctionnerait pour vous sans nécessiter de remplacements ?

tknospdr · Octobre 30, 2025, 3:26

Mon remplacement complet est :

.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;
}

De notre côté, nous pourrions nous assurer que nous appliquons uniquement un chemin d’URL /original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg en CSS :
background-image: url(/original/1X/609c9563f4d8c7d229b495a2cb967782a63aa2df.jpeg)
Je pense que cette règle fonctionnerait pour vous sans nécessiter de remplacement ?

Dans l’interface utilisateur, tout ce que je peux faire est de télécharger une image, donc je pense qu’un changement de code est nécessaire pour pouvoir supprimer ma déclaration de remplacement CSS.
Je serais heureux d’essayer toutes les corrections que vous souhaitez implémenter.

Frenky · Janvier 7, 2026, 1:50

Bonjour à tous,

Avec la dernière mise à jour de Discourse, le composant de thème Advanced Search Banner n’est plus pris en charge et ne semble plus être maintenu. À la place, il existe maintenant l’extension officielle Welcome Banner.

Le problème est que le nouveau composant ne permet actuellement de sélectionner qu’une seule image de fond. Avec l’ancien composant Advanced Search Banner, il était possible de définir différentes images de fond pour le mode clair et le mode sombre, ce qui était bien sûr idéal pour différentes mises en page et thèmes.

Ma question à la communauté :

Existe-t-il un moyen de reproduire cette fonctionnalité dans le Welcome Banner ?
Quelqu’un a-t-il déjà implémenté une extension ou une solution de contournement pour utiliser différentes images de fond pour les modes clair et sombre ?
Est-il prévu que les développeurs implémentent cela éventuellement ?

J’apprécierais tout indice, conseil ou idée !

Merci d’avance !

Sujet		Réponses	Vues
What Theme Component is Discourse using for this? Support	1	193	Octobre 5, 2024
Where do l create the banner topic? Support	5	238	Août 12, 2026
Custom banner or Some component (Help Needed) Support	2	188	Octobre 25, 2024
How to disable the text and search bar overlay on the welcome banner? Support	5	118	Octobre 8, 2026
Setup custom Welcome banner on the homepage Support	1	1072	Août 31, 2023