Obrigado @erlend_sh, ótima observação! Ainda não tinha visto este tópico. Sim, passamos algum tempo no ano passado exatamente com isso, tentando chegar a algo próximo dos cabeçalhos no estilo Flarum. É assim que fica no nosso site:
E aqui está o resumo do HTML / CSS que desenvolvemos para isso—
CSS:
(Isso está tudo em “common” — além disso, há também alguns pequenos ajustes de margem/padding para desktop vs. mobile que não incluí abaixo.)
/* GERAL */
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;
}
/* TODAS AS CATEGORIAS */
.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;}
/* TÉCNICA DE EXECUÇÃO */
.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;}
/* repita para todas as outras categorias! */
HTML (na seção “Após o Cabeçalho”):
<!-- TODAS AS CATEGORIAS -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>Todas as Categorias</h1></a>
<p>Bem-vindo ao Fórum Cracking the Code!</p>
</div>
<!-- TÉCNICA DE EXECUÇÃO -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>Técnica de Execução</h1></a>
<p>Pickslanting, chunking, fretting, mecânica de movimento — faça suas perguntas técnicas aqui.</p>
</div>
<!-- repita para todas as outras categorias! -->
Isso está visualmente muito polido… mas também muito personalizado / hacky, com muitas edições manuais repetitivas. Fácil o suficiente para nossas ~dezenas de categorias, mas para maior flexibilidade, vejo isso como algo legal como um plugin simples que:
- pegaria e inseriria automaticamente as descrições das categorias
- lidaria automaticamente com os cálculos de cores (as nossas são semelhantes às cores das categorias, mas fizemos manualmente a cor de fundo do cabeçalho um pouco mais escura e a cor do texto do “pílula” h1 um pouco mais clara para melhor contraste/legibilidade).
Não tenho experiência em criar plugins. Mas por enquanto, um componente de tema combinando o que @lll e eu desenvolvemos parece ser um bom próximo passo!