TEMPLATE: Bootstrap - freies responsive Template

[Tomcraft]

Im angefügten ZIP-Archiv ist eine Installationsanleitung und eine kurze Beschreibung enthalten.

In welcher ZIP Datei ?

Das aktualisierte Template ist jetzt wieder in Beitrag 1 verfügbar.

Grüße

Torsten

[Dato]

Danke fürs anhängen.

[cayuco]

Hallo Karl,
also nochmals Danke für Dein Template. Habe es mal auf einen 1.06 (letzte Version aufgespielt - sieht gut aus.
Bin noch nicht weiter eingetaucht, aber was mir schnell auffiel ist, dass der Header-Bereich (Top-Logo, Links, waagerechten Kategorien, Breadcrumb, sowie der Slider) ober halb der eigentlichen Inhalte ist. Habe im Firefox die css ausgeschalten. Ich glaube goggle mag es wenn man ihm die Inhalte zuerst anbietet.
Hatte einmal so ein Template - ist leider bei Crash verloren gegangen.

Die meisten Kunden sind es gewohnt, dass Boxen links sind - aber das kann man ignorieren.

[Karl1]

Hallo cayuco,
warum CSS ausschalten und wie Inhalt vorher anbieten?

Eine Möglichkeit wäre vielleicht HTML5 besser zu nutzen und den Hauptbereich <section> im Template weiter zu unterteilen.

Wenn man die Semantik von W3schools (http://www.w3schools.com/html/html5_semantic_elements.asp) beachtet, könnten die Breadcrumbs noch in eine <nav>, Bilderslider und Banner in <figure>, der Content in <article> und alle rechten Boxen in ein <aside>-Tag gepackt werden.

Alle aktuellen Browser, sowie der IE ab dem IE9 verstehen HTML5 also sollte auch Google damit zufrieden sein.

Die Boxen könnte man auch links anordnen und mit Bootstrap abhängig von der Bildschirmbreite des Benutzers wechseln. Nur besucht ein Desktopuser den Shop mit einem Smartphone, sollte die Anordnung der Elemente doch entsprechend der Großansicht sein.

[Matt]

warum CSS ausschalten und wie Inhalt vorher anbieten?

Das was cayuco meint wäre das ganze SEO-Gebrabbel auf die Spitze zu treiben. Das ist absolut nicht sinnvoll, auch im Hinblick auf User mit Screenreadern o.ä., selbst wenn man das mit Flexbox sicherlich hinbekommen würde.

Wenn man die Semantik von W3schools

W3Schools sollte man nie als Referenz verwenden, mehr zu Thema: http://www.w3fools.com/

Alle aktuellen Browser, sowie der IE ab dem IE9 verstehen HTML5 also sollte auch Google damit zufrieden sein.

Alle Browser verstehen HTML5. Für alte IEs gibt es einen funktionierenden Polyfill, es gibt keinen Grund, nicht HTML5 zu nutzen.

Nur besucht ein Desktopuser den Shop mit einem Smartphone, sollte die Anordnung der Elemente doch entsprechend der Großansicht sein.

Ich hab's mir mangels Onlinedemo nicht anschauen können, aber spätestens bei Telefonauflösungen sollte man eine lineare Darstellungsform wählen.

[Karl1]

Sorry, aber mir ist schon wieder ein Fehler aufgefallen!

Bei Aufruf der Sitemap werden alle rechten Boxen nach links verschoben, das liegt daran, dass ich eine veränderte sitemap.php verwende, die auch alle Artikel mit anzeigt.

Wer meine Sitemap nutzen möchte kann die angehängte sitemap.php einfach in den Ordner /media/content/ kopieren - vielleicht vorher die "alte" Datei umbenennen in sitemap-original.php.
In der Datei /lang/german/lang_german.conf im Bereich [sitemap] nach heading_sitemap (Zeile 16) einfügen

Code: [Auswählen]

heading_content = 'Informationen' (Überschrift für Contentseiten).
Dann sollte auch die neue Sitemap richtig angezeigt werden.

Wer die Sitemap wie bisher nutzen möchte, es werden nur die Kategorien gelistet, muss im Ordner /templates/bootstrap/module/ die Datei sitemap.html umbenennen oder löschen und die Datei sitemap-original.html umbennenen in sitemap.html.

Gruß Karl

[olli0578]

Wow. Da hat sich aber jemand richtig Mühe gegeben. Das war bestimmt eine menge Arbeit.
Ich habe mir das Template gerade mal in meinen Testshop eingebaut. Sieht richtig klasse aus.

Einen Fehler habe ich gerade entdeckt:
Wenn die Bildschirmauflösung zwischen 980 und 1199 liegt,
verschwindet das obere Dropdownmenü hinter dem Header.

Edit: Ursache--> Das Topmenü verschiebt sich ab einer Fensterbreite von 1199px unter das Shoplogo und dadurch wird der Header insgesamt höher und überlagert die Kategorienavigation.

[Karl1]

Hallo olli0578,
danke für deine Mitteilung.

Abhilfe: in der Datei /templates/bootstrap/index.html die Einträge ab Zeile 5 ändern in:

Code: Text  [Auswählen]

        <div class="container">
          <a class="brand" href="{$index}"><img src="{$tpl_path}img/logo.png" class="img-responsive" alt="{$store_name}" /></a>
            <ul class="nav pull-right">
              <li{if strstr ($smarty.server.PHP_SELF, 'index') && ($smarty.get.cPath==null)} class="active"{/if}><a href="{$index}">{#link_index#}</a></li>
              {if $account}<li><a href="{$account}">{#link_account#}</a></li>{/if}
              {if $smarty.session.customers_status.customers_status_id == '1'}<li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>{/if}
              {if $smarty.session.customer_id}<li><a href="{$logoff}">{#link_logoff#}</a></li>{else}<li><a href="{$login}">{#link_login#}</a></li>{/if}
              <li><a href="{$cart}">{#link_cart#}</a></li>
              <li><a href="{$checkout}">{#link_checkout#}</a></li>
            </ul>
            <ul class="nav pull-right" style="clear:right;">
              {$box_LANGUAGES}
            </ul>
        </div>
 

Die Devider fallen weg und die Languagebox wird nach unten gesetzt, damit ist ausreichend Platz.

Alternativ zum Inlinstyle beim letzten ul-Tag könnte eine Klasse vergeben werden und die stylesheet.css verändert werden.

Gruß Karl

[jannemann]

Hallo Karl1,

auch von meiner Seite ein herzliches Dankeschön fürs Teilen! 
Das Template sieht nach einer Menge Arbeit aus und ich finde ich klasse, dass du es mit der Community teilst

Schöne Grüße,
Jan

[olli0578]

Im Topmenü ist die klasse active mit einem schwarzen Hintergrund versehen.
Sieht irgendwie unhübsch aus.
Vorschlag von meiner Seite:

\templates\bootstrap\css\bootstramp.css

Suche:

Code: CSS  [Auswählen]

.navbar-inverse .nav .active>a,.navbar-inverse .nav .active>a:hover,.navbar-inverse .nav .active>a:focus{color:#fff;background-color:#111}
 

Ersetze in:

Code: CSS  [Auswählen]

.navbar-inverse .nav .active>a,.navbar-inverse .nav .active>a:hover,.navbar-inverse .nav .active>a:focus{color:#fff}
 

Suche:

Code: CSS  [Auswählen]

.navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{color:#555;text-decoration:none;background-color:#e5e5e5;-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,.125);box-shadow:inset 0 3px 8px rgba(0,0,0,.125)}
 

Ersetzen durch:

Code: CSS  [Auswählen]

.navbar .nav>.active>a,.navbar .nav>.active>a:hover,.navbar .nav>.active>a:focus{color:#555;text-decoration:none;-webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,.125);-moz-box-shadow:inset 0 3px 8px rgba(0,0,0,.125);box-shadow:inset 0 3px 8px rgba(0,0,0,.125)}
 

Für die anderen Menüpunkte im Topmenü wird übrigens die Klasse active überhaupt nicht ausgegeben.

Gruß Olli

[thomas57]

Hallo Karl,
habe mir Dein Template gerade einmal heruntergelden und installiert, schaut vielversprechend und echt klasse aus. 
Vielen Dank für Dein Template, das sicherlich einiges an Arbeit beinhaltet.
Werde jetzt erst einmal das ganze testen und dann weiteres Feedback geben. Bisher schaut alles prima aus.
Gruß aus dem Norden von
Thomas 

[olli0578]

Irgendetwas stimmt mit der Ausgabe des Superfish Menüs scheinbar nicht. Ich hatte mich gewundert, warum nur die ersten fünf Hauptkategorien angezeigt werden. Dann habe ich mir den Ausgabecode mal genauer angeschaut und festgestellt, dass dort Zeit schließende tags fehlen. Ich habs unten im Code mal eingefügt und kommentiert.

Das ist der Code, der ausgegeben wird:

Code: PHP  [Auswählen]

<div class="nav-collapse collapse navbar-responsive-collapse">
  <ul class="nav">
    <li class="dropdown men "><a href="http://meine.tld/index.php?cPath=59" class="dropdown-toggle">Testkategorie 1 <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li class="men"><a href="http://meine.tld/index.php?cPath=59_65">Testkategorie 1.1</a></li>
        <li class="dropdown-submenu men "><a href="http://meine.tld/index.php?cPath=59_60" class="dropdown-toggle">Testkategorie 1.2 </a>
          <ul class="dropdown-menu">
            <li class="men"><a href="http://meine.tld/index.php?cPath=59_60_61">Testkategorie 1.2.1</a></li>
            <li class="men"><a href="http://meine.tld/index.php?cPath=59_60_62">Testkategorie 1.2.2</a></li>
            <li class="men"><a href="http://meine.tld/index.php?cPath=59_60_63">Testkategorie 1.2.3</a></li>
          </ul>
        </li>
        <li class="men"><a href="http://meine.tld/index.php?cPath=59_64">Testkategorie 1.3</a></li>
      </ul>
    </li> <!-- Hier fehlt das schließende li-->                               
  </ul> <!-- Hier fehlt das schließende ul-->                 
</div><!-- /.nav-collapse -->
 

[Karl1]

Hallo Olli hab leider erst jetzt wieder Zeit dir zu antworten.
Erstmal danke, dass du so fleißig testest.

Zum Menü oben rechts:
Ich habe absichtlich das Standard CSS von Bootstrap verwendet, da Farben usw. ja Geschmackssache sind. Einzige Änderung die vom Standard abweicht sind die von mir gewählten Schriftgrößen.
Wenn dich nur eine Kleinigkeit stört kannst du bootstrap.css direkt ändern, sind dir aber alle Außenabstände zu groß, oder die H1-Schrift zu klein - hol dir die Core-Dateien von getbootstrap.com und WinLess.

Das "active" garnicht ausgegeben wird ist mir bisher garnicht aufgefallen. Auch der Modified Demoshop macht das nicht.
Ich sehe hierfür zwei Möglichkeiten. Javascript einsetzen, oder mit Modified-Hausmitteln arbeiten.

Ich habe in der /templates/bootstrap/index.html Smarty-Abfragen in das Menü eingebaut und es funktioniert.
Hier der Code für das obere Menü (ab Zeile 7):

Code: Text  [Auswählen]

            <ul class="nav pull-right">
              <li{if strstr ($smarty.server.PHP_SELF, 'index') && ($smarty.get.cPath==null)} class="active"{/if}><a href="{$index}">{#link_index#}</a></li>
              {if $account}<li{if strstr ($smarty.server.PHP_SELF, 'account') && !strstr ($smarty.server.PHP_SELF, 'create_account')} class="active"{/if}><a href="{$account}">{#link_account#}</a></li>{/if}
              {if $smarty.session.customers_status.customers_status_id == '1'}<li{if strstr ($smarty.server.PHP_SELF, 'create_account')} class="active"{/if}><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>{/if}
              {if $smarty.session.customer_id}<li{if strstr ($smarty.server.PHP_SELF, 'logoff')} class="active"{/if}><a href="{$logoff}">{#link_logoff#}</a></li>{else}<li{if strstr ($smarty.server.PHP_SELF, 'login')} class="active"{/if}><a href="{$login}">{#link_login#}</a></li>{/if}
              <li{if strstr ($smarty.server.PHP_SELF, 'cart')} class="active"{/if}><a href="{$cart}">{#link_cart#}</a></li>
              <li{if strstr ($smarty.server.PHP_SELF, 'checkout')} class="active"{/if}><a href="{$checkout}">{#link_checkout#}</a></li>
            </ul>
            <ul class="nav pull-right" style="clear:right;">
              {$box_LANGUAGES}
            </ul>
 

Könnte auch bei anderen Templates genutzt werden.

Zum Superfish-Menü:
Du hast recht, da fehlen Tags. Das Problem tritt anscheinend nur auf, wenn ich nur eine Topkategorie habe.
Hier muss ich dich noch vertrösten. Muss mir den PHP-Code nochmal genauer anschauen.

Gruß Karl

[Karl1]

Hallo Olli,
den Fehler im Superfish-Menü habe ich gefunden und korrigiert.

Es lag an /template/bootstrap/source/boxes/categories_superfish.php. Ich hänge die Datei hier an.

Es muss aber auch noch die /template/bootstrap/index.html angepasst werden.
Suche:

Code: XML  [Auswählen]

      <ul class="nav">
       {$box_CATEGORIES_SUPERFISH}
      </ul>

Ersetze:

Code: XML  [Auswählen]

       {$box_CATEGORIES_SUPERFISH}

Die UL-Tags müssen gelöscht werden, die werden in der PHP-Datei erzeugt.

Für alle die neu dabei sind nochmal ein aktuelles ZIP-Archiv.
Vielleicht kann ein Moderator den Beitrag 1 korrigieren.

Gruß Karl

[EDIT Tomcraft 17.01.2014: Template in Beitrag 1 aktualisiert.]

[cyanx]

Hallo Karl
Das Temp sieht sehr aufgereumt und Klar auf dem Bild aus, werde es demnächst testen.
Danke fürs Teilen.