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

[Discourse]

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

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

Les bannières sont un moyen efficace de communiquer des informations importantes aux visiteurs de votre 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 facilement ce qu’ils recherchent.

Pour activer la bannière de bienvenue :

1. Dans la zone d’administration, cliquez sur le lien Apparence > Thèmes et composants dans la barre latérale.
2. Trouvez votre thème actif et cliquez sur Modifier.
3. Trouvez le paramètre Activer la bannière de bienvenue et assurez-vous qu’il est coché.

Cela activera la bannière de bienvenue pour ce thème. Si vous proposez plusieurs thèmes sélectionnables par l’utilisateur, vous devrez répéter ce processus pour chaque thème.

Personnalisation de la bannière de bienvenue

Vous pouvez personnaliser la bannière de bienvenue pour modifier son apparence dans votre communauté. Dans la zone d’administration, lorsque vous accédez à Tous les paramètres du site, vous pouvez rechercher “bannière de bienvenue” pour trouver les options de personnalisation suivantes :

• Emplacement de la bannière de bienvenue : 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 subtile et illustrée dans les captures d’écran ci-dessous :

• Visibilité de la page de la bannière de bienvenue : Ceci détermine quelles pages affichent la bannière de bienvenue. Par défaut, elle s’affiche sur les “Pages du menu principal” (c’est-à-dire les pages sélectionnées dans le paramètre Menu principal), mais vous pouvez la modifier pour :
  • “Page d’accueil” : 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 Menu principal).
  • “Découverte” : La bannière de bienvenue s’affiche sur toutes les pages du Menu principal, même si elles ne sont pas affichées dans le menu principal 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 n’est généralement pas 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.

• Image de la bannière de bienvenue : Téléchargez une image pour servir d’arrière-plan à votre bannière de bienvenue.

Vous pouvez également personnaliser le texte de la bannière de bienvenue pour modifier le message d’accueil et ajouter plus de texte explicatif. Pour personnaliser le texte de la bannière :

1. Dans la zone d’administration, cliquez sur le lien Apparence > Textes du site dans la barre latérale.
2. Recherchez la chaîne de texte que vous souhaitez ajuster :

• js.welcome_banner.header.logged_in_members — Le message d’accueil principal affiché aux membres connectés dans la bannière de bienvenue.
• js.welcome_banner.header.anonymous_members — Le message d’accueil principal affiché aux membres anonymes (c’est-à-dire non connectés) dans la bannière de bienvenue.
• js.welcome_banner.subheader.logged_in_members — Une ligne de texte secondaire facultative affichée aux membres connectés dans la bannière de bienvenue, sous l’en-tête.
• js.welcome_banner.subheader.anonymous_members — Une ligne de texte secondaire facultative affichée aux membres anonymes (c’est-à-dire non connectés) dans la bannière de bienvenue, sous l’en-tête.
• js.welcome_banner.search_placeholder — Le texte d’espace réservé affiché dans le champ de recherche de la bannière de bienvenue.

3. Cliquez sur le bouton Modifier.
4. Mettez à jour le texte comme vous le souhaitez.
5. Cliquez sur Enregistrer les modifications.

Bannière dismissible

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

1. Créez ou accédez à 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 la clé à molette à droite ou en bas du sujet.
3. Sélectionnez “Épingler le sujet…”
4. Dans la nouvelle fenêtre, choisissez Créer une bannière de sujet

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

Conseils pour des bannières dismissibles 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 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 toujours visible et que les utilisateurs ne peuvent pas dismisser :

1. Dans les paramètres de votre site, recherchez global_notice.
2. Entrez votre texte ou votre HTML de bannière dans ce champ.

Conseils pour les bannières permanentes :

• Ce type de bannière est généralement utilisé pour les 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 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 principale.

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 des utilisateurs
• 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 dismissible, extensible ou persistante
• Paramètre de largeur totale 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 à l’aide de 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 (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.