Gracias @erlend_sh, ¡buena captura! No había visto este tema todavía. Sí, el año pasado dedicamos algo de tiempo exactamente a esto, intentando lograr algo cercano a los encabezados al estilo de Flarum. Así es como se ve en nuestro sitio:
Y aquí está la esencia del HTML / CSS que desarrollamos para esto:
CSS:
(Todo esto está en “común”: además de esto, también hay algunos ajustes menores de margen / relleno para escritorio vs. móvil que no incluí a continuación.)
/* GENERAL */
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 LAS CATEGORÍAS */
.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 EJECUCIÓN */
.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;}
/* ¡Repetir para todas las demás categorías! */
HTML (en la sección “Después del encabezado”):
<!-- TODAS LAS CATEGORÍAS -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>Todas las categorías</h1></a>
<p>¡Bienvenido al foro de Cracking the Code!</p>
</div>
<!-- TÉCNICA DE EJECUCIÓN -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>Técnica de ejecución</h1></a>
<p>Pickslanting, agrupación, digitación, mecánica del movimiento: haz aquí tus preguntas técnicas.</p>
</div>
<!-- ¡Repetir para todas las demás categorías! -->
Esto es bastante pulido visualmente… pero también muy personalizado / hacky con muchas ediciones manuales repetitivas. Suficientemente fácil para nuestras ~docena de categorías, pero para mayor flexibilidad, podría ver esto como un complemento simple que:
- capture e inserte automáticamente las descripciones de las categorías
- maneje automáticamente los cálculos de color (los nuestros son similares a los colores de las categorías, pero hicimos manualmente el color de fondo del encabezado un poco más oscuro y el color del texto del “pastilla” h1 un poco más claro para un mejor contraste / legibilidad).
No tengo experiencia creando complementos. Pero por ahora, un componente de tema que combine lo que @lll y yo hemos desarrollado suena como un buen siguiente paso.