Grazie @erlend_sh, ottima osservazione! Non avevo ancora visto questo argomento. Sì, lo scorso anno abbiamo dedicato del tempo esattamente a questo, cercando di ottenere qualcosa di simile alle intestazioni in stile Flarum. Ecco come appare sul nostro sito:
Ecco l’essenza del codice HTML / CSS che abbiamo sviluppato per questo:
CSS:
(Tutto questo è incluso in “common” — oltre a questo ci sono anche alcune piccole modifiche ai margini e al padding per desktop vs. mobile che non ho incluso qui sotto.)
/* GENERALE */
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;
}
/* TUTTE LE CATEGORIE */
.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;}
/* TECNICA DI ESECUZIONE */
.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;}
/* ripeti per tutte le altre categorie! */
HTML (nella sezione “Dopo l’intestazione”):
<!-- TUTTE LE CATEGORIE -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>Tutte le Categorie</h1></a>
<p>Benvenuti nel Forum Cracking the Code!</p>
</div>
<!-- TECNICA DI ESECUZIONE -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>Tecnica di Esecuzione</h1></a>
<p>Pickslanting, chunking, fretting, meccanica del movimento — fai qui le tue domande tecniche.</p>
</div>
<!-- ripeti per tutte le altre categorie! -->
È piuttosto visivamente curato… ma anche molto personalizzato / artigianale, con molte modifiche manuali ripetitive. È abbastanza semplice per le nostre ~dozzine di categorie, ma per una maggiore flessibilità potrei vedere questa idea diventare un semplice plugin che:
- recuperi e inserisca automaticamente le descrizioni delle categorie
- gestisca automaticamente i calcoli dei colori (i nostri sono simili ai colori delle categorie, ma abbiamo modificato manualmente il colore di sfondo dell’intestazione rendendolo un po’ più scuro e il colore del testo “pillola” dell’h1 un po’ più chiaro per un migliore contrasto e leggibilità).
Non ho esperienza nella creazione di plugin. Ma per ora, un componente del tema che combini quanto ideato da @lll e me sembra un buon prossimo passo!