TEMPLATE: Bootstrap - freies responsive Template

[Dato]

ich habe die Änderungen gemacht wie in Antowrt 32 steht, steht jetzt stat thickbox jetzt contentbox.

hier die meine geänderte html Datei von Antwort #71

Die Bilder sind alle in Originaler grösse in den jeweiligen Ordner vorhanden.

Link zur Seite kann ich leider noch nicht geben wo das Template genutzt wird, weil noch alles Local mit Xampp.

[rogi]

@ Dato

du hast das Problem mit UTF 8 noch nicht behoben... siehe Fuß

[Karl1]

@ Dato

Was heisst Bilder in originaler Größe? Sind sie in der jeweils richtigen Größe vorhanden, also z.B. Thumbnails 120x80 und Popups 680x480?

Mit Quelltext meine ich den HTML-Quelltext. Die Datei die du angehängt hast erzeugt diesen Quelltext.
Mach im Browser einen Rechtsklick und klicke dann auf Seitenquelltext anzeigen (im IE Quellcode anzeigen).
Such die Stelle, die so aussieht

Code: Text  [Auswählen]

    <a class="thickbox" href="images/product_images/popup_images/154_1.jpg" title="Titel deines Bildes" rel="154">
    <img align="left" alt="Alt deines Bildes" src="images/product_images/thumbnail_images/154_1.jpg">
    </a>

und poste sie.
Karl

[Dato]

@ rogi
muß ich das trotzdem ändern obwohl der Shop nicht auf UTF 8 läuft ?

@ Karl1
das ist aus dem Quelltext der DetailInfo

Code: PHP  [Auswählen]

<!-- More Pictures -->
        <div class="morepics">
               
                      <a class="thickbox" rel="1" title="das ist ein artikel" href="images/product_images/popup_images/1_1.jpg">
                          <img align="left" src="images/product_images/info_images/1_1.jpg" alt="das ist ein artikel" /></a>                          
               
                      <a class="thickbox" rel="1" title="das ist ein artikel" href="images/product_images/popup_images/1_2.jpg">
                          <img align="left" src="images/product_images/info_images/1_2.jpg" alt="das ist ein artikel" /></a>                          
                      </div>

[Karl1]

Hi Dato,
öffne die Dateien /templates/bootstrap/module/product_info/product_info_v1.html, sowie die product_info_tabs_v1.html und die product_info_x_accordion_v1.html mit einem Editor.
Ändere im Abschnitt "morepics" die Zeile

Code: PHP  [Auswählen]

    <img align="left" src="{$more_images_data.PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" />

in

Code: PHP  [Auswählen]

    <img align="left" src="{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"thumbnail_images"}" alt="{$PRODUCTS_NAME}" />

Dann sollte es funktionieren.
Gruß
Karl

[Dato]

Super,
das hat funktioniert.

Danke dafür.

Das selbe habe ich aber noch bei dem oberen Product Bild, jetzige Grösse 200x200 ist aber Original und im Backen auf 300x300.

wenn ich aus dem HTML das class="span3" rausnehme, ist das Bild zwar auf 300x300 aber es ist teilweise verrutscht ?

