WCF2: Eigenes Icon pro Forum setzen

  • WBB 4

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Eine Funktion, ein eigenes Icon bzw. eine eigene Grafik statt der Standard-Icons für ein einzelnes Forum anzugeben, wie unter Burning Board 3, gibt es in Burning Board 4 nun nicht mehr. Zumindest ist sie nicht mehr im ACP in der Forenverwaltung vorhanden.


Stattdessen muss man solche Änderungen nun per CSS machen. Das ist jedoch relativ einfach, ein Beispielcode sieht folgendermaßen aus:

CSS-Quellcode

  1. .wbbBoardContainer[data-board-id="X"] > .wbbBoard > .icon::before {
  2. background-image: url("../icon/boardM.png");
  3. content: "";
  4. display: block;
  5. height: 24px;
  6. width: 24px;
  7. }
Hierbei wird das normale Icon überschrieben, das per .icon-folder-close-alt::before normalerweise angegeben ist.
Wie auch schon unter Burning Board 3 hat jedes Forum seine eigene ID. Das wird durch das Attribut data-board-id im Quelltext angezeigt. Leider gibt es keine Anzeige mehr dafür im Forum bzw. ACP selbst. Statt des X muss dann die ID des Forums angegeben werden, bei welchem man das Icon ändern möchte.

In Zeile 2 gibt man dann die URL zur neuen Grafik an. Diese kann relativ zum Pfad der Stil-CSS-Datei sein oder auch eine absolute Adresse.
Zeile 3 entfernt das normal vorhandene Icon.
Zeile 4 ändert den Anzeigemodus des Bereichs, damit die Zeilen 5 und 6 überhaupt beachtet werden und Breite sowie Höhe korrekt übernommen werden.

Der oben genannte Code ist für normale Foren, für Unterforen müsste der Code folgendermaßen aussehen:

CSS-Quellcode

  1. .wbbSubBoards > li[data-board-id="X"] > .icon::before {
  2. background-image: url("../icon/boardM.png");
  3. content: "";
  4. display: block;
  5. height: 16px;
  6. width: 16px;
  7. }
Auch hier gelten wieder dieselben Regeln.

Zu beachten ist, egal bei welchem Code, dass die Grafik bereits ihre korrekten Maße haben muss. Die Angaben von height und width geben lediglich den Anzeigebereich an. Größere Grafiken werden einfach abgeschnitten.

Bei Fragen stehe ich hier oder im Forum jederzeit gerne zur Verfügung!
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

3.239 mal gelesen

Kommentare 14

  • Black Rider -

    Hallo,

    bitte schreibe dazu ein Thema im Forum.

  • Stefan Herler -

    Hi Vielen Dank für diesen Artikel der hat mir sehr weiter geholfen :D

    Aber eine frage hätte ich da noch wie kann ich dem Forenbereich dort wo man den Normalen Forenbereich einklappen kann ein icon hinzufügen ?

    Lg Stefan

  • Black Rider -

    Schau mal oben in die genannte Datei. Dort steht explizit DO NOT EDIT, zu Deutsch: NICHT BEARBEITEN.

    Du musst die Änderungen im Design im ACP hinzufügen.

  • damien -

    Ich habe das Problem, das trotz Auswahl des neuen Icons (was auch funktioniert) nach gewisser zeit das alte icon wieder kommt. Woran liegt das?

    WBB4.0 - habe die style-4.css editiert.

  • Black Rider -

    Das ginge hiermit:
    .wbbBoardList .wbbSubBoards li.new > span.icon::before {

  • Freddy2015 -

    Also nun zerbreche ich mir echt den Kopf...

    Wie sieht der Code bei den Unterordnern aus, wenn es in denen neue Beiträge / Themen gibt ???

  • Khorgoroth -

    Danke^^

  • Black Rider -

    CSS ist auch kein Ratespiel. :P

    Damit geht es:
    .wbbBoardContainer > .wbbBoard > .icon-lock::before {

  • Khorgoroth -

    Gibt es auch eine Möglichkeit, geschlossene Foren anzusprechen? Habe intuitiv folgende Möglichkeiten versucht:
    .wbbBoardContainer > .wbbBoard.close > .icon::before {
    .wbbBoardContainer > .wbbBoard.closed > .icon::before {
    .wbbBoardContainer > .wbbBoard.lock > .icon::before {
    .wbbBoardContainer > .wbbBoard.locked > .icon::before {
    versucht, klappt aber leider nicht :(

  • Black Rider -

    Lass einfach das [data-board-id="X"] weg. ;)

  • Freddy2015 -

    Danke.
    Gibt es auch einen Code welcher für alle Foren wirksam ist ? Oder muss man pro Forum ein Code machen.

  • Black Rider -

    Zeile 1 müsstest du dann dadurch ersetzen:
    .wbbBoardContainer[data-board-id="X"] > .wbbBoard.new > .icon::before {

  • Freddy2015 -

    Wie siehts mit Code aus, welcher für die Ordner eingesetzt wird, wo es neue Themen / Beiträge gibt ?

  • Miraculix -

    Ein toller und informativer Artikel :)