TEMPLATE: Bootstrap3 für Shop 2.0 - freies responsive Template

[hpzeller]

Nachtrag:

Ich denke es ist besser die Codesequenz aus Antwort #777 in der Datei templates/bootstrap3/module/checkout_shipping_block.html mit dieser Codesequenz zu ersetzen.

Code: XML  [Auswählen]

                                {foreach name=inner item=method_data from=$module_data.methods}
                                <div class="panel panel-default">
                                        <div class="panel-heading" role="tab" id="acc{$smarty.foreach.outer.iteration}{$smarty.foreach.inner.iteration}" style="padding:0;">
                                                <h4 class="panel-title">
                                                        <span role="button" data-toggle="collapse" data-parent="#accordion" data-target="#acc_{$smarty.foreach.outer.iteration}{$smarty.foreach.inner.iteration}" aria-expanded="true" aria-controls="acc_{$smarty.foreach.outer.iteration}{$smarty.foreach.inner.iteration}" style="padding:10px 15px;display:block;">
                                                                <span class="radio" style="margin:0;">
                                                                        <label style="width:100%;">
                                                        {$method_data.radio_field}
                                                                                {$module_data.module}
                                                                                <span class="more-less glyphicon glyphicon-triangle-top text-muted pull-right"></span>
                                                                                <span class="pull-right">{$method_data.price}&nbsp;&nbsp;</span>
                                                                        </label>
                                                                </span>
                                                        </span>
                                                </h4>
                                        </div>
                                        <div id="acc_{$smarty.foreach.outer.iteration}{$smarty.foreach.inner.iteration}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="acc{$smarty.foreach.outer.iteration}{$smarty.foreach.inner.iteration}">
                                                <div class="panel-body">
                                                        <div>{$module_data.icon} {$method_data.title}</div>
                                                </div>
                                        </div>
                                </div>
                        {/foreach}
 

Gruss
Hanspeter

[Karl1]

Hallo Zusammen,
da ist tatsächlich ein Fehler in der Datei  templates/bootstrap3/module/checkout_shipping_block.html.

Ich hab den Vorschlag von Hanspeter (Danke!) mit einer kleinen Änderung eingearbeitet, wird im nächsten Paket enthalten sein - hier schon mal die Datei im Anhang.

Einfach die ZIP entpacken und die Datei in den Ordner templates/bootstrap3/module/ kopieren - alte Datei überschreiben.

Gruß Karl

[noise]

Super vielen Dank an euch beide 

gleich mal testen....

Edit: perfekt 

[Bornemann]

Moin zusammen,

ich nutze auch das og Template und bin äußerst zufrieden ( Shop 2.0.4.2)

Hoffe jemand kann mir auf folgende Frage eine gescheite Antwort geben. Wie bekomme ich im Footer eine vierte Spalte hin.
Würde dort gerne so was wie Telefonnummer und Servicezeiten hinterlegen.

Grüßle und schönen Sonntag

Ralf

[hpzeller]

Der Footer hat doch bereits vier Spalten, siehe Bild, eine fünfte Spalte anzufügen ist, das das Bootstrap3 Template von Karl auf einem zwölfspaltigen Raster aufbaut, sehr schwierig.

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

Wenn dein Shop nur einsprachig ist, dann ist wohl die schnellste Methode die zusätzliche Information direkt im Template in der Datei templates/bootstrap3/index.html einzufügen.

Beispiel:
folgende Codesequenz

Code: XML  [Auswählen]

        {* BEGINN FOOTER *}
        <div id="layout_footer" class="container-fluid navbar-{$smarty.const.FOOTER_NAVBAR}">
                <div class="container">
                        <div id="layout_footer_inner" class="row">
                                {if isset($box_CONTENT)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_CONTENT} </div>{/if}
                                {if isset($box_INFORMATION)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_INFORMATION} </div>{/if}
                                {* Setzt die Floats der SM-Spalten zurück, falls ihr Inhalt nicht gleich hoch ist *}
                                <div class="clearfix visible-sm-block"></div>
                                {if isset($box_MISCELLANEOUS)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_MISCELLANEOUS} </div>{/if}
                                {if isset($box_NEWSLETTER)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_NEWSLETTER} </div>{/if}
                        </div>
                </div>
                <div class="mod_copyright text-muted text-center small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div>
        </div>
        {* ENDE FOOTER *}
 

