# Ausverkaufte Artikel mit "ausverkauft"-Grafik kennzeichnen **URL:** \ **Category:** Shopware 3.5\ **Tags:** programming\ **Created:** [27. Juli 2011 um 16:13 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662 "2011-07-27T16:13:04Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![frank73](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@frank73](https://forum.shopware.com/u/frank73)\ **Post date:** [28. November 2015 um 14:04 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/21 "2015-11-28T14:04:17Z")
[quote=“sschreier”][quote=“frank73”][quote] Geilo, das wars mit z-index: 501; passt es. Wieder etwas dazugelernt, danke! 🙂 LG[/quote] Hallo, habe nun deinen Code unten an das “box-basic.tpl” angehängt und in meinem Theme hochgeladen. Wie gesagt ich bin ein blutiger Anfänger 😉 kann mir jemand mal den genauen Pfad nennen in den nun der CSS Code eingefügt werden muss und auch das Gif? Vielen Dank und Gruß Frank[/quote] Hallo Frank, Grafiken am Besten dort ablegen: themes/Frontend/DEINTHEME/frontend/\_public/src/img LESS-Dateien am Besten dort ablegen: themes/Frontend/DEINTHEME/frontend/\_public/src/less Bzgl. einer LESS-Datei: erstelle dazu am besten eine Datei “all.less”, welche alle anderen LESS-Datei importiert. Für deine eigenen Styles importierst du bspw. styles.css (Name frei wählbar): ` @import 'styles'; ` In der styles.less - Datei: ` div.ico\_sold { background: url("frontend/\_public/src/img/icon.png") repeat scroll 0 0; } ` Beste Grüße Sebastian[/quote] Ich werde noch verrückt! :wtf: Das sold.gif habe ich in den Ordner gelegt und in die main-navigation.less, die sich im Unterordner \_modules befindet dann ganz unten das CSS eingefügt. Hier noch einmal den Code dazu: [quote]div.ico\_sold { -moz-background-clip: border; -moz-background-origin: padding; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url(…/images/sold.gif); background-position: 0 0; background-repeat: no-repeat; display: block; height: 100px; left: 0; position: absolute; top: 0; width: 100px; z-index: 501; }[/quote] Aber das Gif wird nicht angezeigt! Warum??? Helft einem verzweifelten User! 🙂 ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [28. November 2015 um 14:07 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/22 "2015-11-28T14:07:34Z")
[quote=“frank73”] Ich werde noch verrückt! :wtf: Das sold.gif habe ich in den Ordner gelegt und in die main-navigation.less, die sich im Unterordner \_modules befindet dann ganz unten das CSS eingefügt. Hier noch einmal den Code dazu: [quote]div.ico\_sold { -moz-background-clip: border; -moz-background-origin: padding; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url(…/images/sold.gif); background-position: 0 0; background-repeat: no-repeat; display: block; height: 100px; left: 0; position: absolute; top: 0; width: 100px; z-index: 501; }[/quote] Aber das Gif wird nicht angezeigt! Warum??? Helft einem verzweifelten User! :)[/quote] Nutze am besten die Struktur, die ich dir aufgelistet habe. Wozu die main-navigation.less nutzen? Erstell doch deine eigene LESS-Datei in dem nachfolgenden Pfad. Heisst dein Image-Ordner dort auch images und nicht img? Grafiken am Besten dort ablegen: themes/Frontend/DEINTHEME/frontend/\_public/src/img LESS-Dateien am Besten dort ablegen: themes/Frontend/DEINTHEME/frontend/\_public/src/less Bzgl. der LESS-Dateien: erstelle dazu am besten eine Datei “all.less”, welche alle anderen LESS-Datei importiert. Für deine eigenen Styles importierst du bspw. styles.css (Name frei wählbar): ` @import 'styles'; ` In der styles.less - Datei: ` div.ico\_sold { -moz-background-clip: border; -moz-background-origin: padding; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url("../img/icon.png"); background-position: 0 0; background-repeat: no-repeat; display: block; height: 100px; left: 0; position: absolute; top: 0; width: 100px; z-index: 501; }` Beste Grüße Sebastian ---
**Author:** ![EikeBrandtWarneke](https://avatars.discourse-cdn.com/v4/letter/e/cdc98d/32.png) [@EikeBrandtWarneke](https://forum.shopware.com/u/EikeBrandtWarneke)\ **Post date:** [28. November 2015 um 14:21 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/23 "2015-11-28T14:21:17Z")
[quote]Aber das Gif wird nicht angezeigt! Warum???[/quote] Schau dir mal das css an und die Datei, die angezeigt werden soll. Ich vermute, dass der Pfad schlichtweg falsch ist. Relativ zum less Ordner, sollte der Bilder Ordner so lauten: …/…/imgages/sold.gif Viele Grüße ---
**Author:** ![frank73](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@frank73](https://forum.shopware.com/u/frank73)\ **Post date:** [28. November 2015 um 14:29 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/24 "2015-11-28T14:29:58Z")
[quote=„sschreier“][quote=„frank73“] Ich werde noch verrückt! :wtf: Das sold.gif habe ich in den Ordner gelegt und in die main-navigation.less, die sich im Unterordner \_modules befindet dann ganz unten das CSS eingefügt. Hier noch einmal den Code dazu: [quote]div.ico\_sold { -moz-background-clip: border; -moz-background-origin: padding; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url(…/images/sold.gif); background-position: 0 0; background-repeat: no-repeat; display: block; height: 100px; left: 0; position: absolute; top: 0; width: 100px; z-index: 501; }[/quote] Aber das Gif wird nicht angezeigt! Warum??? Helft einem verzweifelten User! :)[/quote] Nutze am besten die Struktur, die ich dir aufgelistet habe. Wozu die main-navigation.less nutzen? Erstell doch deine eigene LESS-Datei in dem nachfolgenden Pfad. Heisst dein Image-Ordner dort auch images und nicht img? Grafiken am Besten dort ablegen: themes/Frontend/DEINTHEME/frontend/\_public/src/img LESS-Dateien am Besten dort ablegen: themes/Frontend/DEINTHEME/frontend/\_public/src/less Bzgl. der LESS-Dateien: erstelle dazu am besten eine Datei „all.less“, welche alle anderen LESS-Datei importiert. Für deine eigenen Styles importierst du bspw. styles.css (Name frei wählbar): ` @import 'styles'; ` In der styles.less - Datei: ` div.ico\_sold { -moz-background-clip: border; -moz-background-origin: padding; -moz-background-size: auto auto; background-attachment: scroll; background-color: transparent; background-image: url("../img/icon.png"); background-position: 0 0; background-repeat: no-repeat; display: block; height: 100px; left: 0; position: absolute; top: 0; width: 100px; z-index: 501; }` Beste Grüße Sebastian[/quote] Hallo Sebastian, lach… es funktioniert einfach nicht! Ich habe schon ein all.less Datei und ich habe dort, so wie geschrieben, den Code eingegeben. anschließend eine styles.less Datei erstellt deinen Code eingefügt und in das genannte Verzeichnis (gleiche Ebene wie die all.less) hochgeladen. Themes kompiliert und Cache geleert! Geht nicht! Ach ja, natürlich habe ich auch vorab die Grafik im Link in „sold.gif“ geändert. bei dir stand ja was von png. Noch ne Idee??? 🙂 ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [28. November 2015 um 14:31 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/25 "2015-11-28T14:31:45Z")
[quote=“frank73”] Hallo Sebastian, lach… es funktioniert einfach nicht! Ich habe schon ein all.less Datei und ich habe dort, so wie geschrieben, den Code eingegeben. anschließend eine styles.less Datei erstellt deinen Code eingefügt und in das genannte Verzeichnis (gleiche Ebene wie die all.less) hochgeladen. Themes kompiliert und Cache geleert! Geht nicht! Ach ja, natürlich habe ich auch vorab die Grafik im Link in “sold.gif” geändert. bei dir stand ja was von png. Noch ne Idee??? :)[/quote] Hallo Frank, schick mir bitte mal die Shop-URL per Nachricht, dann guck ich mir das mal live an, das geht schneller und einfacher. Beste Grüße Sebastian ---
**Author:** ![frank73](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@frank73](https://forum.shopware.com/u/frank73)\ **Post date:** [28. November 2015 um 14:35 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/26 "2015-11-28T14:35:25Z")
Jetzt hat es endlich geklappt! Scheint die URL zum Bild gewesen zu sein! DANKE!!! Gruß Frank ---
**Author:** ![frank73](https://avatars.discourse-cdn.com/v4/letter/f/13edae/32.png) [@frank73](https://forum.shopware.com/u/frank73)\ **Post date:** [1. Dezember 2015 um 18:10 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/27 "2015-12-01T18:10:09Z")
[quote=“sschreier”][quote=“frank73”] Hallo Sebastian, lach… es funktioniert einfach nicht! Ich habe schon ein all.less Datei und ich habe dort, so wie geschrieben, den Code eingegeben. anschließend eine styles.less Datei erstellt deinen Code eingefügt und in das genannte Verzeichnis (gleiche Ebene wie die all.less) hochgeladen. Themes kompiliert und Cache geleert! Geht nicht! Ach ja, natürlich habe ich auch vorab die Grafik im Link in “sold.gif” geändert. bei dir stand ja was von png. Noch ne Idee??? :)[/quote] Hallo Frank, schick mir bitte mal die Shop-URL per Nachricht, dann guck ich mir das mal live an, das geht schneller und einfacher. Beste Grüße Sebastian[/quote] Noch eine letzte Frage! 🙂 Was muss ich am Code verändern, damit die “ausverkauft” Grafik auch nur dann angezeigt wird, wenn der gesamte Artikel incl. Varianten auf 0 steht? Jetzt wird die Grafik auch angezeigt, wenn nur eine meiner Varianten auf 0 steht. Gruß Frank ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [1. Dezember 2015 um 18:49 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/28 "2015-12-01T18:49:10Z")
[quote=„frank73“][quote=„sschreier“][quote=„frank73“] Hallo Sebastian, lach… es funktioniert einfach nicht! Ich habe schon ein all.less Datei und ich habe dort, so wie geschrieben, den Code eingegeben. anschließend eine styles.less Datei erstellt deinen Code eingefügt und in das genannte Verzeichnis (gleiche Ebene wie die all.less) hochgeladen. Themes kompiliert und Cache geleert! Geht nicht! Ach ja, natürlich habe ich auch vorab die Grafik im Link in „sold.gif“ geändert. bei dir stand ja was von png. Noch ne Idee??? :)[/quote] Hallo Frank, schick mir bitte mal die Shop-URL per Nachricht, dann guck ich mir das mal live an, das geht schneller und einfacher. Beste Grüße Sebastian[/quote] Noch eine letzte Frage! 🙂 Was muss ich am Code verändern, damit die „ausverkauft“ Grafik auch nur dann angezeigt wird, wenn der gesamte Artikel incl. Varianten auf 0 steht? Jetzt wird die Grafik auch angezeigt, wenn nur eine meiner Varianten auf 0 steht. Gruß Frank[/quote] Genau das Problem habe ich auch noch. Sobald die Hauptvariante auf 0 fällt, wird der gesamte Artikel als ausverkauft gekennzeichnet, obwohl ja alle anderen Varianten noch auf Lager sind. An einer Lösung wäre ich auch interessiert. ---
**Author:** ![sschreier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sschreier/32/23296_2.png) [@sschreier](https://forum.shopware.com/u/sschreier)\ **Post date:** [1. Dezember 2015 um 18:56 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/29 "2015-12-01T18:56:41Z")
Hallo, [quote=“frank73”] Noch eine letzte Frage! 🙂 Was muss ich am Code verändern, damit die “ausverkauft” Grafik auch nur dann angezeigt wird, wenn der gesamte Artikel incl. Varianten auf 0 steht? Jetzt wird die Grafik auch angezeigt, wenn nur eine meiner Varianten auf 0 steht. Gruß Frank[/quote] Ich glaube da gibt es vom Standard her keine Möglichkeit, die Varianten auch mit einzubeziehen. [quote=“trixx”] Genau das Problem habe ich auch noch. Sobald die Hauptvariante auf 0 fällt, wird der gesamte Artikel als ausverkauft gekennzeichnet, obwohl ja alle anderen Varianten noch auf Lager sind. An einer Lösung wäre ich auch interessiert.[/quote] Erst einmal kann man ja in der Variantenverwaltung innerhalb des Artikels die Variante festlegen (Vorauswahl), die die Standard-Variante beim Artikelaufruf sein soll. Somit kann man ja bei einer “ausverkauften” Hauptartikelvariante eine andere Variante als Vorauswahl festlegen. Beste Grüße Sebastian ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [1. Dezember 2015 um 19:01 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/30 "2015-12-01T19:01:45Z")
[quote=„sschreier“]Hallo, [quote=„frank73“] Noch eine letzte Frage! 🙂 Was muss ich am Code verändern, damit die „ausverkauft“ Grafik auch nur dann angezeigt wird, wenn der gesamte Artikel incl. Varianten auf 0 steht? Jetzt wird die Grafik auch angezeigt, wenn nur eine meiner Varianten auf 0 steht. Gruß Frank[/quote] Ich glaube da gibt es vom Standard her keine Möglichkeit, die Varianten auch mit einzubeziehen. [quote=„trixx“] Genau das Problem habe ich auch noch. Sobald die Hauptvariante auf 0 fällt, wird der gesamte Artikel als ausverkauft gekennzeichnet, obwohl ja alle anderen Varianten noch auf Lager sind. An einer Lösung wäre ich auch interessiert.[/quote] Erst einmal kann man ja in der Variantenverwaltung innerhalb des Artikels die Variante festlegen (Vorauswahl), die die Standard-Variante beim Artikelaufruf sein soll. Somit kann man ja bei einer „ausverkauften“ Hauptartikelvariante eine andere Variante als Vorauswahl festlegen. Beste Grüße Sebastian[/quote] Ja schon klar, so mache ich es ja auch momentan. Ist aber ja auch irgendwie keine richtige Lösung. Wenn die Hauptvariante auf 0 fällt, bekommt man es ja nicht gleich sofort mit, sondern erst wenn der Cron wieder durchgelaufen ist. Für den Zeitraum, bis man das dann geändert hat, wird erstmal die Ausverkauft-Grafik angezeigt. Wäre super wenn man da etwas machen kann oder ist das nur mit hohem Programmieraufwand möglich? ---
**Author:** ![Vitago\_GmbH](https://avatars.discourse-cdn.com/v4/letter/v/67e7ee/32.png) [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\ **Post date:** [10. Januar 2016 um 01:48 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/31 "2016-01-10T01:48:07Z")
[quote=“sschreier”] Erst einmal kann man ja in der Variantenverwaltung innerhalb des Artikels die Variante festlegen (Vorauswahl), die die Standard-Variante beim Artikelaufruf sein soll. Somit kann man ja bei einer “ausverkauften” Hauptartikelvariante eine andere Variante als Vorauswahl festlegen. Beste Grüße Sebastian[/quote] [quote=“trixx”] Ja schon klar, so mache ich es ja auch momentan. Ist aber ja auch irgendwie keine richtige Lösung. Wenn die Hauptvariante auf 0 fällt, bekommt man es ja nicht gleich sofort mit, sondern erst wenn der Cron wieder durchgelaufen ist. Für den Zeitraum, bis man das dann geändert hat, wird erstmal die Ausverkauft-Grafik angezeigt. Beste Grüße [/quote] Hallo, gibt es da mittlerweile vielleicht schon eine bessere Lösung? Lg ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [10. Januar 2016 um 16:18 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/32 "2016-01-10T16:18:55Z")
[quote=„Vitago GmbH“][quote=„sschreier“] Erst einmal kann man ja in der Variantenverwaltung innerhalb des Artikels die Variante festlegen (Vorauswahl), die die Standard-Variante beim Artikelaufruf sein soll. Somit kann man ja bei einer „ausverkauften“ Hauptartikelvariante eine andere Variante als Vorauswahl festlegen. Beste Grüße Sebastian[/quote] [quote=„trixx“] Ja schon klar, so mache ich es ja auch momentan. Ist aber ja auch irgendwie keine richtige Lösung. Wenn die Hauptvariante auf 0 fällt, bekommt man es ja nicht gleich sofort mit, sondern erst wenn der Cron wieder durchgelaufen ist. Für den Zeitraum, bis man das dann geändert hat, wird erstmal die Ausverkauft-Grafik angezeigt. Beste Grüße [/quote] Hallo, gibt es da mittlerweile vielleicht schon eine bessere Lösung? Lg[/quote] Hallo, leider nein, wäre ich aber auch nach wie vor dran interessiert. Gruß Gesendet von meinem MX4 mit Tapatalk ---
**Author:** ![Vitago\_GmbH](https://avatars.discourse-cdn.com/v4/letter/v/67e7ee/32.png) [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\ **Post date:** [11. Januar 2016 um 22:30 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/33 "2016-01-11T22:30:13Z")
Hi @trixx, Schade, aber danke für die Info. Habt ihr das auch, dass wenn man “Artikel hervorheben” aktiviert oder bei Rabatt Artikeln sich das Bild “Ausverkauft” mit den anderen überschneidet? Lg ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [11. Januar 2016 um 22:37 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/34 "2016-01-11T22:37:15Z")
[quote=“Vitago GmbH”]Hi @trixx, Schade, aber danke für die Info. Habt ihr das auch, dass wenn man “Artikel hervorheben” aktiviert oder bei Rabatt Artikeln sich das Bild “Ausverkauft” mit den anderen überschneidet? Lg[/quote] Hi, das hatte ich Anfangs auch. Schau mal in diesem Thread auf Seite zwei. Das ganze lässt sich über den z-index in der .less steuern. Gruß Gesendet von meinem MX4 mit Tapatalk ---
**Author:** ![Vitago\_GmbH](https://avatars.discourse-cdn.com/v4/letter/v/67e7ee/32.png) [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\ **Post date:** [11. Januar 2016 um 23:00 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/35 "2016-01-11T23:00:47Z")
[quote=“trixx”][quote=“Vitago GmbH”]Hi @trixx, Schade, aber danke für die Info. Habt ihr das auch, dass wenn man “Artikel hervorheben” aktiviert oder bei Rabatt Artikeln sich das Bild “Ausverkauft” mit den anderen überschneidet? Lg[/quote] Hi, das hatte ich Anfangs auch. Schau mal in diesem Thread auf Seite zwei. Das ganze lässt sich über den z-index in der .less steuern. Gruß Gesendet von meinem MX4 mit Tapatalk[/quote] Danke, aber das hatte ich schon versucht, damit verschiebe ich nur das Artikelbild. Und “TIPP!” überlagert immer noch das Bild “Ausverkauft” Lg ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [11. Januar 2016 um 23:09 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/36 "2016-01-11T23:09:30Z")
[quote=“Vitago GmbH”][quote=“trixx”][quote=“Vitago GmbH”]Hi @trixx, Schade, aber danke für die Info. Habt ihr das auch, dass wenn man “Artikel hervorheben” aktiviert oder bei Rabatt Artikeln sich das Bild “Ausverkauft” mit den anderen überschneidet? Lg[/quote] Hi, das hatte ich Anfangs auch. Schau mal in diesem Thread auf Seite zwei. Das ganze lässt sich über den z-index in der .less steuern. Gruß Gesendet von meinem MX4 mit Tapatalk[/quote] Danke, aber das hatte ich schon versucht, damit verschiebe ich nur das Artikelbild. Und “TIPP!” überlagert immer noch das Bild “Ausverkauft” Lg[/quote] Ach so, ja stimmt. Mit dem z-index hatte ich damals die Ausverkauftgrafik weiter nach vorne geholt, da die Grafik vom Artikelbild überlagert wurde. Denn Fall dass sich das ganze mit den Hervorhebungen überlagert hatte ich bisher noch nicht, also es ist noch nicht zu dieser Konstellation gekommen. Solange man aber die Ausverkauftgrafik auf der linken Seite ausgibt, wird sich wohl immer was überlagern. Dann müsste man die Grafik evtl. links unten oder auf der rechten Seite ausgeben lassen, da sollte sich dann ja eigentlich nichts in die Quere kommen!? Bzw. mittig würde auch gut passen, mit entsprechender Grafik. LG Gesendet von meinem MX4 mit Tapatalk ---
**Author:** ![Vitago\_GmbH](https://avatars.discourse-cdn.com/v4/letter/v/67e7ee/32.png) [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\ **Post date:** [11. Januar 2016 um 23:24 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/37 "2016-01-11T23:24:23Z")
[quote=“trixx”] Ach so, ja stimmt. Mit dem z-index hatte ich damals die Ausverkauftgrafik weiter nach vorne geholt, da die Grafik vom Artikelbild überlagert wurde. [/quote] War bei mir das gleiche, und hab das Problem auch mit dem z-index behoben. [quote]Dann müsste man die Grafik evtl. links unten oder auf der rechten Seite ausgeben lassen, da sollte sich dann ja eigentlich nichts in die Quere kommen!? Bzw. mittig würde auch gut passen, mit entsprechender Grafik. LG [/quote] Darauf hätte ich auch selbst kommen können. :oops: Danke für deine Hilfe. 🙂 Lg ---
**Author:** ![Vitago\_GmbH](https://avatars.discourse-cdn.com/v4/letter/v/67e7ee/32.png) [@Vitago\_GmbH](https://forum.shopware.com/u/Vitago_GmbH)\ **Post date:** [12. Januar 2016 um 00:09 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/38 "2016-01-12T00:09:13Z")
So, habe die Grafik damit man die auch auf der rechten Seite verwenden kann angepasst. Falls es jemand braucht 😉 [Grafik Ausverkauft](http://fs5.directupload.net/images/160112/ej3yzlkk.png) Jetzt müsst ihr nur noch die Grafik tauschen und folgendes ändern: div.ico\_sold { ` left: 0; ` ändern in `right: 0; ` Durch die Änderung wird die Grafik “Ausverkauft” nicht mehr durch die Grafik “TIPP!” und “Prozent” überlagert. 😉 Lg ---
**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\ **Post date:** [12. Januar 2016 um 01:09 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/39 "2016-01-12T01:09:39Z")
Statt das ganze mit einer Grafik zu machen und alles sehr umständlich anzupassen, würde ich das ganze einfach mit CSS umsetzen. Habe hier einmal ein Codepen Beispiel gemacht: [http://codepen.io/kayyy/pen/jWwawv](http://codepen.io/kayyy/pen/jWwawv) Bedenkt eben auch, das die Grafiken angepasst werden müssen bei Tablets, Mobile etc. ---
**Author:** ![trixx](https://avatars.discourse-cdn.com/v4/letter/t/b5e925/32.png) [@trixx](https://forum.shopware.com/u/trixx)\ **Post date:** [12. Januar 2016 um 20:24 UTC](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662/40 "2016-01-12T20:24:34Z")
[quote=“kayyy”]Statt das ganze mit einer Grafik zu machen und alles sehr umständlich anzupassen, würde ich das ganze einfach mit CSS umsetzen. Habe hier einmal ein Codepen Beispiel gemacht: [http://codepen.io/kayyy/pen/jWwawv](http://codepen.io/kayyy/pen/jWwawv) Bedenkt eben auch, das die Grafiken angepasst werden müssen bei Tablets, Mobile etc.[/quote] Hab ich mal probiert, aber will nicht so ganz. Bei einem Artikel wird es korrekt dargestellt bei dem daneben nicht? Siehe [Screen](http://awesomescreenshot.com/0445joe188) Mein Code der box-basic.tpl [code]{extends file=“parent:frontend/listing/product-box/box-basic.tpl”} {block name=‘frontend\_listing\_box\_article\_badges’ prepend} {if $sArticle.instock == 0} AUSVERKAUFT {/if} {/block}[/code] Und CSS: `/\* Artikel ausverkauft Grafik \*/ .ico\_sold { top: 30px; right: -40px; position: absolute; z-index: 750; color: white; background: red; padding: 3px 40px; transform: rotate(45deg); }` Wieso funzt das denn nur beim rechten Artikel? LG [Vorherige Seite](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662.md?page=1) [Nächste Seite](https://forum.shopware.com/t/ausverkaufte-artikel-mit-quot-ausverkauft-quot-grafik-kennzeichnen/3662.md?page=3)