• Anmelden oder registrieren
  • Suche
  1. News
  2. Forum
    1. Unerledigte Themen
  3. Shop
  4. Service
    1. Hosting
    2. Ticketsystem
    3. Referenzen
    4. Woltlab - Demo Seite
    5. Häufig gestellte Fragen [FAQ]
  5. Mein Konto
    1. Bestellungen
    2. Lizenzen
    3. Downloads
    4. Abonnements
    5. Vertrag kündigen
    6. Paketserver
  6. Wiki
    1. WSC Toolbox
    2. Hosting FAQ
Alles
  • Alles
  • Artikel
  • Forum
  • Produkte
  • Seiten
  • Einträge
  • Einträge
  • Toolbox Einträge
  • Erweiterte Suche
  1. GrischaMedia.ch
  2. WSC Toolbox
  3. CSS
Mittwoch: 10 Juni 2026 |

Forenicons durch Grafiken ersetzen

  • Aze
  • 10. Juni 2026 um 17:48
  • WSC 6.2
CSS
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:

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


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.

  • Icon
  • SCSS
  • Forenicons
  • Grafiken

Richtlinien WSC CSS Toolbox

Die WSC CSS Toolbox lebt vom Community-Gedanken. Um eine schnelle Freischaltung zu gewährleisten und Urheberrechte zu wahren, beachten wir ein faires Miteinander: Kopiere keine Inhalte ungefragt aus dem WoltLab-Forum. Eingereichte Snippets müssen entweder von dir selbst stammen oder mit dem Einverständnis des Autors geteilt werden (am besten trägt der Ersteller sein Snippet selbst ein). Allgemeine Standard-Snippets sind davon ausgenommen und dürfen frei eingepflegt werden.

Titelbild: Nutze ein aussagekräftiges Bild, das das Ergebnis deines CSS-Snippets direkt zeigt. Zusätzliche Detailbilder kannst du als Dateianhang in der Beschreibung hinterlegen.

Kurzbeschreibung: Formuliere einen kurzen, zielführenden Satz, der die Funktion des Snippets exakt auf den Punkt bringt.

CSS-Code: Füge den vollständigen und sauber formatierten CSS-Code direkt in das dafür vorgesehene Code-Feld ein.

Beschreibung: Erkläre präzise, was das Snippet bewirkt, welche Elemente beeinflusst werden und welche Werte (z. B. Farben oder Abstände) individuell anpassbar sind.

WSC-Version: Ordne deinen Eintrag zwingend über die Label-Auswahl der passenden WoltLab Suite Version zu, damit das Snippet leicht gefunden wird.

GrischaMedia.ch

GrischaMedia

  • Impressum
  • Kontakt
  • Referenzen
  • FAQ

Rechtliches

  • Datenschutzerklärung
  • Cookie Richtlinien
  • Nutzungsbedingungen
  • Vertrag Kündigen
  • Lizenzen
  • AGB

Hosting

  • Webhosting
  • Mailhosting
  • Cloud Hosting
  • Service Pakete
  • Leistungsübersicht

Partner

  • Geyer.swiss
  • MountainBock.ch
  • Grischabock.ch
  • PixelHafen.eu

WoltLab

  • WoltLab.com
  • Plugin-Store
  • Pluginstore Freischaltung
  • GrischaMedia Paketserver
  • Handbuch
  • WSC Toolbox

Über uns

Wir unterstützen hochwertige Softwareprojekte von WoltLab-Suite-Betreibern zu fairen Preisen. Unser Ziel ist eine professionelle, einzigartige und kosteneffiziente Umsetzung.

© 2026 GrischaMedia.ch – Alle Rechte vorbehalten.