Hallo ich habe eine Idee für meinen Shop, weiß aber nicht wie man das umsetzen könnte. Ich benutze den Full Width Slider Style. Nun würde ich gerne den Teaser Slider verkleinern d.h. die Breite auf z.B 1200px begrenzen. Daneben würde ich gerne zwei Bilder mit einem Link erstellen. Das ganze sollte so aussehen wie im Testshop 2 von Gambio (hab da mal das Bild mit angehängt. Wie könnte man das machen? Hat jemand eine Idee dazu? Vielen lieben Dank für eure Hilfe
Nur wenn du dich mit Usermod bzw. Block überladen und css auskennst, nimm die Honegrid/snippets/slider.html HTML: {block name="snippets_slider_if"} {if $slider} {block name="snippets_slider"} <div id="stage" data-gambio-widget="slider_flyover"> <div id="slider" data-gambio-widget="slider_responsive" data-slider_responsive-source="#json-serialized-slider" data-slider_responsive-effect="fade" data-slider_responsive-speed="600"> {$slider} </div> </div> {/block} {/if} {/block} und mache daraus: HTML: {block name="snippets_slider_if"} {if $slider} {block name="snippets_slider"} <div class="row"> <div class="col-xs-12 col-md-8"> <div id="stage" data-gambio-widget="slider_flyover"> <div id="slider" data-gambio-widget="slider_responsive" data-slider_responsive-source="#json-serialized-slider" data-slider_responsive-effect="fade" data-slider_responsive-speed="600"> {$slider} </div> </div> </div> <div class="col-xs-12 col-md-4"> <a class="bild-2" href="xxx.xxx"> <img alt="" class="img-responsive" src="dein/pfad/bild-2.jpg"> </a> </div> <div class="col-xs-12 col-md-4> <a class="bild-3" href="xxx.xxx"> <img alt="" class="img-responsive" src="dein/pfad/bild-3.jpg"> </a> </div> </div> {/block} {/if} {/block} habe das mal grob im Gambio-Testshop getestet. Einfach mal in deinem Testshop ausprobieren und anpassen.
Vielen Dank für deine Antwort. Naja so wirklich einen Plan von CSS, Block überladen? etc. habe ich noch nicht, versuche aber mein bestes. Ich probier es mal aus, evtl muss ich nochmal auf dich zukommen.
So auf den ersten Blick scheint es zu funktionieren. Möchte aber gerne auch den Code verstehen. Das mit den col hab ich verstanden, aber was bedeutet die row?
Einfach gesagt: Die erste <div class="row"> ist ist die Anweisung für die col's in der<div> Gruppe. Das space kann hier raus und (row-xs-2 row-md-1) kann auch entfernt werden, hat was mit dem Bewegen der Bilder beim drüberfahren zu tun (home-teaser aus dem Gambio Testshop2). Hatte deine Idee mit dem da einfach auf die schnelle zusammengefasst. Habe es in meinem obigen Beitrag entfernt, da es für dein Vorhaben nicht benötigt wird. Interessant, um Row und Bootstrap zu verstehen: http://holdirbootstrap.de/css/
Vielen Dank! Hab da schon mal angefangen zu lesen. Versuche nach und nach mir das anzueignen ist halt nicht ganz so einfach. Ich hab nur das Problem das der Abstand zwischen Bild und Teaser sehr groß ist. Hast du da eine Idee woran das liegen könnte? Vielen lieben Dank für deine Hilfe
Da wäre ein Link zu deinem Shop gut, um dir helfen zu können. Kannst du auch per Unterhaltung schicken.
Nein das mit dem Link wäre an sich kein Problem. Der Shop ist halt nur einfach offline geschaltet. Ich habe herausgefunden, das zwischen den Bildern und Teaser Slider ein Padding von 15px ist. Ich habe das mit dem Firefox mit Häckchen wegklicken auch wegbekommen, weiß nur nicht wohin mit dem Quelltext. Evtl. kannst du mir da nen Tipp geben! Vielen Dank das du so bemüht bist mir zu helfen!
Da bist du schon richtig, gib unter Firefox an der Stelle mal für padding: 0px ein und kopiere das. Dann gibst du das bei StyleEdit (Template bearbeiten) unter mein css ein.