Merci @erlend_sh, excellente remarque ! Je n’avais pas encore vu ce sujet. Oui, nous avons consacré du temps l’année dernière exactement à cela, en essayant d’obtenir quelque chose de proche des en-têtes de style Flarum. Voici à quoi cela ressemble sur notre site :
Voici l’essentiel du HTML / CSS que nous avons élaboré pour cela —
CSS :
(Ceci est tout dans « common » — outre cela, il y a aussi quelques ajustements mineurs de marge / padding pour le bureau par rapport au mobile que je n’ai pas inclus ci-dessous.)
/* GÉNÉRAL */
body {
overflow-x: hidden;
}
.custom-cat-header {
display: block;
margin-left: -9999px!important;
padding-left: 9999px!important;
margin-right: -9999px!important;
padding-right: 9999px!important;
text-align: center;
margin-top: -18px;
}
.custom-cat-header p {
color: #dddddd;
}
.custom-cat-header h1 {
display: inline-block;
margin-top: 20px;
color: #dddddd;
background-color: #222222;
border-radius: 5px;
width: inherit;
}
/* TOUTES LES CATÉGORIES */
.custom-cat-header-all-categories {display: none;}
body.navigation-categories .custom-cat-header-all-categories, body.navigation-topics .custom-cat-header-all-categories {
display: block;
background-color: #b1880b;
}
.custom-cat-header-all-categories h1 {color: #d4a411;}
/* TECHNIQUE DE JEU */
.custom-cat-header-playing-technique {display: none;}
body.category-playing-technique .custom-cat-header-playing-technique {
display: block;
background-color: #9c2116;
}
.custom-cat-header-playing-technique h1 {color: #d62e1f;}
body.category-playing-technique .custom-cat-header-all-categories {display: none;}
/* répétez pour toutes les autres catégories ! */
HTML (dans la section « Après l’en-tête ») :
<!-- TOUTES LES CATÉGORIES -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>Toutes les catégories</h1></a>
<p>Bienvenue sur le forum Cracking the Code !</p>
</div>
<!-- TECHNIQUE DE JEU -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>Technique de jeu</h1></a>
<p>Pickslanting, groupement, fretting, mécanique du mouvement — posez vos questions techniques ici.</p>
</div>
<!-- répétez pour toutes les autres catégories ! -->
C’est visuellement assez abouti… mais aussi très personnalisé / bricolé avec beaucoup d’éditions manuelles répétitives. Assez facile pour nos ~douzaines de catégories, mais pour une plus grande flexibilité, je pourrais voir cela comme un plugin simple qui :
- récupérerait et insérerait automatiquement les descriptions des catégories
- gérerait automatiquement les calculs de couleur (les nôtres sont similaires aux couleurs des catégories, mais nous avons manuellement rendu la couleur d’arrière-plan de l’en-tête un peu plus foncée et la couleur du texte « pilule » h1 un peu plus claire pour un meilleur contraste / lisibilité).
Je n’ai aucune expérience dans la création de plugins. Mais pour l’instant, un composant de thème combinant ce que @lll et moi avons élaboré semble être une bonne prochaine étape !