Hallo, ich habe eine Frage zur Produktlistenanpassung im Styleedit. Ich würde gerne im Style Edit die Produktliste im Swiper transparent machen. An sich funktioniert das auch recht gut! Nur ein Problem ergibt sich. Je nach Artikel und Artikeltext passiert folgendes: Im Anhang habe ich den Swiper einmal mit Mouse Hoover und einmal ohne. Dort erkennt man, dass der Text sich verändert. Das Wort "Im" verändert mit oder ohne Hoover die Position. Habe ich den Swiper transparent, dann werden BEIDE Texte angezeigt. Also mit & ohne Umbruch des Wortes "Im". Kann ich das abstellen? Oder wie kann ich bei einem transparenten Hintergrund vermeiden, dass beide Texte angezeigt werden? Meine Seite ist: www.hm-audiobooks.de Ich bedanke mich schon jetzt sehr. Carsten
Hallo Michaela, es sind beides die gleichen Texte eines Artikels. Das linke Bild ist die Produktkachel ohne mit der Maus darüber zu sein. Da bricht das Wort "IM" um und beginnt darunter. Rechts halte ich die Maus darüber und das Wort "Im" bricht nicht um, sondern bleibt in der ersten Zeile. Mit Hintergrundfarbe kein Problem. Aber bei Transparent sind beide Texte mit & ohne Umbruch zu sehen. Das führt dann zu einer verdopplung beider Texte. Hier habe ich eine Hintergrundfarbe gewählt. Daher sieht man auch nicht beide Texte Zeitgleich! Carsten
Ich sehe den Artikel nicht im Swiper, sondern nur als Kachel in der Kategorie. Im Swiper auf der Startseite verschiebt sich auch nichts. Ich würde einen Hintergrund nur dann transparent machen, wenn ich etwas, das darunter liegt, sichtbar haben möchte. In der Kachel würde ich nicht mehr anzeigen wollen als nötig. (nur meine Meinung) Warum soll bei Dir der Hintergrund transparent sein? Ich habe gerade in Deinem Shop alle möglichen Hintergrundfarben in der Konsole auf transparent gestellt, kann aber Dein Problem so nicht nachstellen. Mich würde aber das 2sich bewegen" des Textes stören, und das würde ich versuchen abzustellen.
Hallo Barbara, ja im Swiper auf der Startseite nicht, dieses stimmt! Es ist die Produktliste (Kachel innerhalb einer Kategorie Seite. Wenn ich aber z.b. nur den Swiper auf der Startseite Transparent machen möchte, weil ich dort ein Hintergrundmotiv als Bild habe, so werden alle Bilder Swiper Startseite und Artikelisten Kategorien transparent. Und bei den Kategorien verschieben sich dann die Texte, da dort dann beide Varianten der Texte angezeigt werden. Einmal wenn die Kachel "kleiner" ist, keine Maus darüber und wenn die Kachel "größer" wird, mit Maus darüber (Text bricht um). Carsten
damit das nicht wackelt, kannst Du das im eigenen css versuchen: Code: @media (min-width: 1400px){ body.page-index-type-cat .product-listing-full-width .productlist-viewmode-grid .product-container { padding-right: 0; padding-left: 0; }} gegebenenfalls muss das auf andere Bildschirmbreiten angepasst werden. Wenn Du die Kachel im swiper transparent machst, sieht man nicht den Hintergrund, sondern die Flyover-Kachel Willst Du den Hintergrund sehen, müsste das auch transparent werden, dann erkennt man allerdings kaum noch den Effekt. versuche es mal mit body.page-index .swiper-container .product-container { background-color: transparent; }[/code] Dann solte nur die Swiper-Kachel auf den Startseite angesprochen werden, allerdings ohne das Flyover
Das sieht doch sehr gut aus... Danke Dir Barbara. Ich habe es mit Deinem Code gemacht! body.page-index .swiper-container .product-container { background-color: transparent; } Das spricht nun den Hintergrund für den Container an, wenn ich nicht Hoover. Wie ist denn der Code, wenn ich auch den Hintergrund des Hoovern beeinflussen mag? ist es .product-hover { background-color: meineFarbe; } Carsten
nein. bin nicht ganz sicher, versuche es mal mit Code: body.page-index .swiper-container .product-container.flyover{ background-color: transparent; }
Hallo Barbara, vielen Dank. Aber das ist es nicht. Ich bin nicht ganz sicher was es mit der bg Color von .product-hover auf sich hat... Dies wird mir angezeigt in der Konsole... Vielen Dank. Carsten
das ist für die Startseite und die Kategorie. Code: .product-container.flyover{ background-color: transparent; }
das müsste für den Swiper auf der Startseite sein: Code: body.page-index .product-container.flyover { background-color: transparent; }
Das war es... Danke Dir Michaela Ich vermute ich könnte so dann auch in einzelnen Katalogen diese Produktlisten ändern.... Ich stöber mal.. Viele Grüße Carsten
ja, hiermit sprichst du zb. deine Kategorie "Hörspiel und Serien" an: Code: body.page-index-type-c14.page-index-type-gm_boosted_category.page-index-type-cat.page-index-type-cPath.page-index-type-is-filtering .product-container.flyover { background-color: red; } die c14 ist deine Kategorie "Hörspiel und Serien".