Responsive Template für Modified

[Markus]

Hi Tim,

vereinfacht gesagt ist das dafür da die Bilder sauber im Container zu zentrieren.

Code: CSS  [Auswählen]

.pd_big_image:before {
  content: '';
  padding-top: 100%;
  display: block;
  overflow:hidden;
}

Das hier sorgt dafür, dass der container .big_image immer quadtratisch wird. Das liegt am padding-top von 100%. Würde ich das auf 50% setzen bekommst du einen Container im Seitenverhältniss 2:1 usw.

Code: CSS  [Auswählen]

.pd_big_image img {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 25%;
  max-height: 25%;
  font-size: 0;
  -webkit-transform: scale(4.0);
  -moz-transform: scale(4.0);
  -ms-transform: scale(4.0);
  -o-transform: scale(4.0);
  transform: scale(4.0);
}

Damit wird dann das eigentliche Bild innerhalb des Containers zentriert. Zuerst wird das Bild verkleinert und dann mit CSS wieder skaliert. Das hat den Vorteil, dass das Bild komplett zentriert wird ... unabhängig davon welche Größe da kommt. Ob Querformat oder Hochformat oder Quadratisch ... das Bild ist immer sauber zentriert. Da es komplett auf CSS Basis funktioniert hat es keinerlei Auswirkungen auf die Qulität vom Bild ausser das Bild ist an sich zu klein und wird "hochgezogen".

Wenn du generell immer quadratische Bilder nutzt brauchst du das nicht. Es ist also eine reine optische Sache und nicht zwingend notwendig. 

Markus

[Timm]

Danke dir für die ausführliche Antwort. Werde das dann versuchen komplett zu übernehmen. Sonst frag ich mich beim nächsten Update wieder warum ich das nicht mit drin hab. Muss nur nochmal schauen, warum ich für magiczoom die max-width auf 230px gesetzt hatte. Irgendwas war da.

Gruß und danke
Timm

[p3e]

Im Responsive Template 5 kann man (nur getestet unter Android 10 im Chrome Browser) weder die Sprache, noch die Währung wechseln.

[Tomcraft]

Das wird Markus sich bestimmt nochmal anschauen.

Grüße

Torsten

[JuergenS]

Hallo Markus,

mir ist im Responsive Template 6 noch etwas aufgefallen. Ich habe Dir ein Bild angehangen.
Kann man den Schnellkauf Link nicht unten neben den Merkzettel setzten, oder den "Direkt Paypal Button" ganz nach links setzten.

Das schaut irgendwie im Moment nicht so gut aus.

Könntest Du mir bitte sagen wo in welche Datei das geändert wird.
Dann muss ich nicht suchen. 

Vielen Dank.

Gruß
Jürgen

[Markus]

Hi p3e,

Im Responsive Template 5 kann man (nur getestet unter Android 10 im Chrome Browser) weder die Sprache, noch die Währung wechseln.

Danke für den Hinweis ... ist nun gefixt.

Markus

[Markus]

Hi Jürgen,

ja das sieht nicht so prickelnd aus ...

suche im Ordner /tpl_modified_responsive_6/module/product_info/ .... in allen 3 Dateien:

