1. Dashboard
  2. Informationen
    1. CS2-SimpleAdmin Infos
    2. Woltlab Suite 6.2 Handbuch
  3. Bannliste
  4. Galerie
    1. Alben
  5. Artikel
  6. Teamspeak Viewer
    1. TeamSpeak Identitäten
  • Anmelden
  • Registrieren
  • Suche
scss (css)
  • Alles
  • scss (css)
  • Artikel
  • Seiten
  • Forum
  • Galerie
  • Erweiterte Suche
  1. Funarena
  2. Artikel
  3. scss (css)

Forenicons durch Grafiken ersetzen

  • ddbmaster
  • 13. Juni 2026 um 23:18
  • 185 Mal gelesen
  • 0 Kommentare
Erklärung:

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.
Sass (SCSS)
$board-icons: (
    1:	"/pfad/zum/bild.svg",
    2:	"/pfad/zum/bild.png",
    3:	"/pfad/zum/bild.jpg",
);

@mixin board-icon($icon) {
    .wbbBoardNode__defaultIcon,
    .wbbBoardNode__unreadIcon {
        fa-icon {
            display: none;
        }

        &::after {
            content: "";
            display: block;
            width: 32px;
            height: 32px;
            background-image: url("#{$icon}");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            margin-right: 7px;
            margin-top: 5px;
        }
    }
}

@each $board-id, $icon in $board-icons {
    [data-board-id="#{$board-id}"] {
        @include board-icon($icon);
    }
}
Alles anzeigen

Anpassung:

Nur die Map $board-icons muss gepflegt werden:

Code
$board-icons: (
    FORUM-ID: "/pfad/zum/bild.svg",
);

Nächster Artikel Farbliche Hervorhebung von angepinnten Themen und Ankündigungen innerhalb der Themenliste

Kategorien

  1. scss (css) 3
  2. Filter zurücksetzen
  1. Datenschutzerklärung
  2. Impressum