Easy How To: Individuelles Kategorie Icon

  • Affected Version
    WoltLab Suite 5.2
    • Am besten eine .SVG
    • Datei einen eigenen Ordner für die Logos anlegen. mein Pfad: ../icon/logo/LOGO.svg
    • Code kommt in Stilunabhängiges Css und Scss
    • Wie ich meine data-board-id rausbekomme? z.B Google Chrome -> Rechtsklick( aufs Logo -> Untersuchen -> paar Zeilen weiter oben steht nun: <li data-board-id="50" ....... -> 50


    Folgendes Anpassen:

    Code: Kategorie Nummer
    [data-board-id="50"]
    Code: Dateipfad
    url(../icon/logo/logo.svg)
    Code: Optional
    width: 32px;   height: 32px;    margin-left: 1px;    margin-top: 1px;


    CSS: Stielunabhängiges Css und Scss
     .wbbBoardContainer[data-board-id="50"] > .wbbBoard > .icon::before {
       background-image: url(../icon/logo/logo.svg);
       content: "";
       background-size: 32px;
       display: block;
       width: 32px;
       height: 32px;
        margin-left: 1px;
        margin-top: 1px;
    }

    Jede Verbesserung oder Zusätze werden mit eingefügt.

    Ich wollte es Simple halten.

  • Hi,

    bei mir funktioniert das nicht.

    Ich habe diesen Code eingefügt:

    Code
    .wbbBoardContainer[data-board-id="86"] > .wbbBoard > .icon::before {
       background-image: url(../icon/logo/bdsad.svg);
       content: "";
       background-size: 32px;
       display: block;
       width: 32px;
       height: 32px;
        margin-left: 1px;
        margin-top: 1px;
    }

    Das Logo sollte auf meiner Seite:

    https://a-b-community.de/forum/

    ziemlich weit unten bei der Kategorie "Geschlossenen Gruppe 1" erscheinen. Das sollte doch eigentlich die Board-ID 86 sein, oder? Was mache ich da falsch?

  • Wenn ich mir das so anschaue, wird an dieser Stelle überhaupt kein Icon angezeigt, das Du mit dem genutzten Code überschreiben könntest.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Mhhh, habe ich da was falsch verstanden?

    Ich dachte das der Code vor der Bezeichnung der entsprechenden Kategorie ein Icon erscheinen lässt. Das will ich ja auch damit erreichen. Wieso überschreiben?

  • Nimm mal den von Dir gezeigten Code und verwende anstatt der boardID 86 die 36, dann siehst Du etwas weiter oben was der Code macht: Er tauscht das vorhandene Icon gegen die angegebene Grafik aus. Dort wo Du es versuchst, gibt es weder ein Icon noch die im Selektor verwendete Struktur, so dass der Code für das Forum mit der ID 86 nichts bewirken kann.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Ahhhhh, ich sehe es.

    Gibt es denn eine Möglichkeit, dass das Logo vor der Bezeichnung der ID 86 erscheint, also bei der Kategorie, sprich wie muss da der Code aussehen?

  • Also ich kriege es nicht hin.

    Was ich bis jetzt über CSS erreicht habe ist dass die Zeile wo der Titel der Kategorie steht, rot erscheint. Aber ich kriege es nicht hin, das Bild vor dem Titel zu kriegen.

    Hier der Code für die rote Zeile:

    Code
    .wbbBoardList > li.wbbCategory[data-board-id="86"] > header > h2{
        background-color: red;
    }

    Kurze Ergänzung:

    Habe gerade über die Forumssuche noch ein Beitrag gefunden. Da steht:

    Quote

    solls direkt in der Kategorie also im Kategorienamen oben sein, kannst du dies in einer eigenen Sprachvariable einbinden, einfach eine neue per xml-datei erstellen und dann den sprachvariablen-namen, statt den Kategorietext einfügen :)

    Damit ist auch das Bild gemeint. Falls das die Lösung ist, wie erstelle ich die Datei? Das habe ich noch nie gemacht und ich verstehe es nicht. Kann ich die neue xml-Datei über das ACP erstellen und wie muss der Inhalt aussehen und wie wird sie dann zur eigenen Sprachvariable?

    Edited once, last by Edda1000 (April 11, 2021 at 10:44 PM).

  • Ich habe mich für eine andere Variante entschieden. Ich habe das Logo in die Beschreibung der Kategorie verlagert und dort "HTML in der Beschreibung" aktiviert.

    Der Code sieht dort beispielsweise so aus:

    Code
    <img src="../icon/logo/bdsad.jpg" alt="Logo BdSAD" width="94" height="48" /> Geschlossene Gruppe. Nur für Mitglieder der BdSAD. Zum Gruppenbeitritt bitte <a href="/index.php?user-group-list/"><strong>"hier"</strong></a> klicken!

    Das Problem was ich jetzt habe ist die Ansicht auf dem Smartphone. Dort beginnt die Textzeile rechts neben dem Logo, wird aber dann, da sie etwas länger ist unter dem Logo fortgesetzt. Mit float: left; habe ich das versucht zu ändern, also so sieht der Code aus:

    Code
    <img style="float: left;" src="../icon/logo/bbd.jpg" alt="Logo BBD" width="94" height="48"/>Geschlossene Gruppe. Nur für Mitglieder des BBD . Zum Gruppenbeitritt bitte <a href="/index.php?user-group-list/"><strong>"hier"</strong></a> klicken!

    Damit sieht es in der Smartphoneansicht korrekt aus, aber die PC Ansicht hat es zerschossen. Hier der Screenshot dazu:

    Anschauen kann man sich es nach wie vor unter: https://a-b-community.de/forum/, wobei dort nur die Kategorie mit dem Logo und der feinen Linie zu sehen ist. Das Forum was dann da drunter versetzt erscheint und in der das Logo rein drückt, ist nicht zu sehen, da es ja eine geschlossene Gruppe ist.

    Was ist am Code falsch?

    Edited 2 times, last by Edda1000 (April 12, 2021 at 12:41 PM).

  • Versuch es doch einfach mal damit, das Forum mit der ID 86 nicht als Kategorie, sondern als Forum zu konfigurieren. Das würde die Sache enorm erleichtern, da dann der ursprünglich ineffektive Code mit etwas abgewandelter Positionierung auch greifen würde.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Gefällt mir ehrlich gesagt nicht so richtig. Habe dazu gerade mal das Forum "Test" mit Unterforen angelegt. OK. da kriege ich den ursprünglichen Code eingebaut. Sieht zwar noch sehr befremdlich aus, aber das Logo ist da. Leider läßt sich aber beim Forum "Test" nicht wie bei einer Kategorie alle Foren, nicht deren Unterforen einklappen.

    Zudem. Klicke ich auf "Test" gelange ich auf eine neue Seite bei der bei "Test" kein Logo mehr ist und es sogar möglich ist in "Test" ein Thema zu erstellen.

    Also, da wäre mir die Lösung über die Kategorie mehr als lieb.

  • Letzter Versuch, dann gebe ich auf, es Dir recht zu machen:


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Nachdem in diesem Thema nun deutlich wurde, dass der Code im Startbeitrag definitiv nicht funktionieren kann, da es innerhalb von Kategorien weder die Klasse .wbbBoard noch .icon gibt, habe ich mir eine etwas andere Herangehensweise überlegt.

    Die Vorgaben von Edda1000 sahen so aus:

    • Es sollte zwingend eine Kategorie verwendet werden
    • Die Kategorie beinhaltet Foren, die nur für Mitglieder einer geschlossenen Gruppe sichtbar sind
    • Angesichts dieser Umstände wird die Kategorie je nach Betrachter mit oder ohne Pfeil zum Aufklappen angezeigt
    • Vor dem Kategorietitel soll sowohl in der Forenübersicht als auch in der geöffneten Kategorie selbst eine Grafik angezeigt werden

    Ich habe das wie folgt umgesetzt:

    Das Resultat kann unter https://a-b-community.de/forum/ in Augenschein genommen werden. Für nicht berechtigte Betrachter ist die Ansicht der Kategorie mit Pfeil und das Öffnen der Kategorie natürlich nicht zugänglich.

    Hier die Bilder dazu:


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Und ich sage da natürlich auch noch einmal tausend Mal "Danke".

    Ich habe das genau so benötigt und ich hoffe, dass es dem Einen oder Anderen noch in der Zukunft helfen wird.

    Muss da leider gleich ein Verzeichnisschutz einbauen, damit meine "Überraschung" nicht so früh auffällt. Wird aber in ein oder zwei Wochen wieder entfernt. Dann kann da jeder sich die Sache "live" anschauen.

    Edited once, last by Edda1000 (April 13, 2021 at 11:07 PM).

  • Hier mein Aktueller Code der bei mir sehr gut Funktioniert.


    Grüße

  • Update:

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!