You can add banners in the component settings by defining the category right below the banner, a banner color and the heading text. There’s also an option to hide the default colored borders:
To add styles you can select the general class, as well as specific banners by category-id:
.category list .category-list-banner {
&.category-5 { [style a specific banner] }
&:after { [style the headings]}
}
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
That looks like expected behavior… The color slot takes any value that you can use as background-color in CSS. So when you give a hex value, it will stay the same color in different modes and themes.
If you actually don’t want a background color, you should state none or transparent.
If you want a background color that changes with modes, you’d need to state it with a CSS custom property: you could use one of Discourse’s pre-defined ones like var(--secondary-high). Or define some yourself, as explained in
Bonjour, j’adore voir ce que vous avez réussi à créer. Mais il est permis de me créditer aussi et de ne pas seulement me dépouiller et utiliser une partie de mon travail…
Content que vous aimez le composant ! Je ne suis pas sûr de comprendre pourquoi vous m’accusez de vous avoir volé en utilisant votre travail… ?
La création de ce composant a été inspirée par ce sujet :
J’avais orienté l’auteur vers votre solution, mais j’ai ensuite été intéressé par la manière de résoudre cela sans coder en dur les modèles et en déconstruisant les valeurs d’une liste de paramètres dans scss. Le code du composant concerne donc essentiellement cette solution : https://meta.discourse.org/t/how-to-add-settings-to-your-discourse-theme/82557/52?u=nolo
Mais en tout cas : si vous pensez que j’ai utilisé une partie de votre travail et que j’ai oublié de vous créditer, faites-le moi savoir et je mettrai à jour le premier message
Oui, j’aimerais bien avoir au moins une forme de reconnaissance. Mais c’est à vous de voir. Sinon, cela semble bien et je vais recommander ce composant de thème dans mon message car cela facilite les choses pour les nouveaux utilisateurs.
@ Nolo
Existe-t-il un moyen dans le TC, ou avec CSS dans le thème pour aligner le texte de l’en-tête à gauche, tout comme votre deuxième exemple).
Existe-t-il également un moyen (si vous n’utilisez pas d’image de bannière) de redimensionner l’en-tête à l’épaisseur d’une seule ligne de texte.
Et si oui, pouvez-vous redimensionner le texte pour qu’il ne soit pas aussi grand ?
Oui bien sûr, vous pouvez styliser les bannières en utilisant ces classes :
Si vous souhaitez remplacer les déclarations existantes sur la classe générale, vous devrez utiliser la propriété !important. Par exemple, pour les styles que vous avez mentionnés :
C’est parce que les styles sont en fait déclarés sur les bannières spécifiques. Je suppose que je pourrais améliorer cela dans le composant, mais pour l’instant, vous devrez remplacer avec important.
Merci beaucoup pour ce composant !! Je développe un forum politique, et pouvoir appliquer ce type de séparation est essentiel.
Bien que ce soit déjà une énorme amélioration pour mon forum, ce serait un changement radical si les en-têtes pouvaient être référencés par URL, car cela permettrait de créer des boutons en haut du forum à partir desquels l’utilisateur pourrait facilement naviguer sur la même page. Ce serait une fonctionnalité extrêmement agile si le forum (espérons-le) devenait beaucoup plus grand. Est-ce actuellement possible ?
Merci pour la suggestion @lisandro_iaffar. Bien que ce composant ne fournisse qu’une solution légère qui ne modifie pas les modèles HTML. Si vous souhaitez référencer les sections, vous devrez utiliser une approche telle que celle proposée par GitHub - discourse/discourse-minimal-category-boxes.
Je suis impatient d’essayer cela car j’ai créé un peu trop de catégories et pouvoir les organiser en groupes sera d’une grande aide.
Je le saurai quand j’essaierai, cela pourrait aussi être un moyen de laisser les anciennes catégories, moins utilisées, hors de la page d’accueil, n’est-ce pas ? Elles seraient toujours disponibles via la nouvelle barre latérale.
Oui, bien sûr En fait, je fais presque toujours des sélections de catégories sur différents éléments de page (barre latérale, en-tête, barre de navigation, page de catégorie, ..) C’est comme la structure d’un site Web. Il est important qu’elle soit bien organisée, mais elle n’a pas besoin de déterminer votre présentation d’interface utilisateur.
Bonjour @manuel Je voudrais savoir si ce merveilleux composant fonctionne toujours après les mises à jour du discours, je l’ai installé et il ne fonctionne pas pour moi, merci d’avance
This component only adds layout elements to the category page. So you can’t refer to these headings anywhere else on your site. Another caution: There’s no default page style Categories Only on mobile. It will always show featured topics as well.
Credits: The component was inspired by the look of the Cfx.re Community and by @godgutten’s original solution to achieve that look as shared in How do I add category banners?
En fait, je fais presque toujours des sélections de catégories sur différents éléments de page (barre latérale, en-tête, barre de navigation, page de catégorie, ..) C’est comme la structure d’un site Web. Il est important qu’elle soit bien organisée, mais elle n’a pas besoin de déterminer votre présentation d’interface utilisateur.
