Wie kann ich dem <li> List-Style ein eigenes Bild zuweisen?

Shopware 5 Themes & Design
1

Hallo Fachwelt, kann ich in SW5 dem

  • List Style ein eigenes Bild zuweisen? Ich hätte gerne statt dem “disc” ein Haken (eigenes Image) der Auflistung vorangestellt. Danke im Voraus. Grüße Michael
2

Welche Auflistung, wo ? Generell geht das natürlich, klar. Mit einer eigenen CSS Klasse und deinem Image, oder einem entsprechenden Icon von den Shopware Fonts, oder Fontawesome oder oder oder :slight_smile:

3

In der Artikeldetail-Beschreibung im Editor. Gibt es dafür ein eigenes Shopware Fond Icon als Haken? Danke

4

[quote=“Tanny”]In der Artikeldetail-Beschreibung im Editor. Gibt es dafür ein eigenes Shopware Fond Icon als Haken? Danke[/quote] Im Editor selbst wird es etwas schwierig, da der Editor fonts raus löscht bzw. eben die oder Tags. Schau mal hier ist die Shopware Font: https://s3.eu-central-1.amazonaws.com/s … index.html

5

Danke! Na das “icon–check” wäre doch genau das richtige. Nur bekommt man das anstatt z.B. “disc” in die Artikelbeschreibung?

6

[quote=“Tanny”]Danke! Na das “icon–check” wäre doch genau das richtige. Nur bekommt man das anstatt z.B. “disc” in die Artikelbeschreibung?[/quote] Kommt die gesamte Artikel Beschreibung aus dem Text Editor? Falls ja müsstest du diesen anpassen, sodass er hier die entsprechenden Elemente nicht raus löscht. Ist ein wenig tricky. Oder geht es um die Artikel properties ? (Mir fällt gerade nicht das deutsche Wort dafür ein). Also um diese zusätzliche Artikel Details, welche in einer Liste aufgeführt werden.

7

[quote=„kayyy“]Kommt die gesamte Artikel Beschreibung aus dem Text Editor? Falls ja müsstest du diesen anpassen, sodass er hier die entsprechenden Elemente nicht raus löscht. Ist ein wenig tricky.[/quote] Ja, kommt aus dem Editor. (Woher auch sonst? Gibt es noch eine Möglichkeit Beschreibung einzufügen?) [quote=„kayyy“]Oder geht es um die Artikel properties ? (Mir fällt gerade nicht das deutsche Wort dafür ein). Also um diese zusätzliche Artikel Details, welche in einer Liste aufgeführt werden.[/quote] Du meinst die Artikel-Eigenschaften :slight_smile: Nein es geht nur um in der Artikelbeschreibung statt z.B. „disc“ oder „circle“ einen Haken zu haben bei einer Auflistung… In einem anderen Shop (nicht Shopware) konnte ich das mit einem Eintrag in der CCS so lösen: ul.beschreibung-nude,ul.beschreibung-nude li{list-style-image:url(img/haken\_nude\_bg.gif);margin-left:10px;padding-left:2px;} Ich habe dir eine PN gesandt

8

Klar, du kannst dem

  • in der Artikelbeschreibung auch direkt ein globales Image verpassen. Du kannst hier auch die Shopware Font nehmen und dir den haken als .svg Image abspeichern, oder ben als .png oder was auch immer und dann dem
  • ein background-image verpassen, ein list-style:none und ein padding-left. Schwups hast du in der Beschreibung deinen Haken (global) in allen Artikel Beschreibungen.
9

[quote=„kayyy“]… Du kannst hier auch die Shopware Font nehmen und dir den haken als .svg Image abspeichern, oder ben als .png oder was auch immer und dann dem

  • ein background-image verpassen, ein list-style:none und ein padding-left. Schwups hast du in der Beschreibung deinen Haken (global) in allen Artikel Beschreibungen.[/quote] Wo muss das denn gespeichert werden, damit ich statt „disc“ einen Shopware-Font-Haken habe? Und könnte das so gespeichert werden, dass ich im Editor-Quelltext evtl. durch ändern des Code für
    -List bei einem Artikel den Haken und bei einem anderen Artikel die normale „disc“ habe? Danke
10

[quote=“Tanny”][quote=“kayyy”]… Du kannst hier auch die Shopware Font nehmen und dir den haken als .svg Image abspeichern, oder ben als .png oder was auch immer und dann dem

  • ein background-image verpassen, ein list-style:none und ein padding-left. Schwups hast du in der Beschreibung deinen Haken (global) in allen Artikel Beschreibungen.[/quote] Wo muss das denn gespeichert werden, damit ich statt “disc” einen Shopware-Font-Haken habe? Und könnte das so gespeichert werden, dass ich im Editor-Quelltext evtl. durch ändern des Code für
    -List bei einem Artikel den Haken und bei einem anderen Artikel die normale “disc” habe? Danke[/quote] in deinen CSS Dateien die in LESS einbindest. Wenn du beides haben willst nutze weitere Klassen dafür. Für alle ul { list-style-image: url('sqpurple.gif'); } none Klasse .bezeichner{ list-style-image: none; }
11

[quote=“benblub”]…in deinen CSS Dateien die in LESS einbindest. Wenn du beides haben willst nutze weitere Klassen dafür. Für alle ul { list-style-image: url('sqpurple.gif'); } none Klasse .bezeichner{ list-style-image: none; }[/quote] Danke! Aber wo kommt denn was genau hin…? :oops:

12

Das hängt davon ab wo du es haben möchtest. Vordefinierte List Klassen https://developers.shopware.com/styleti … lists.html entweder haust dir in im eigenen Template in _components eine lists.less rein oder machst dir nen eigenen ordner und haust da deine LESS Files rein mit eigenen Bezeichern wie myListStyles.less z.B.

13

[quote=„benblub“]…Vordefinierte List Klassen https://developers.shopware.com/styleti … lists.html …[/quote] Vielen Dank für den Hinweis mit den vordefinierten List-Klassen! Da habe ich schon was ich brauche! Danke :slight_smile: