Comment puis-je réaliser quelque chose comme ça ?
Lorsque j’ajoute des images à ma catégorie, elles sont toutes réduites et moches.
Existe-t-il un plugin personnalisé ou autre chose ?
Consultez Category Banners. Il s’agit d’un composant de thème que vous pouvez installer sur votre site pour ajouter une bannière à vos catégories. La section « Style CSS supplémentaire » au bas du sujet fournit des détails sur la manière de définir une image d’arrière-plan pour la bannière.
À première vue, il semble que ce soit une bannière pour la catégorie. J’ai besoin d’une bannière qui montre la section, pour mieux m’expliquer…
C’est ce que je veux.
Cela nécessitera un travail personnalisé. Consultez le guide des thèmes si vous souhaitez le faire vous-même, ou créez un sujet dans la catégorie Marketplace si vous souhaitez engager quelqu’un pour le faire à votre place.
C’est ce qu’ils utilisent, mais je n’arrive pas à le faire fonctionner.
Il y a de nombreux liens et éléments à modifier, tant dans le CSS que dans l’onglet En-tête. L’avez-vous fait ?
Voici le CSS personnalisé que FiveM utilise actuellement, et c’est ce que l’équipe d’administration m’a envoyé, mais je ne sais pas comment le faire fonctionner.
discourse-misc-html-css (2).zip (2,5 Ko)
Donc, je travaille là-dessus depuis un moment et ça marche à peu près.
Pic
Et franchement, ça fonctionne très bien.
Mais en haut, il duplique certaines catégories pour une raison inconnue.
Comment puis-je régler cela et éviter la duplication des catégories ?
Voici ma configuration :
discourse-misc-html-css.zip (2,5 Ko)
Donc maintenant, je l’ai au moins corrigé pour moi-même.
Tout d’abord, téléchargez ce fichier :
discourse-misc-html-css (2).zip (2,5 Ko)
Si vous n’êtes pas sûr de la façon d’ajouter ce fichier à votre site, consultez d’abord ce guide :
Ensuite, allez dans la section Misc/HTML+CSS commune, puis dans CSS, vous devrez ajuster certains paramètres.
Tout d’abord, vous devez copier cette ligne :
&.fivem > .category-list {
&:before {
content: 'FiveM';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Ensuite, modifiez le nom que vous souhaitez donner à votre bannière.
Dans mon exemple, j’utiliserai test1.
&.test1 > .category-list {
&:before {
content: 'test1';
}
background-image: url(https://i.imgur.com/1YZTip0.png);
}
Et vous avez terminé dans la section CSS.
Ensuite, allez dans la section .
Descendez jusqu’à :
<script type='text/x-handlebars' data-template-name='components/categories-with-featured-topics'>
Et trouvez la section nommée :
<div class="category-thing fivem">
Copiez ensuite :
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Et modifiez-le selon vos paramètres. Dans mon exemple, j’ai utilisé test1.
Je vais donc faire la même chose ici :
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Ensuite, descendez jusqu’à :
<script type='text/x-handlebars' data-template-name='mobile/components/categories-with-featured-topics'>
Et trouvez :
<div class="category-thing fivem">
{{categories-only categories=(filter-fivem categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Modifiez-le selon vos paramètres. Dans mon exemple, je vais remplacer fivem par test1.
<div class="category-thing test1">
{{categories-only categories=(filter-test1 categories)
latestTopicOnly=latestTopicOnly
showTopics=true}}
</div>
Ensuite, descendez encore plus bas et trouvez la section contenant ceci :
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Ici, vous devez ajouter le drapeau de catégorie que nous avons créé plus haut. La raison pour laquelle vous voulez l’ajouter est d’éviter les catégories en double, comme le problème que j’ai eu ici :
Je vais donc ajouter test1 pour mon exemple.
registerUnbound('filter-core', (categories) => {
return categories.filter(a => !a.slug.match(/^redm-/) && !a.name.match(/^test1/i) && !a.name.match(/^fivem/i) && !a.read_restricted);
});
Ensuite, descendez et trouvez la section nommée :
registerUnbound('filter-fivem', (categories) => {
return categories.filter(a => a.name.match(/^fivem/i));
});
Ici, vous devez remplacer fivem par ce que vous souhaitez. Dans mon exemple, je vais ajouter test1.
registerUnbound('filter-test1', (categories) => {
return categories.filter(a => a.name.match(/^test1/i));
});
Et vous avez terminé.
Maintenant, ce que vous devez faire, c’est modifier votre slug de catégorie. Voici mon exemple :
Ensuite, cette catégorie apparaîtra sous la bannière test1.
Toutes les autres catégories apparaîtront sous la bannière CFX.RE principale dans cet exemple.
Voici d’ailleurs mes paramètres que j’utilise actuellement sur mon site :
discourse-misc-html-css.zip (2,5 Ko)
Si vous voulez vérifier, voici le lien :
https://forum.tgacommunity.com/
D’ailleurs, pouvez-vous marquer ce sujet comme résolu ?
J’espère que cela vous a aidé. Si vous avez des questions, n’hésitez pas à me les poser ici ou en message privé.
Bonjour à tous. @manuel a créé un composant de thème qui étend ce code et permet aux gens de l’utiliser plus facilement sur leur propre forum.
Mais les deux méthodes fonctionnent et c’est à vous de choisir comment vous voulez le faire. Et les deux méthodes donnent le même résultat.