Und heute habe ich leider noch eine Frage. Ich wollte den Mouseover / Hover Effekt aus dem Testshop2 bei mir im Testshop ausprobieren, also dass das Bild etwas größer wird beim mit der Maus drüber fahren. Habe mir dementsprechend die Anleitung aus dem damaligen Thread "neue Testshops sind online - Page 7" rausgesucht und eingebaut, das Javascript und die beiden angehängten Dateien grid_rows.scss und usermod.scss hochgeladen. Hat alles funktioniert. Allerdings ist dies ja für genau das aussehen des Testshops2 konstruiert, also großes Bild links, zwei kleine Bilder rechts daneben eben der home-teaser. Ich habe bei mir im Index 4 Bilder nebeneinander, bzw. generell Bilderreihen auf der Startseite. Gibt es eine andere Klasse, die ich einzelnen Bilderreihen zuordnen kann für den Effekt oder hat jemand einen entsprechenden css Code. Wenn ich <a class="home-teaser" href= … bei meinen Bilderreihen hinzufüge zeigt mir der Shop nicht mal mehr die Bilder an. Des Weiteren ist die Frage, ob jemand diesen Effekt auch schon für das Theme gebastelt hat, da ich parallel dazu auch meinen Umstieg auf Theme vorbereite und sobald das neue Masterupdate kommt endlich updaten wollte. Vielen Dank und Viele Grüße Jürgen Shop: www.shop-of-Beauty.de Version 3.13.3 Testshop ist offline dort Version 3.15.2 und zum testen wieder auf von Theme auf Template geschaltet
Poste doch mal bitte den Quellcode deiner Bilder, damit man schauen kann wo es hängt. sonst kann man nur raten.
Habe im Testshop folgenden Quellcode: <div class="row home-teaser-row space-0"> <div class="col-xs-12 col-md-8 row-xs-2 row-md-2"> <a class="home-teaser" href="kinder-babys/"><img alt="" class="img-responsive" src="images/content/index/Zen-of-Nature_400.jpg" /></a> </div> <div class="col-xs-12 col-md-4 row-xs-2 row-md-1"> <a class="home-teaser" href="specials.php"><img alt="" class="img-responsive" src="images/content/index/sale-top.jpg" /></a> </div> <div class="col-xs-12 col-md-4 row-xs-2 row-md-1"> <a class="home-teaser" href="info/versand-zahlungsbedingungen.html"><img alt="" class="img-responsive" src="images/content/index/service-top.jpg" /></a> </div> </div> & <div class="row home-teaser-row space-0"> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <a class="home-teaser" href="https://www.shop-of-beauty.de/Zen-of-Nature/"><img alt="direkt zu Zen-of-Nature Luxuskosmetik" class="img-responsive" src="images/content/index/Avinya_400.jpg" /></a> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <a class="home-teaser" href="https://www.shop-of-beauty.de/Vetia-Mare/"><img alt="direkt zu Vetia MAre Luxe Organic" class="img-responsive" src="images/Vetia_Mare_400.jpg" /></a> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <a class="home-teaser" href="https://www.shop-of-beauty.de/Balmyou/"><img alt="direkt zu Balmyou Natural Cosmetics" class="img-responsive" src="images/Balmyou_400.jpg" /></a> </div> <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> <a class="home-teaser" href="https://www.shop-of-beauty.de/aroma-garden/"><img alt="direkt zu Aroma Garden" class="img-responsive" src="images/Aroma_garden_400.jpg" /></a> </div> </div> Die oberen drei divs sind die Originalen aus dem Testshop2 und funktionieren. Habe nur mal den Namen des ersten Bildes getauscht um zu sehen, ob meins angezeigt wird und es wird es, eben groß. Dann habe ich die unteren 4 divs für meine Bilderreihe mit <a class="home-teaser" ergänzt und die Bilder auch in den gleichen Image Ordner hochgeladen und diese werden dann gar nicht angezeigt.
Du hast die Bilder in images/content/index/ geladen, oder nur in images/ ? Da sind 2 verschiedene Bildpfade in Deinem Code.
in beide zum testen habe viel rumprobiert auch in den beiden scss Dateien geschaut aber dafür reichen meine Kenntnisse noch nicht
ändere diese Zeilen: HTML: <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"> in HTML: <div class="col-xs-3 col-md-3 row-xs-1"> dann sollte der Effekt gehen
Super, vielen vielen Dank Barbara, Effekt klappt. Was bedeutet row-xs-1 bzw. wie im Original row-md-1. Habe da bei Bootstrap nichts dazu gefunden? Jetzt muss ich die Bilder nur noch entsprechend anpassen, da in der Normalansicht die Ränder abgeschnitten sind.(vergleiche Bild_1 Original und Bild_2 mit Effekt)
xs, sm, md und lg betreffen die Bildschirmgrößen Ab dieser Bildschrimgröße soll das, was man da festlegt genommen werden. Ändert sich nichts zwischen xs und lg, braucht man nur eine Angabe für xs machen. das row-md ist für eine css Anweisung, die die dargestellte Größe des Bildes betrifft. row-xs-1 geht auf kleinen Bildschirmen (Handy) über die Höhe von einer Zeile, row-md-2 würde z.B. ab Tablet-Landscape-Größe die Höhe von 2 Zeilen einnehmen. Ohne diese Angabe hatte das Bild eine Höhe von 0 und wurde deshalb nicht angezeigt.