Ankündigungen und angepinnte Themen werden jeweils als Gruppe am Anfang der Themenliste angezeigt. Mit dem folgenden CSS lässt sich das Ende jeder Gruppe visuell hervorheben, z. B. mit einem farbigen Trennstrich.
CSS kennt kein :last-of-class. Das letzte Element einer bestimmten Klasse lässt sich daher nicht direkt ansprechen. Es gibt aber einen Workaround.
Idee
Anstatt das letzte Element direkt zu wählen, wählt man alle Elemente der Gruppe und schließt dann alle aus, auf die noch ein weiteres folgt. Übrig bleibt genau das letzte.
1. Die Liste ($board-icons) Hier wird definiert, welches Forum welches Bild erhält:
Linke Seite = Forum-ID (zu finden im WoltLab ACP)
Rechte Seite = URL zum Bild
2. Das Mixin (@mixin board-icon) Eine wiederverwendbare Vorlage, die:
Das Original-Icon ausblendet (display: none)
Das neue Bild per CSS-Pseudo-Element (::after) einfügt
3. Die Schleife (@each) Iteriert automatisch über alle Listeneinträge und wendet die Vorlage auf jedes Forum an. Somit ist kein redundanter Code pro Forum nötig.
