Easy How To: Individuelles Kategorie Icon

BuroN · Sep 8th 2020

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.

Edda1000 · Apr 11th 2021

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?

norse · Apr 11th 2021

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

Edda1000 · Apr 11th 2021

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?

norse · Apr 11th 2021

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

Edda1000 · Apr 11th 2021

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?

Edda1000 · Apr 11th 2021

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?

Edda1000 · Apr 12th 2021

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?

norse · Apr 12th 2021

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

Edda1000 · Apr 12th 2021

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.

norse · Apr 12th 2021

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

CSS

.wbbBoardList .wbbCategory[data-board-id="95"] h2 > a:before {
    content:url(https://a-b-community.de/icon/logo/bbd.jpg);
    position:relative; 
    top:21px;
}

.wbbBoardList .wbbCategory[data-board-id="95"] small {
    margin-left: 93px;
}

.wbbBoardList .wbbCategory[data-board-id="95"] header {
    padding-top: 0;
}

Display More

Gruß norse

norse · Apr 13th 2021

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:

CSS

/*Verschieben des Kategorietitels in Darstellung mit Aufklappfeil nach rechts, um Platz für die Grafik zu schaffen*/
.wbbBoardList .wbbCollapsibleCategory[data-board-id="95"] h2 > a {
    margin-left:82px;
}

/*Einbindung und Positionierung der Grafik als Hintergrundbild im umgebenden Listenelement mit Aufklappfeil*/
.wbbBoardList .wbbCollapsibleCategory[data-board-id="95"] {
    background-image:url(https://a-b-community.de/icon/logo/bbd.jpg);
    background-repeat:no-repeat;
    background-position: 22px 10px;
}

/*Verschieben der Kategoriebeschreibung in Darstellung mit Aufklappfeil nach rechts, um Platz für die Grafik zu schaffen*/
.wbbBoardList .wbbCollapsibleCategory[data-board-id="95"] small {
    margin-left:107px;
}

/*Verschieben des Kategorietitels in Darstellung ohne Aufklappfeil nach rechts, um Platz für die Grafik zu schaffen*/
.wbbBoardList .wbbCategory:not(.wbbCollapsibleCategory)[data-board-id="95"] h2 {
    margin-left:95px;
}

/*Einbindung und Positionierung der Grafik als Hintergrundbild im umgebenden Listenelement ohne Aufklappfeil*/
.wbbBoardList .wbbCategory:not(.wbbCollapsibleCategory)[data-board-id="95"] {
    background-image:url(https://a-b-community.de/icon/logo/bbd.jpg);
    background-repeat:no-repeat;
    background-position: 12px 10px;
}

/*Verschieben der Kategoriebeschreibung in Darstellung ohne Aufklappfeil nach rechts, um Platz für die Grafik zu schaffen*/
.wbbBoardList .wbbCategory:not(.wbbCollapsibleCategory)[data-board-id="95"] small {
    margin-left:95px;
}

/*Einbindung und Positionierung der Grafik als Hintergrundbild im umgebenden div*/
#tpl_wbb_board[data-board-id="95"] .contentHeaderTitle {
    background-image:url(https://a-b-community.de/icon/logo/bbd.jpg);
    background-repeat:no-repeat;
    background-position: 0px 0px;
    background-size: 50px;
}

/*Verschieben des Kategorietitels in der Kategorieansicht nach rechts, um Platz für die Grafik zu schaffen*/
#tpl_wbb_board[data-board-id="95"] h1.contentTitle {
    margin-left:55px;
}

Display More

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

feschtag · Apr 13th 2021

Servus!

norse

Auch wenn ich es nicht benötige, einmal mehr ein vielen Dank

für dein Engagement das du hier immer zu Tage legst!

Sascha

Edda1000 · Apr 13th 2021

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.

BuroN · Sep 8th 2021

Hier mein Aktueller Code der bei mir sehr gut Funktioniert.

Grüße

Code

/* -------------------------------------------- */
.wbbBoardContainer[data-board-id="IDNummer"] > .wbbBoard > .icon::before {
   background-image: url(../icon/DATEIPFAD);
    background-repeat:no-repeat;
   content: "";
   background-size: 54px;
   display: block;
   width: 64px;
   height: 64px;
    margin-left: 6px;
    margin-top: 25px;
}
@include screen-md-down {
.wbbBoardContainer[data-board-id="IDNummer"] > .wbbBoard > .icon::before {
   background-image: url(../icon/DATEIPFAD);
    background-repeat:no-repeat;
   content: "";
   background-size: 27px;
   display: block;
   width: 32px;
   height: 32px;
    margin-left: 3px;
    margin-top: 10px;
}
    }
#tpl_wbb_board[data-board-id="IDNummer"] .contentHeaderTitle {
    background-image:url(../icon/DATEIPFAD);
    background-repeat:no-repeat;
    background-position: 0px 0px;
    background-size: 50px;
    margin-left:10px;
}
#tpl_wbb_board[data-board-id="IDNummer"] h1.contentTitle {
    margin-left:50px;
}

Display More

BuroN · Feb 9th 2022

Update:

Code

/* Transparenter Logo Hintergrund */
.wbbBoardContainer[data-board-id="19"] > .wbbBoard >.icon {
    background: #0000;
}
/* für Desktop größen */
.wbbBoardContainer[data-board-id="19"] > .wbbBoard > .icon::before {
   background-image: url(../icon/XXX.svg);
   content: "";
   background-size: 64px;
   display: block;
   width: 64px;
   height: 64px;
   display: flex; 
   justify-content: center; 
   align-items: center;
}
/* für Mobile größen 32px */
@include screen-md-down {
    .wbbBoardContainer[data-board-id="19"] > .wbbBoard > .icon::before {
   background-image: url(../icon/XXX.svg);
   content: "";
   background-size: 32px;
   display: block;
   width: 32px;
   height: 32px;
   display: flex; 
   justify-content: center; 
   align-items: center;
}
    }
/* für mittlere größen */
@include screen-sm-up {
    .wbbBoardContainer[data-board-id="19"] > .wbbBoard > .icon::before {
    background-image: url(../icon/XXX.svg);
    background-repeat:no-repeat;
    content: "";
    background-size: 64px;
    display: block;
    width:64px;
    height: 64px;
    display: flex; 
    justify-content: center; 
    align-items: center;
}
    }
/* Im Forum vor der Beschreibung */
#tpl_wbb_board[data-board-id="19"] .contentHeaderTitle {
    background-image:url(../icon/XXX.svg);
    background-repeat:no-repeat;
    background-position: 0px 0px;
    background-size: 50px;
    margin-left:10px;
}
#tpl_wbb_board[data-board-id="19"] h1.contentTitle {
    margin-left:50px;
}

Display More

Easy How To: Individuelles Kategorie Icon

Participate now!

Share

Tags