Ce composant de thème est une évolution des tentatives précédentes de bannières. L’objectif est de fournir plus de facilité et de flexibilité grâce à l’utilisation des paramètres du thème.
Limiter l’affichage aux utilisateurs connectés ou aux utilisateurs anonymes
Limiter l’affichage exclusivement aux appareils mobiles ou aux ordinateurs de bureau
Limiter l’affichage à des pages spécifiques
Options de fermeture, d’expansion et de visibilité permanente
Option de largeur complète du navigateur
Gestion des couleurs
Personnalisation de l’en-tête et des colonnes à l’aide de HTML (voir ci-dessous pour plus de détails)
Option d’état persistant (voir ci-dessous pour plus de détails)
Personnalisation du contenu de votre bannière
Le contenu de la bannière est divisé en un en-tête principal et des colonnes. Vous pouvez avoir jusqu’à 5 colonnes sur votre bannière, cependant, le nombre recommandé est de 3 ou moins en raison des limitations de largeur. Des modèles HTML sont fournis et peuvent être personnalisés pour répondre à vos besoins individuels. Vous pouvez également contrôler la largeur de chaque colonne et ajouter n’importe quelle image ou icône Font Awesome que vous souhaitez en haut de chaque colonne.
Utilisation de l’option d’état persistant
L’option d’état persistant reposera sur jusqu’à deux cookies. Ces cookies contiendront un nom pour la bannière et une valeur vrai/faux liée à l’état de la bannière. Si vous avez des préoccupations concernant l’utilisation de cookies sur votre site, il est préférable d’éviter d’utiliser ce paramètre. Choisir une option de temps relatif pour le paramètre cookie_lifespan assurera que la bannière reste fermée/déployée/réduite pendant cette durée après que l’utilisateur a appuyé sur le bouton approprié. Sans ce paramètre, la bannière se réinitialise à chaque chargement complet de la page. Si vous apportez une modification à la bannière et souhaitez vous assurer que tous les utilisateurs voient ces modifications, même ceux qui avaient précédemment fermé la bannière, assurez-vous de modifier le “nom du cookie”. Cela réinitialisera essentiellement tout état persistant, puis permettra à l’utilisateur de fermer la bannière une nouvelle fois.
Paramètres
Nom
Description
show for members
Afficher la bannière pour les utilisateurs connectés au forum
show for anon
Afficher la bannière pour les utilisateurs anonymes
display on mobile
Afficher la bannière sur les appareils mobiles
display on desktop
Afficher la bannière sur les ordinateurs de bureau
display on homepage
Afficher la bannière sur la page d’accueil
url must contain
Saisissez les chemins qui doivent afficher la bannière. Ajoutez * à la fin du chemin comme caractère générique
dismissible
Permettre aux utilisateurs de fermer la bannière
collapsible
Permettre aux utilisateurs de développer et de réduire la bannière
default collapsed state
État réduit par défaut lorsque le paramètre réductible est activé
cookie lifespan
La durée de vie du cookie utilisé pour se souvenir si la bannière a été fermée, développée ou réduite. Si défini sur “none”, AUCUN cookie ne sera utilisé avec ce composant, et tous les cookies précédemment créés liés à la bannière seront supprimés la prochaine fois qu’un utilisateur effectuera un chargement complet de la page. Les valeurs sont mesurées comme une unité unique, donc définir “year” sera une année, “week” sera une semaine, etc.
cookie name
Lorsque des modifications importantes sont apportées à la bannière, vous devez modifier le nom du cookie pour vous assurer que tous vos utilisateurs voient les modifications.
full width banner
Afficher la bannière à la largeur complète du navigateur
swap default positioning
S’il y a un autre composant lié à la bannière actif, utilisez ceci pour échanger sa position avec Versatile Banner
plugin outlet
below-site-header le place au-dessus de la barre latérale, above-main-container le place au-dessus du contenu à côté de la barre latérale
banner background image
L’URL source de votre image d’arrière-plan. Astuce : Vous pouvez télécharger une image sur votre thème principal et utiliser l’URL de celle-ci, mais assurez-vous de ne pas utiliser la section “Uploads” de ce composant. Tous les ajouts à ce composant seront supprimés à chaque mise à jour.
banner background image dark
L’URL source de votre image d’arrière-plan lorsque le mode sombre du système est détecté.
background color
Utilisé à la place d’une image d’arrière-plan
background color dark
Utilisé à la place d’une image d’arrière-plan lorsque le mode sombre du système est détecté.
primary text color
La couleur du texte principal de la bannière
primary text color dark
La couleur du texte principal de la bannière lorsque le mode sombre du système est détecté
secondary text color
La couleur du texte de l’icône et des en-têtes de texte, et la couleur d’arrière-plan du bouton.
secondary text color dark
La couleur du texte de l’icône et des en-têtes de texte, et la couleur d’arrière-plan du bouton lorsque le mode sombre du système est détecté.
link text color
La couleur du texte des liens dans la bannière
link text color dark
La couleur du texte des liens dans la bannière lorsque le mode sombre du système est détecté.
Traduction
Défaut
close.title
Fermer la bannière
close.label
Fermer
toggle.title
Développer/Réduire la bannière
toggle.collapse_label
Réduire
toggle.expand_label
Développer
Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Pro, Business et Enterprise.
Salut tout le monde ! Je veux que tout le texte soit aligné à gauche, mais le thème CSS ne fonctionne pas pour moi. Quelqu’un peut-il m’expliquer exactement comment faire ?
Vous devrez créer un nouveau composant nommé « Personnalisations polyvalentes pour les bannières » et ajouter le CSS ci-dessus dans la section « Commun ». Assurez-vous d’ajouter ce nouveau composant à tous les thèmes actifs qui utilisent la bannière polyvalente afin de prendre en compte la personnalisation.
Pourriez-vous nous donner un exemple ?
Pourquoi feriez-vous cela ?
Je veux dire… toutes les images d’arrière-plan deviendraient des liens ?
Si un utilisateur clique n’importe où sur la bannière, il sera redirigé vers ce lien.
Je n’arrive pas à imaginer l’utilité.
Bonjour @tshenry, j’utilise le composant de bannière Versatile, mais il disparaît lorsque je décoche l’option « afficher sur ordinateur ». En effet, je souhaiterais afficher la bannière uniquement sur mobile.
Cependant, lorsque je décoche « afficher sur ordinateur », la bannière Versatile disparaît à la fois sur ordinateur et sur mobile.
Voici le site si vous souhaitez vérifier : https://hec.fm
Est-il possible d’afficher les liens horizontalement sur mobile également ? J’ai été un peu surpris de les voir s’afficher les uns sous les autres au lieu d’être alignés horizontalement.
Merci d’avoir signalé ce problème ! Désolé pour le délai de réponse. Je parviens à reproduire le comportement que vous décrivez. Je suis presque certain de savoir ce qui se passe. Je m’en occuperai plus tard cette semaine et je reviendrai vers vous.
La hauteur de la bannière dépend principalement de son contenu, mais vous pouvez ajuster n’importe quel élément selon vos besoins avec votre propre CSS. Je ne sais pas trop dans quelle mesure vous pourrez aligner trois colonnes horizontalement sur mobile, mais vous pouvez tout à fait essayer avec du CSS personnalisé ! Consultez Making custom CSS changes on your site pour quelques conseils.
Je pense rencontrer un bug sur mon site concernant la durée de vie des cookies pour conserver l’état d’expansion/réduction. Ce que je souhaite, c’est que mon site se souvienne quand les utilisateurs réduisent ou étendent la bannière, et qu’il conserve cet état quelle que soit la situation. Cela fonctionne comme prévu lorsque je reste sur la page d’accueil ou que je clique sur des sujets. Cependant, dès que je vais dans le panneau d’administration, les paramètres utilisateur, la FAQ, À propos, les CGU, la confidentialité ou la documentation, puis que je retourne à la page d’accueil, les choses deviennent étranges : parfois la bannière est dans l’état opposé à celui défini, et parfois même l’icône de flèche indiquant la réduction ou l’expansion est orientée incorrectement.
Je viens de remarquer que la bannière polyvalente n’apparaît plus sur la page de connexion de notre forum (qui est privé), contrairement à avant.
L’option « Afficher la bannière pour les utilisateurs anonymes » est cochée dans les paramètres du composant.
En examinant le code HTML, je vois une balise div avec la classe ‘banner-box’ à l’intérieur d’une série imbriquée de divs portant la classe ‘emberX’, mais la div ‘banner-box’ est vide, contrairement au HTML des utilisateurs connectés.
Avez-vous une idée de ce qui pourrait causer ce problème ?
Je viens de pousser une petite mise à jour du composant.
Cela devrait être corrigé avec la mise à jour ci-dessus. Je suis vraiment désolé que cela ait pris autant de temps pour appliquer ce correctif. Merci encore pour votre signalement !
Vous devrez ajouter /login au paramètre du thème « L’URL doit contenir ». Consultez ce message pour plus de détails.
Cela a déjà été signalé une ou deux fois par le passé. Malheureusement, je n’ai jamais réussi à le reproduire. Je vais réessayer dès que possible en suivant exactement vos étapes et voir si j’ai plus de chance.
J’utilise le bannière versatile et j’essaie de transformer le bannière en un lien géant qui redirige vers un autre site web. Comment puis-je faire ?
J’ai essayé de le modifier via un script : api.changeWidgetSetting('banner-content-widget', 'href', '<site_adresse>'), mais le bannière versatile arrête de fonctionner.
Vous pourriez peut-être faire quelque chose comme ceci :
<script type="text/discourse-plugin" version="0.10.0">
// Ajouter le lien au titre
api.reopenWidget("banner-box-widget", {
html(attrs) {
let bannerBox = this._super();
bannerBox[0].children[1].tagName = "A";
bannerBox[0].children[1].properties.href = "https://meta.discourse.org";
return bannerBox;
}
});
// Ajouter le lien au reste du contenu
api.reopenWidget("banner-content-widget", {
html(attrs) {
let bannerContent = this._super();
bannerContent.tagName = "A";
bannerContent.properties.href = "https://meta.discourse.org";
return bannerContent;
}
});
</script>
Et ajouter une règle CSS pour ajuster la couleur du lien :
.banner-box a {
color: var(--primary);
}
À moins que vous n’ayez besoin d’une fonctionnalité spécifique offerte par la bannière Versatile, je me demande si il ne serait pas préférable de créer vous-même une simple bannière HTML dans un nouveau composant. Exemple approximatif :
Ajoutez ce qui suit dans la section commune « Après l’en-tête » :
<a href="https://meta.discourse.org">
<div class="custom-banner">
<h2>Ceci est une bannière personnalisée !</h2>
</div>
</a>
Cela est dû au fait que vous exécutez la version 2.6.0.beta2 de Discourse. Le commit que vous avez lié nécessite la version 2.6.0.beta3 ou supérieure. Vous remarquerez que le commit lié a ajouté un fichier discourse-compatibility pour vous assurer de ne pas mettre à jour vers un commit incompatible avec votre version de Discourse.
Bonjour @tshenry,
Je souhaite installer le composant plusieurs fois afin d’utiliser chaque instance pour afficher des bannières différentes selon les catégories. J’ai donc désactivé l’option « Afficher sur la page d’accueil » et utilisé la condition « L’URL doit contenir », mais cela empêche le composant principal, que j’utilise pour l’afficher uniquement sur la page d’accueil, de fonctionner. Pourriez-vous me proposer une autre solution ou s’agit-il d’un bug ? Merci ! (:
Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Pro, Business et Enterprise.
