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

[Discourse]

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

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

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

Bannière de bienvenue

Une bannière de bienvenue accueille les nouveaux membres et les membres de retour avec un message amical et une barre de recherche proéminente, permettant aux visiteurs de trouver rapidement le contenu qu’ils recherchent.

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

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

• Activé sur les thèmes… : Ceci vous permet de désigner quels de vos thèmes actifs doivent afficher la bannière de bienvenue.
• Image d’arrière-plan : Téléchargez une image pour servir d’arrière-plan à votre bannière de bienvenue.
• Couleur du texte : Si la couleur de texte par défaut contrôlée par votre palette de couleurs entre en conflit avec votre image d’arrière-plan, vous pouvez sélectionner une nouvelle couleur ici. Notez que ce paramètre ne s’applique que lorsque vous avez téléchargé une image d’arrière-plan.
• Visibilité de la page : Ceci détermine quelles pages affichent la bannière de bienvenue. Par défaut, elle s’affiche sur les Pages du menu supérieur (ce qui signifie les pages sélectionnées dans le paramètre de site Menu supérieur), mais vous pouvez changer pour :
  • Page d'accueil uniquement : La bannière de bienvenue 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 de bienvenue 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 de bienvenue s’affiche sur toutes les pages de votre site. Ceci est généralement non recommandé car cela peut créer un encombrement visuel sur les pages de sujets qui distrait les membres de la lecture et de la participation.
• Emplacement : Ceci détermine où la bannière de bienvenue 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, et montrée dans les captures d’écran ci-dessous :

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

• En-tête pour les nouveaux membres : Le message de salutation principal affiché aux nouveaux membres la première fois qu’ils se connectent à votre site.
• En-tête pour les membres connectés : Le message de salutation principal affiché aux membres de retour.
• En-tête pour les visiteurs anonymes : Le message de salutation principal affiché aux membres anonymes (c’est-à-dire non connectés).
• Sous-titre pour les membres connectés : Une ligne de texte secondaire facultative sous l’en-tête affichée aux membres de retour.
• Sous-titre 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).
• Espace réservé pour la recherche : Le texte d’espace réservé affiché dans le champ de recherche de la bannière de bienvenue.

Bannière à masquer

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

1. Créez ou naviguez vers un sujet dans n’importe quelle catégorie (publique ou privée). Le message original (OP) en haut du sujet sera la source de votre bannière.
2. Ouvrez les options d’administration en cliquant sur l’icône de clé à molette à droite ou en bas du sujet.
3. Sélectionnez « Épingler le sujet… »
4. Dans la nouvelle fenêtre, choisissez Faire de ceci une bannière de sujet
   La bannière apparaîtra maintenant en haut de votre site. Les utilisateurs verront une bannière qu’ils peuvent masquer. Le personnel verra également un lien pour modifier le sujet source.

Conseils pour des bannières à masquer efficaces :

• Gardez le texte clair et concis
• La hauteur maximale est de 250px (modifiable via CSS)
• Pour un texte plus long, les utilisateurs peuvent faire défiler le contenu de la bannière
• Envisagez d’ajouter un lien vers un sujet public pertinent pour plus d’informations

Bannière permanente

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

1. Dans les paramètres de votre site, recherchez global_notice.
2. Entrez 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 des communications urgentes sur le site, mais peut être utilisé pour tout message permanent
• Cette bannière est visible par tout le monde, y compris les utilisateurs anonymes sur les sites où la connexion est requise (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 de bienvenue de base.

Bannière de lien de bienvenue

Ce composant vous permet d’ajouter du 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 de l’utilisateur
• Personnaliser les images ou les couleurs d’arrière-plan
• 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 des options de personnalisation étendues via l’interface, notamment :

• Affichage de la bannière limité à
  • utilisateurs connectés ou anonymes
  • appareil mobile ou de bureau
  • page d’accueil, liste de sujets ou toutes les pages
• Options pour masquer, développer ou maintenir la bannière
• Paramètre de largeur complète du navigateur
• Gestion des couleurs
• Personnalisation de l’en-tête et des colonnes à l’aide de 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 sur l’utilisation des thèmes Discourse.

[leopedrini (Leonardo Zanoni Pedrini)]

@Discourse

Lien Apparence > Thèmes et composants dans la barre latérale.

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

[leopedrini (Leonardo Zanoni Pedrini)]

@leopedrini

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

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

[RBoy]

@Discourse

js.welcome_banner.search — Le texte d’espace réservé affiché dans le champ de recherche de la bannière de bienvenue.

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 (Kris)]

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

[RBoy]

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

[tknospdr (David Muszynski)]

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 (Yuriy Kurant)]

@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 (David Muszynski)]

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 (Yuriy Kurant)]

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 (David Muszynski)]

@yuriy

Quel est exactement votre remplacement ?

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.