So, ich habe denn jetzt auch mal das Malibu-Theme aktiviert. So weit ganz gut, die Anpassungen an ein Aussehen ähnlich dem vorherigen haben funktioniert. Leider bekomme ich es nicht hin, dass die Slider auf der Startseite funktionieren. Ich möchte den Shop nicht "eingerahmt" nutzen, habe daher alle wesentlichen Elemente (Menüs etc.) auf "wrappen" geschaltet. Auch die Slider. In der Vorschau alles schick (Bild 1). Trotzdem werden die zur Slider-Navigation notwendigen Pfeile auf der Live-Seite (Bild 2) nicht angezeigt. Wer kann mir weiterhelfen?
"Slider Wrappen" hat nichts mit Artikeln zu tun, sondern mit dem Slider, den man unter der Kopfzeile anzeigen lassen kann. Das mit den Artikeln sind Swiper Die Pfeile kommen nicht, weil Du etwas im css hast, was die auf dem PC ausblendet, bzw. ins Nirwana verschiebt Code: @media (max-width: 1519px){ .productlist-swiper .swiper-button-prev, .productlist-swiper .swiper-button-next { display: block; background: rgba(220, 220, 220, .6); color: #fff; z-index: 1001; }} Code: @media (min-width: 1520px){ .productlist-swiper .swiper-button-prev { left: -60px; }} @media (min-width: 1520px){ .productlist-swiper .swiper-button-next { right: -60px; }} bis zu einer Bildschirmbreite von 1519px sind die Pfeile da, danach sind sie außerhalb des Bildschirms.
Vielen Dank für diesen Hinweis. Nur habe ich am Original-CSS von Malibu nichts verändert. Aber nach endlosem probieren habe ich jetzt wohl die richtige Einstellung gefunden, um Header und Footer in voller Breite laufen zu lassen, deren Inhalte aber zu begrenzen und die Produktslider auch auf kleinen Bildschirmen mit Pfeilen anzuzeigen. Puh, ganz schön aufwendig, das alles durchzuprobieren. Warum gibt es dafür nicht einfach einen Regler "Swiper wrappen"? Hm, oder habe ich das jetzt falsch verstanden? Sitze gerade an einem Laptop, da sind die Pfeile zu sehen. Bei größeren Schirmen dann nicht? Wo im CSS hast du denn den Code entdeckt und kannst du mir einen Tipp geben, wie ich das ändern müsste?
Irgendwie klappt das nicht mit dem code. Was muss da auf min oder max stehen? Ich habe die Schnipsel eingesetzt, keine Änderung. Aber dennoch natürlich wie immer herzlichen Dank!
Code: @media (max-width: 1519px){ .productlist-swiper .swiper-button-prev, .productlist-swiper .swiper-button-next { display: block; background: rgba(220, 220, 220, .6); color: #fff; z-index: 1001; }} Code: @media (min-width: 1520px){ .productlist-swiper .swiper-button-prev { left: -60px; }} @media (min-width: 1520px){ .productlist-swiper .swiper-button-next { right: -60px; }} Barbaras Finger sind so flink. Hab nur 2 Klammern verändert. Versuchs jetzt.
Genau. Der Code steht irgendwo und verursacht das Problem. Und jaaa. da sind mir 2 falsche Klammern reingerutscht Wenn das alles gewraped werden soll, warum nimmst Du dann das "über die ganze Breite" - Malibu und nicht das Honeygrid?
Ganz lieben Dank euch beiden. Leider funzt das immer noch nicht. Und ich möchte gerne den Header (ohne Inhalt) und den Footer (ohne Inhalt) über die ganze Breite laufen lassen. Und die Swiper sollen den sichtbaren Raum nutzen. Außerdem hat das Malibu einfach ein paar modernere Looks, etwa auf den Artikelseiten. Was ich nervig finde ist die Tatsache, dass man im Style Edit immer nur marginal berarbeiten kann, niemals alle Elemente. Das sollte eigentlich kein Hexenwerk sein heutzutage. Alles lässt sich einstellen, aber ausgerechnet der Swiper nicht. Hab im Code mal die beiden "-60px" auf 0px gesetzt. Und es klappt (dachte ich wenigstens). Fühlt euch gedrückt, bitte. Hmm, zu früh gefreut. Die Pfeile sind zwar jetzt zu sehen, man kommt aber nicht dran, weil die Produktfelder rechts und links außen sich bei mouseover vergrößern und die Pfeile überlagern. Das passiert übrigens an schmaleren Schirmen nicht, da bleiben die Pfeile (die hier auch leicht hinterlegt sind) über den Swiperfeldern. An großen Schirmen aber sind nur die Pfeile zu sehen, nicht die Flächen darunter. Und dann decken die Swiperfelder die Pfeile bei mouseover ab, sodass man sie nicht mehr erreichen kann. Außerdem muss ich noch herausfinden, warum (zum T…) die Schrift nicht so will wie eingestellt. Ich nutze die Fira aus den Grundeinstellungen im Malibu. An einem Rechner alles klar, am nächsten in Safari ersetzt durch eine Systemschrift und an einem anderen dasselbe, aber nur in Firefox. Und ja, auf allen Rechnern mehrfach sämtliche Caches gelöscht, Browser neu gestartet etc. So was kann einem die Freude an einem neuen Shop-Look echt vermiesen.
gibt mal diesen Code ein und schau was passiert. Code: .row, .teaser-group-three-squares, .teaser-group-2-cols-big-image { margin-left: 0px; margin-right: 0px; }
wenn du die Sektion in der dein Swiper drin ist, bearbeitest. (Neben dem Wort "Sektion" auf den Stift klicken). Dann kannst du diese Sektion wrappen.
@stephanfennel ich sehe gerade, dass durch den letzten Code deine mobile Ansicht nicht mehr schön ist. Dann kann es das nicht gewesen sein. Lösche ihn wieder und versuch die Sektion in der der Swiper ist, zu wrappen. Vielleicht klappt es damit.
@Michaela Klaiber Das mit dem wrappen habe ich gestern schon versucht, brachte aqber nicht die erhoffte Lösung. Was meinst du denn mit "nicht gut aussehen"? Auf meinem iPhone ist es eigentlich okay. Der Swiper könnte ein wenig breiter sein. Ich habe mal -10px statt der 0-Werte eingegeben. Gefällt dir das besser? Auf einem großen Schirm funktioniert auch das weiterhin …
@Michaela Klaiber Ich sehe gerade, dass -10px nicht die Lösung ist, weil dann die Pfeile am Desktop wieder komplett verschwinden. Mist. Dabei sah es gut aus mit 0px, jedenfalls am großen Schirm.
@Michaela Klaiber Ich glaube, ich habe es jetzt: Code: @media (min-width: 1519px){ .productlist-swiper .swiper-button-prev { display: block; background: rgba(220, 220, 220, .6); color: #fff; z-index: 1001; left: 0px; }} @media (min-width: 1519px){ .productlist-swiper .swiper-button-next { display: block; background: rgba(220, 220, 220, .6); color: #fff; z-index: 1001; right: 0px; }} Damit bleiben die überlagernden prev und next Pfeile auch auf großen Bildschirmen erhalten und die Swiper-Navigation damit gewährleistet. Was meinst du?
@Michaela Klaiber Wenn wir jetzt noch einen Weg finden, wie man diese übergroßen Abstände zwischen den Swipern verringern könnte, wäre ich richtig glücklich …
@stephanfennel ja, so ist es super. Die Abstände ergeben sich automatisch. Du hast den Shop auf die komplette Breite eingestellt. Und in der Produktliste kannst du nicht mehr als 5 Artikel nebeneinander anzeigen lassen. Diese 2 Variablen miteinander ergeben, dass die 5 Artikel nebeneinander soweit auseinander stehen, damit die komplette Shop-Breite ausgefüllt ist.
@Michaela Klaiber Das hab ich auch so gesehen, finde es aber arg limitierend. Warum kann ich auf großen Monitoren nicht auf 6 Artikel setzen? Oder noch besser: es wäre echt responsiv, wenn die Breite, die da ist mit dem nächsten Swiperfeld gefüllt würde. Und eine Frage noch (wenn ich darf): Ich habe die Zeichenzahl für die Artikelüberschriften deutlich erhöht, aber auf der Startseite ist immer mit der zweiten Zeile Schluss. Irgendeine Idee, wie ich das auf drei Zeilen in der Ansicht erweitern könnte. Wir haben halt Artikel mit ca. 50 Zeichen im Titel. Einen schönen Abend und vG
Und wieder ein riesengroßes Dankeschön. Da hätte ich auch selbst drauf kommen müssen. Wald, Bäume? Hat übrigens eine angenehme Nebenwirkung: dort kann man auch die Höhe des Preises in der Kachel ändern. Und siehe da: die übergroßen Abstände zwischen den Swipern sind deutlich reduziert. Langsam wird's schön … Merci vielmals!