Code: PHP  [Auswählen]

  <div class="span3">                                          
{if $PRODUCTS_IMAGE!=''}
                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br />{#text_zoom#}{/if}</a>
        {/if}
  </div>

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

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

[Karl1]

Guten Morgen Dato,
das Bootstrap-Framework arbeitet mit einem Grid-System, das die verfügbare Breite des übergeordneten HTML-Elementes in 12 Teile unterteilt.
Man gibt z.B. dem linken Element die Klasse class="span3", dann bleiben für das rechte Element noch class="span9" übrig. Die verfügbare Breite wird im Verhältnis 3/9 aufgeteilt.
Entfernst du den span3 wird nicht erkannt, wie breit das Element sein soll und es dehnt sich so weit es kann aus.

Willst du also den linken Teil vergößern gib im span4, gleichzeitig musst du aber dem rechten Teil weniger Platz, also span8, zuweisen.

Gruß
Karl

[Dato]

Hallo,
ich hoffe ich hab es richtig verstanden.

so sieht es zur Zeit bei mir aus
aus span=3 habe ich span=5 und aus span=8 habe ich span=6 gemacht.

Damit ich sehe was wo passiert habe ich mal die Hintergrundfarbe geändert die natürlich wieder rauskommt.

Jedenfalls ist das Produktbild  jetzt 300x300 Groß.

span=5 ist Grün, span=6 ist Blau

HTML

Code: PHP  [Auswählen]

  <div class="span5">                                          
{if $PRODUCTS_IMAGE!=''}
                <a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" />{if $PRODUCTS_POPUP_LINK!=''}<br />{#text_zoom#}{/if}</a>
        {/if}
  </div>
        <div id="productinfoprice" class="span6 offset1">
                <p class="productprice"><strong>{$PRODUCTS_PRICE}</strong></p>
                <p class="taxandshippinginfo" style="white-space:nowrap">{$PRODUCTS_TAX_INFO}{if $PRODUCTS_SHIPPING_LINK}{$PRODUCTS_SHIPPING_LINK|replace:'thickbox':'contentbox'|replace:'&amp;KeepThis=true&amp;TB_iframe=true&amp;height=400&amp;width=600':''}{/if}</p>
                {if $SHIPPING_NAME}<p class="shippingtime"><strong>{#text_shippingtime#}</strong>{if $SHIPPING_IMAGE}<img src="{$SHIPPING_IMAGE}" alt="{$SHIPPING_NAME}" />{/if} {$SHIPPING_NAME}</p>{/if}
                {if $PRODUCTS_VPE}<p class="bottom-line"></p>{$PRODUCTS_VPE}{/if}
                {if $MODULE_graduated_price !=''}<p class="bottom-line"></p>{$MODULE_graduated_price}{/if}
                {if $PRODUCTS_DISCOUNT!=''}<p class="bottom-line"></p>{$PRODUCTS_DISCOUNT}{/if}
                {if $PRODUCTS_FSK18=='true'}<p class="bottom-line"></p><img src="{$tpl_path}img/fsk18.gif" alt="" style="cursor:default" />{/if}
                {if $PRODUCTS_EXPIRES}<p class="taxandshippinginfo">{#text_expires_date#} {$PRODUCTS_EXPIRES}</p>{/if}
                {if $PRODUCTS_MODEL!=''}<p class="bottom-line"></p><p><strong>{#model#}</strong> {$PRODUCTS_MODEL}</p>{/if}
                {if $PRODUCTS_URL != ''}<p class="bottom-line"></p><p>{$PRODUCTS_URL}</p>{/if}
                {if $KLARNA_PPBOX}{$KLARNA_PPBOX}{/if}
                <p class="bottom-line"></p>
                {$PRODUCTS_PRINT}
                {if $PRODUCTS_DATE_AVIABLE != ''}<p>{$PRODUCTS_DATE_AVIABLE}</p>{/if}
    <hr>
        </div>

Hoffentlich ist das richtig.
 

[Karl1]

@ Dato:
Hast du richtig gemacht!
Ich sehe, da ist auch noch der "offset1" mit dabei, von dem ich dir nichts erzählt habe.

"span5" "span6 offset1" bedeutet:
Die verfügbare Breite wird in 12 Teile geteilt. Erster Teil wird 5/12 breit. Zweiter Teil wird 6/12 breit, vor diesem Teil wird 1/12 Leerraum gelassen.

Du kannst mal ausprobierst, "span5" und "span7" (also offset1 weglassen), was dann passiert.

Gruß Karl

[Dato]

Karl1,
ich muß auch nicht alles Wissen 

hier mal die Screens mit und ohne offset1

Nicht Wundern das das die Adtributte direkt unter der Artikelnummer ist, das habe ich gemacht.

[Karl1]

Ja genau,
und wenn du mehr wissen möchtest, dann kannst du hier http://getbootstrap.com/2.3.2/index.html nachlesen.

Gruß Karl

[Fubu]

Hallo,
wenn ich z.B. die buttons ädern möchte nach folgendes schema
http://getbootstrap.com/2.3.2/base-css.html#buttons
wo muß ich das machen ?

Einige Buttons sollen eine andere Farbe bekommen z.B. In den Warenkorb, oder Produkt bearbeiten oder Admin.

[Karl1]

Hi Fubu,
in der Datei inc/xtc_image_button.inc.php kannst du zusätzliche Klassen zuweisen.

Ich hab das dort kurz beschrieben.

Gruß Karl

[Fubu]

Danke Karl1.
Ist ja einfach mit den Butons.

kurze Frage noch wenn ich jetzt eine andere Farbe haben möchte die nicht in den Beispiel vorhanden ist
z.B.

Code: CSS  [Auswählen]

btn btn-test

was muß ich denn dann alles hinzufügen in der bootstrap.css. ?

[miheha]

Hallo Fubu,

wenn du wie Karl beschrieben hat dem Button eine weitere Klasse z.B. mein-btn zugeordnet hast, kannst du diese natürlich über dein .css ansprechen.

Das muss nicht unbedingt in die bootstrap.css. (und wenn dann aber als letztes eintragen, sonst wirkt es nicht )

Ich meine es ist sogar besser die nicht anzufassen und eine eigene .css im Header einzubinden. Diese natürlich nach der bootstrap.css. Damit "überschreibst" du dann auch dortige Attribute.

Die Button Hintergrundfarbe ist glaube ich über

  

Code: PHP  [Auswählen]

background-color: #F5F5F5;
background-image: linear-gradient(to bottom, #111111, #FFFFFF);

bestimmt.

Ich hoffe das hilft dir weiter.

Gruß
Mike