Eigenes Icon pro Forum im Woltlab Burning Board 4 (WBB4) setzen

Wer in den Einstellungen vom WBB4 sucht, findet leider keine Möglichkeit pro Forum ein eigenes Icon zu setzen. Wir wollten das für unseren internen Bereich zur Aufgabenverteilung haben, denn dort hat jeder aus dem Team seinen eigenen Bereich – dazu gehört natürlich auch sein Gesicht. Eventuell habt ihr so etwas ähnliches, oder wollt aus einem anderen Grund einem Forum ein eigenes Icon zuweisen. Das ist mit ein wenig CSS kein Problem.

Das Icon eines Forums ohne neue Beiträge ändern

Es gibt für Hauptforen und Unterforen unterschiedlichen CSS-Code. In dem jeweiligen Code muss zum einen die Board-ID und zum anderen der Bild-Link angepasst werden.

Die Board-ID ist mit einem „X“ in dem Code vermerkt. Ihr findet diese im Link des jeweiligen Boards.

Beispiel: https://basic-tutorials.de/forum/board/4-allgemeine-informationen/ > Die Board-ID ist 4.

Den Link zu eurem Bild könnt ihr einfach angeben, bitte beachtet dabei jedoch die Größenangaben, ansonsten wird das Bild nicht korrekt angezeigt.

Hauptforum

.wbbBoardContainer[data-board-id="X"] > .wbbBoard > .icon::before {
	background-image: url("http://der-link-zu-eurem-bild.euer-bild.jpg");
	content: "";
	display: block;
	height: 32px;
	width: 32px;
}

Unterforum

.wbbSubBoards > li[data-board-id="X"] > .icon::before {
	background-image: url("http://der-link-zu-eurem-bild.euer-bild.jpg");
	content: "";
	display: block;
	height: 16px;
	width: 16px;
}

Das Icon eines Forums mit neuen Beiträgen ändern

Auch hier gibt es unterschiedlichen CSS-Code für Haupt- und Unterforen. Das Prinzip ist das gleiche wie oben, allerdings musst du darauf achten, dass der CSS-Code für die Foren mit neuen Beiträge sich unterhalb (!) des Codes für die Foren ohne neue Beiträge befindet. Ansonsten funktioniert dieser nicht.

Hauptforum

.wbbBoardContainer[data-board-id="X"] > .wbbBoard > .icon-folder-close::before {
	background-image: url("http://der-link-zu-eurem-bild.euer-bild.jpg");
	content: "";
	display: block;
	height: 32px;
	width: 32px;
}

Unterforum

.wbbSubBoards > li[data-board-id="X"] > .icon-folder-close::before {
	background-image: url("http://der-link-zu-eurem-bild.euer-bild.jpg");
	content: "";
	display: block;
	height: 16px;
	width: 16px;
}

Wo muss der CSS-Code angegeben werden?

1. Logge dich in dein WBB4 Forum ein und wechsel in den Administrationsbereich
2. Klicke auf Darstellung und dann auf Stile
3. Wähle den Stil aus, den du anpassen möchtest
4. Klicke auf den Reiter „Erweiterte Einstellungen“
5. Unter individuelles CSS und LESS kannst du den CSS-Code angeben der deine Icons ändert
6. Klicke auf „Absenden“ um zu speichern

Falls ihr noch Fragen oder Anmerkungen habt, ab in die Kommentare damit! Wir freuen uns über jeden einzelnen Kommentar.