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 ?
2 « J'aime »
Have a look at Category Banners. It is a theme component that you can install on your site to add a banner to your categories. The “Additional CSS styling” section at the bottom of the topic gives details about how to set a background image for the banner.
3 « J'aime »
From the looks of it it seems like thats a banner for the category, i need one that shows the section, to explain myself better…
https://forum.fivem.net/categories
thats what i want
This will require some custom work. Have a look at the theme guide if you want to do it yourself or create a topic in the marketplace category if you want to hire someone to do it for you.
2 « J'aime »
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 ?
1 « J'aime »
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é.
4 « J'aime »
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.
1 « J'aime »