Code: PHP  [Auswählen]

              {if  (isset($ADD_CART_BUTTON_EXPRESS)) || $ACTIVATE_EXPRESS_LINK  || $ADD_CART_BUTTON_PAYPAL}
                <span class="addtobasket_row2 cf">
                  {if isset($ADD_CART_BUTTON_EXPRESS)}
                    <span class="addtobasket_row2_buttons"><span class="cssButtonPos10">{$ADD_CART_BUTTON_EXPRESS}</span></span>
                  {elseif $ACTIVATE_EXPRESS_LINK}
                    <span class="addtobasket_row2_buttons"><span class="express_info"><a href="{$ACTIVATE_EXPRESS_LINK}">{#checkout_express_activate#}</a></span></span>
                 {/if}
                  {if $ADD_CART_BUTTON_PAYPAL}
                    <span class="addtobasket_row2_buttons"><span class="cssButtonPos10">{$ADD_CART_BUTTON_PAYPAL}</span></span>
                  {/if}
                </span>
              {/if}

ersetze mit:

Code: PHP  [Auswählen]

              {if (isset($ADD_CART_BUTTON_EXPRESS)) || $ACTIVATE_EXPRESS_LINK  || $ADD_CART_BUTTON_PAYPAL}
                <span class="addtobasket_row2 cf">
                  {if isset($ADD_CART_BUTTON_EXPRESS)}
                    <span class="addtobasket_row2_buttons"><span class="cssButtonPos10">{$ADD_CART_BUTTON_EXPRESS}</span></span>
                  {/if}
                  {if $ADD_CART_BUTTON_PAYPAL}
                    <span class="addtobasket_row2_buttons"><span class="cssButtonPos10">{$ADD_CART_BUTTON_PAYPAL}</span></span>
                  {/if}
                </span>
                {if $ACTIVATE_EXPRESS_LINK}
                  <span class="addtobasket_row3 cf">
                    <span class="express_info"><a href="{$ACTIVATE_EXPRESS_LINK}">{#checkout_express_activate#}</a></span>
                 </span>
                {/if}
              {/if}

suche in der stylesheet.css

Code: CSS  [Auswählen]

.express_info {
  display:inline-block;
  text-align:right;
  line-height:12px;
  font-size:10px;
  padding:0px 0px 0 0;
  white-space:nowrap;
}

ersetze mit:

Code: CSS  [Auswählen]

.addtobasket_row3 {
  padding: 8px 0 0 0;
  display:block;
}
.express_info {
  display:block;
  text-align:right;
  line-height:12px;
  font-size:10px;
  padding:0px 0px 0 0;
  white-space:nowrap;
}

Dann sollte es passen.

Markus

[JuergenS]

Hallo Markus,

danke schön. Passt perfekt unter dem Paypal Link.

Gruß
Jürgen

[Timm]

@Markus
Mir ist in meinem 2.0.5.0 Testshop aufgefallen, dass man auf der checkout_payment die Radiobuttons extrem sieht beim laden der Seite. Als wenn erst die Radiobuttons und dann die Felder wo sie drin sind geladen werden. Beim nachladen kann man das gut beobachten. Das tritt scheinbar extremer auf wenn man Paypal aktiviert hat. Und scheint bei langsamerer Internetverbindung oder Serververbindung stärker zu sein. Auf der checkout_shipping tritt es auch auf, aber wesentlich dezenter. Deshalb nehme ich an, dass es etwas mit der extern geladenen PayPal Plus Auswahl zu tun hat.

Gestern war es so krass, dass ich es sogar geschafft habe einen Screenshot davon zu erstellen.

Vielleicht kann man das noch optimieren.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Gruß Timm

[Markus]

Hi Timm,

Ändere mal bitte die stylesheet.css

suche:

Code: CSS  [Auswählen]

/* START No Javascript Styles for Tabs */  
/* Moved in general.css.php as inline-style */
/*
ul.resp-tabs-list{
  display:none;
}
*/
/* END No Javascript Styles for Tabs */

ersetze mit:

Code: CSS  [Auswählen]

/* START No Javascript Styles for Tabs */  
ul.resp-tabs-list{
  display:none;
}
/* END No Javascript Styles for Tabs */

Markus

[Timm]

Leider keine Veränderung. Aber behindert sich das nicht gegenseitig wenn in der automatisch eingebundenen Datei jquery.easyTabs.css folgendes steht?

Code: CSS  [Auswählen]

ul.resp-tabs-list {
  margin: 0px !important;
  padding: 0px;
  display:block;
}
.resp-tabs-list li {
  font-weight:bold;
  font-size: 13px;
  display: inline-block;
  padding: 13px 10px;
  margin: 0;
  list-style: none;
  cursor: pointer;
  float: left;
}

Gruß Timm

[Markus]

Hi Timm,

ich muss mir das genauer anschauen.

Das hier ...

Code: CSS  [Auswählen]

ul.resp-tabs-list {
  margin: 0px !important;
  padding: 0px;
  display:block;
}

macht eigentlich keinen Sinn, da die ul-Liste ja durch javascript ersetzt wird. Es sei denn javascript ist nicht aktiv ... dann würde hier ein Fallback zünden. Das muss ich mir aber genauer anschauen und testen.  Wenn ich jetzt mal von aktivem Javascript ausgehe sollte da dann eher ein display:none stehen damit eben nicht zuerst die Liste "aufblitzt".

Markus

[Markus]

Hi Timm,

mach die Änderungen in der stylesheet.css mal bitte wieder rückgängig und füge dafür ziemlich weit oben nach

Code: CSS  [Auswählen]

* {
  margin:0;
  padding:0;
}

das hier ein:

Code: CSS  [Auswählen]

ul.resp-tabs-list{
  display:none !important;
}

Dann sollte es eigentlich kein aufblitzen mehr geben.

Das wäre jetzt erstmal die einfachste Art das ganze zu unterbinden. Man könnte das auch in der css der Tabs machen. Die wird allerdings erst im Footer geladen weshalb es dann natürlich wieder kurz "aufblitzen" würde.  Auf die noscript-Anzeige hat das ganze keinerlei Auswirkungen. .

Markus

[Timm]

Das hat funktioniert. TOP

Wird die Lösung so bleiben, oder war das nur ein Test?

Gruß Timm

[Markus]

Hi Timm,

es wird so bleiben
Alles andere hätte inline-Style Angaben in den Templatedateien wo Tabs benutzt werden zur Folge ... und das wären dann schon einige.

Markus