Danke @erlend_sh, guter Fang! Ich habe dieses Thema noch nicht gesehen. Ja, wir haben letztes Jahr genau das gleiche Thema bearbeitet, um etwas zu erreichen, das den Flarum-ähnlichen Kopfzeilen nahekommt. So sieht es auf unserer Seite aus:
Und hier ist der Kern des HTML/CSS, das wir dafür entwickelt haben:
CSS:
(Alles befindet sich in „common" – abgesehen davon gibt es noch einige kleinere Anpassungen für Margins und Padding zwischen Desktop und Mobile, die ich unten nicht aufgeführt habe.)
/* ALLGEMEIN */
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;
}
/* ALLE KATEGORIEN */
.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;}
/* SPIELTECHNIK */
.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;}
/* Für alle anderen Kategorien wiederholen! */
HTML (im Abschnitt „Nach Kopfzeile"):
<!-- ALLE KATEGORIEN -->
<div class="custom-cat-header custom-cat-header-all-categories">
<a href="https://forum.troygrady.com/"><h1>Alle Kategorien</h1></a>
<p>Willkommen im Cracking the Code Forum!</p>
</div>
<!-- SPIELTECHNIK -->
<div class="custom-cat-header custom-cat-header-playing-technique">
<a href="https://forum.troygrady.com/c/playing-technique"><h1>Spieltechnik</h1></a>
<p>Pickslanting, Chunking, Greifen, Bewegungsmechanik – stellen Sie hier Ihre technischen Fragen.</p>
</div>
<!-- Für alle anderen Kategorien wiederholen! -->
Das sieht optisch ziemlich poliert aus, ist aber auch sehr maßgeschneidert / „hacky" mit vielen repetitiven manuellen Änderungen. Für unsere rund ein Dutzend Kategorien ist das leicht zu handhaben, aber für mehr Flexibilität könnte ich mir vorstellen, dass dies als einfaches Plugin cool wäre, das:
- automatisch die Kategoriebeschreibungen abruft und einfügt
- automatisch Farbberechnungen übernimmt (unsere sind den Kategorielfarben ähnlich, aber wir haben die Hintergrundfarbe der Kopfzeile manuell etwas dunkler und die Textfarbe der h1 „Pille" etwas heller gemacht, um einen besseren Kontrast / eine bessere Lesbarkeit zu erzielen).
Ich habe keine Erfahrung mit der Erstellung von Plugins. Aber für den Moment klingt ein Theme-Komponente, die das kombiniert, was @lll und ich entwickelt haben, wie ein guter nächster Schritt!