mit dieser ersetzen.

Code: XML  [Auswählen]

        {* BEGINN FOOTER *}
        <div id="layout_footer" class="container-fluid navbar-{$smarty.const.FOOTER_NAVBAR}">
                <div class="container">
                        <div id="layout_footer_inner" class="row">
                                {if isset($box_CONTENT)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_CONTENT} </div>{/if}
                                {if isset($box_INFORMATION)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_INFORMATION} </div>{/if}
                                {* Setzt die Floats der SM-Spalten zurück, falls ihr Inhalt nicht gleich hoch ist *}
                                <div class="clearfix visible-sm-block"></div>
                                {if isset($box_MISCELLANEOUS)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_MISCELLANEOUS} </div>{/if}
                                {if isset($box_NEWSLETTER)}<div class="col-md-3 col-sm-6 col-xs-12">{$box_NEWSLETTER}
          <div class="box">
                <div class="box-heading navbar-brand">Servicezeiten</div>
                <p class="box_sub text-muted small">Unsere Servicezeiten:</p>
                <p class="box_sub text-muted small">Montag - Freitag von bis</p>
          </div>
        </div>{/if}
                        </div>
                </div>
                <div class="mod_copyright text-muted text-center small">{$smarty.const.TITLE} &copy; {$smarty.now|date_format:"%Y"} | Template &copy; {$smarty.now|date_format:"%Y"} by Karl</div>
        </div>
        {* ENDE FOOTER *}
 

Das Ergebnis sollte dann etwa so aussehen wie im obigen Bild.

Gruss
Hanspeter

[Bornemann]

Lieben Dank Hans Peter das hat mir ein wenig geholfen.

Wie kann ich hier die Schriftfarbe ändern. Hellgrau auf Dunkelgrau ( ist Zustand) ist nicht gerade sehr gut lesbar.

[Bornemann]

Lieben Dank Hans Peter das hat mir ein wenig geholfen.

Wie kann ich hier die Schriftfarbe ändern. Hellgrau auf Dunkelgrau ( ist Zustand) ist nicht gerade sehr gut lesbar.

Vergesst es, hab es. " Erst denken dann schreiben"

[modse]

[...]
Hab in einem 2.0.2.2 testshop mal eine db von einem anderen 2.0.2.2 shop mit dem tpl_modified_responsive template eingespielt.

- der cookiehinweis kommt bei jedem seitenwechsel und lässt sich nicht anklicken, da er sich hinter der Kundengruppe versteckt
[...]

Kann ich nicht nachvollziehen, der Cookiehinweis sieht bei mir mit Theme "cosmo" so aus.

(Dateianhang Link)

Beim Cookiehinweis sehe ich aber ein anderes Problem und zwar dass er auch dann angezeigt wird wenn der Browser des Shopbesuchers gar keine Cookies zulässt, dann kann der Besucher nämlich den Hinweis nicht wegklicken aber ein Cookie wird ja auch nicht gesetzt, deshalb mein Vorschlag.

In '/templates/bootstrap3/javascript/general_bottom.js.php' ca. Zeile 77 nach folgendem Code

Code: PHP  [Auswählen]

 
        <?php if (!isset($_COOKIE['eucookie'])): ?>
        // EU-Cookie
 

diesen Code einfügen

Code: PHP  [Auswählen]

   
      if (!navigator.cookieEnabled) {
        $("#eucookielaw").remove();
      }
 

[...]
-was mir persönlich fehlt, ist, dass man den footer und die div class="top nav navbar-default" nur gleichzeitig farblich anpassen kann, oder gibt es da eine Möglichkeit die farblich verschieden zu gestalten?
[...]

Ein bisschen kann man hier auf einfache weise die Farbe wie folgt ändern.
In '/templates/bootstrap3/config/config.php' ab ca. Zeile 157 bei folgenden Codes

Code: PHP  [Auswählen]

define('TOP1_NAVBAR', 'inverse'); define('TOP2_NAVBAR', 'default'); define('FOOTER_NAVBAR', 'inverse');

kann man jeweils zwischen den Varianten "inverse" und "default" wählen, damit ändert sich auch die Farbe.

Gruss
Hanspeter

Ich möchte gerne die top "nav navbar-default" richtig anpassen können, nicht Default und Invert, sondern durch eigene Farbe ersetzen, wo kann ich Default und Invert festlegen?
Danke..

[Karl1]

Hallo modse,
wenn die Komprimierung ausgeschaltet ist, dann erkennt man auch wo die Farben der Navbar herkommen.
Die Farben kommen aus der CSS-Datei des Themes, bei "flatly" ist das die Datei templates/bootstrap3/css/bootstrap/flatly.min.css.

Der CSS-Selector heißt ".navbar-default" oder ".navbar-inverse".

Am einfachsten ist es, in der stylesheet.css die Anweisungen zu überschreiben- z.B.

Code: CSS  [Auswählen]

.navbar-default {
    background-color: red;
}

Dadurch wird die Topnavigation und der Footer rot.

Mit einem zusätzlichen CSS-Selector kann man jeden Bereich einzeln ansprechen, also z.B.

Code: CSS  [Auswählen]

.top.navbar-default {
    background-color: red;
}

für die Topnavigation.

Gruß Karl

[modse]

Danke Karl, das war der richtige Ansatz den ich suchte und auch jetzt fand.
Wenn man einen bestehenden Shop hat ist es nämlich verdammt wichtig seinen Wiedererkennungswert zu pflegen. In dem Grau, aber ich in dem Grün wars leider unmöglich das umzusetzen.
Finde es ein sehr gelungenes Template und möchte es dadurch einsetzen, sehr gut einfach!

[modse]

Jetzt wollte ich meine Navbar in die Farbe #4B7ACA ändern, bleibt aber weis ok was auch ganz gut ankommt, nun würde ich die grüne Schrift (#18BC9C) zu meinen blauton ändern .. vermutlich wieder in der flatly.min.css versteckt, finde nur wieder nichts.

Sorry bin kein Profi wie ich feststelle...

[hpzeller]

Hallo modse,

es gibt in diesem Thread viele Beiträge die das Thema Stylebearbeitung behandeln du musst nur ein bisschen suchen. Wenn du speziell die Datei  flatly.min.css bearbeiten möchtest hätte ich dir folgenden Tipp, nimm deine flatly.min.css und lasse sie hier -> http://www.unminify.org durch, danach kannst du sie viel leichter editieren und auch testen, wenn du fertig bist kannst du sie z.B. hier -> https://cssminifier.com durchlassen, um wieder eine minimierte CSS-Datei zu erhalten.

Die Entwicklertools welche alle modernen Webbrowser haben kennst du ja, nehme ich an, mit diesen findest du die Selektoren und Styleigenschften die du in deinem Shop bearbeiten willst ja leicht.

Gruss
Hanspeter

[modse]

bin jetzt schon ordentlich weiter gekommen bei meiner Farbanpassung, nur mit den Footer Boxer habe ich noch ein Problem

der Text in #ffffff wird im Hover zu #4B7ACA, hätte gerne den Text in #ffffff schon vorab in anderen Farbe, so dass er meinetwegen von #15A589 im Hover zu #4B7ACA wechselt.

Das mit aufschlüsseln der komprimierten Datei hat prima geklappt, danke hpzeller!

[hpzeller]

Die Textfarbe kannst du in templates/bootstrap3/css/bootstrap/flatly.min.css an folgender Stelle ändern, aber Vorsicht, dadurch ändert sich ev. auch die Textfarbe an anderen Stellen.

Code: CSS  [Auswählen]

.navbar-default .navbar-brand {
 color:#ffffff
}
 

Gruss
Hanspeter

[modse]

Hallo Hanspeter,

du bist mir eine echte Hilfe.
stehe wieder vorm nächsten Problem, früher hatte ich in einen anderen Template "unsere Top-Artikel" einfach auskommentiert. Hier im Bootstrap funktioniert mir das nicht. Nein ich möchte "unsere Top-Artikel" unterhalb des Startseiten Content weg haben. Ich verzweifle, an den Template ist wirklich alles anders als ich erwartet habe - vielleicht hab ich mir zuviel vorgenommen

vg Christian