Das Bootstrap-Design bietet jede Menge Einstellungsmöglichkeiten. Was Sie beachten sollten, wenn Sie beginnen mit dem Design zu arbeiten und welche Optionen wie genutzt werden, wird Ihnen auf dieser Seite erklärt.

Falls eine bestimmte erweiterte Eigenschaft näher erklärt werden soll, können Sie gerne weiter unten einen Kommentar hinterlassen.


Neuerungen in der Version 9

In Version 9 können Sie nun die Farben der Navigationsleiste nach Ihren Wünschen gestalten, deshalb wurde die erweiterte Eigenschaft „Menü invertieren“ aus dem Design und in den *.css-Dateien entfernt. Beachten Sie bitte, dass in der Grundkonfiguration des Designs „Menüfarben aus Farbeinstellungen verwenden (statt Vorgabe)“ auf Nein voreingestellt ist, die von Ihnen angegeben Farben werden jedoch nur verwendet wenn diese erweiterte Eigenschaft auf Ja gestellt wird.

Weitere Neuerungen im Design und Siquando Web- oder Shop 9 sind die responsiven Absätze, Siquando lässt sie meist „Touch“ beginnen. Das Design verwendet dafür die integrierte Lightbox „Magnific Popup“.

Bei diesen neuen Plugins empfehlen wir Ihnen eine der neuen Absatz-Eigenschaften des Designs „Extra Abstand unten“ zu verwenden, da ansonsten das darunterleigende Element direkt am Plugin kleben würde und das „Float “ nicht zurückgesetzt werden würde.

Konfiguration der Farben

LESSCSS-Logo
hier wurde lesscss.js ausführlich dokumentiert

Um das Design so flexibel wie möglich gestalten und Anpassungen mit relativ wenig Quelltext erzeugen zu können wird in diesem Design LESSCSS verwendet. Für Endanwender ergeben sich dadurch wenige zusätzliche Schritte bevor das Design hochgeladen werden sollte. Zur Erstellung der Datei style.css wird dafür lessphp von leaf corcoran verwendet.

Ein großer Vorteil ist auch dass die erstellte Datei minimiert wird, so reduziert sich die Anzahl und Größe der zu veröffentlichen Dateien. Dadurch wird der Seitenaufbau Ihrer Webseite beschleunigt, worüber sich nicht nur Ihre Besucher sondern auch Google freuen wird.

Während Sie Ihre Seite umstellen, also Farben und Positionierungen noch geändert werden, oder Sie mit deren Werten spielen, empfehlen wir Ihnen die LESS-Einstellung „Cache per lessc.php generieren (ohne Content-Output)“ zu wählen. Nur bei Änderungen wird dabei die Datei style.css.cache neugeneriert.

Wie diese Datei erstellt wird erfahren Sie nun.

Schritt 1: Datei-Erweiterung auf php einstellen

Überprüfen Sie bitte ob unter Datei Website- und FTP-Eigenschaften HTML-Optionen bei Erweiterung für HTML-Seiten „php” angegeben ist, falls nicht tragen Sie dort bitte „php“ ein.

Schritt 2: Konfiguration der Farben und Schrift

Nachdem Sie die Farben im Dialog Design auswählen | Farbpaletten gewählt haben, können Sie zusätzlich die Schrift unter Datei | Website- und FTP-Eigenschaften | Erweitert im Bereich Schriften konfigurieren.

Schritt 3: die Datei style.css speichern

Nachdem Sie die Einstellungen für das Template vorgenommen haben klicken Sie nun erneut auf Datei | Website- und FTP-Eigenschaften | Erweitert und wählen im Bereich Design | Less-Version auswählen und wählen dort mit lessc.php minimierte Datei erstellen und als Download anbieten .

Erstellen Sie nun eine Vorschau der Seite und speichern Sie die Datei style.css . In welchem Ordner diese Datei gespeichert werden muss ist im Dialog beschrieben. Beachten Sie bitte auch die weiteren Hinweise. Sollten Sie Probleme mit den Zugriffsrechten haben und die Datei nicht speichern können beachten Sie bitte unsere Anleitung „fehlende Zugriffsrechte “.

Schritt 4: erstellte Stylesheet-Datei verwenden

Unter Datei | Website- und FTP-Eigenschaften | Erweitert klicken Sie wieder in Kategorie Design auf Less-Version auswählen und wählen dort „in Web 9/designs/Bootstrap gespeicherte style.css verwenden“.

Fertig!!! Ihre Seite kann nun erstellt und veröffentlicht werden.


die ersten Schritte nach der Installation

Auswahl der Eyecatcher Erstellung

Pro Hauptseite beziehungsweise Warengruppe stehen Ihnen 7 verschiedene Möglichkeiten zur Erstellung des Eyecatchers zur Verfügung. Die verschiedenen Einstellungen dafür werden Ihnen nun erklärt.

Screenshot der Logo Auswahlmöglichkeiten

Logoeigenschaften

Auswahl des Eyecatcher-Typs pro Hauptseite oder Warengruppe
  • nur Farbverlauf (mit H1) anzeigen
  • nur Logo anzeigen
  • Google Map als Eyecatcher
  • Slideshow Einstellungen der Website & FTP-Eigenschaften verwenden
  • Hauptseiten durchlaufen
  • Hauptseiteneigenschaften verwenden
  • kein Logo anzeigen

responsive Slideshow (pro Seite oder global)

In den globalen Seiteneigenschaften finden Sie Einstellungen die für 3 Erstellungsstrategien gelten. Sicherlich finden Sie durch probieren schnell heraus, welche Einstellung was bewirkt, zumal die verschiedenen Eigenschaften sinnvoll benannt wurden. Die verschiedenen Erstellungsmöglichkeiten für die Slideshow werden Ihnen hier detailliert erklärt. Das Bootstrap-Template bietet jedoch zusätzlich weitere Eyecatchervarianten:

Google Map als Eyecatcher

Für zum Beispiel Kontaktseiten ist diese Eigenschaft ideal. In den globalen Seiteneigenschaften finden Sie dafür folgende Einstellungsmöglichkeiten:

  1. Adresse (zum Beispiel: Frommhagenstraße 52, Stendal)
  2. API-Key: unter Google Maps Api Key erstellen haben wir Ihnen beschrieben wie Sie einen API-Schlüssel für die Google Karte anfordern und warum diese Schritte notwendig sind.
  3. Typ: TERRAIN, HYBRID, SATELLITE, ROADMAP
  4. Zoomfaktor (2 bis 14)
  5. maximale Höhe (Angabe in Pixel)

nur Farbverlauf (mit H1) anzeigen

Bei dieser Einstellung wird anstatt eines Logos ein Farbverlauf von links nach rechts angezeigt. Die Überschrift erster Ordnung wird dabei innerhalb des Headers angezeigt, außerdem kann ein Lead-Text vergeben werden (auf dieser Seite wäre das: „... das responsive Design für web to date 8.0“). Sie können zusätzlich ein PNG-Bild wählen, welches sich horizontol sowie vertikal wiederholt. Die Einstellungen dafür finden Sie unter Datei, Website- und FTP-Eigenschaften, Erweitert unter der Kategorie Eyecatcher (Farbverlauf-Einstellungen).
Bitte beachten Sie dass das PNG-Bild als Download angelegt und per Link auf Download verknüpft werden muss.

nur Logo anzeigen

Auch hier können Sie pro Hauptseite per erweiterter Eigenschaft ein Bild (gif oder jpeg) wählen. Die entsprechende Eigenschaft 1.0 Eyecatcherbild finden Sie in der Kategorie globale Slideshow oder Eyecatcher.


Eyecatcher und Slideshow per Video erklärt

Font Awesome ist eine der beliebtesten kostenlosen Icon-Fonts und das Bootstrap 3 Template beinhaltet das Iconset.

Mit Font Awesome erhalten Sie über 580 Icons, die Sie in Ihre Webseite einbauen und per BB-Code einfach anpassen können. Das Set ist unendlich und verlustfrei skalierbar und benötigt im Vergleich zu bildbasierten Lösungen deutlich weniger Kilobyte.

Font-Awesome 4.6 Icons in Listen

Das Template spendiert dem Absatztyp „Aufzählung” zusätzlich 2 erweiterte Eigenschaften .

1. Auswahl des Listen-Icons

Diese Eigenschaft hat gegenüber der Eigenschaft „Auswahl des Listenstils” Vorrang. Hier kann jedes Icon der Version 4.6 verwendet werden. Auf der Seite fortawesome.github.io/Font-Awesome/icons finden Sie ein Übersicht. Möchten Sie zum Beispiel das Symbol fa-gift verwenden, so geben Sie bei der Eigenschaft gift ein. Beachten Sie dass das fa- wegfällt.

2. Auswahl des Listenstils

Ist kein spezielles Icon angegeben wird diese Eigenschaft genutzt. Sie haben die Wahl zwischen Aufzählung mit Häkchen (fa-check), Aufzählung mit einem Stopzeichen (fa-minus-square), normale ungeordnete Liste oder echte Aufzählung, welche eine nummerierte Liste anzeigt.

Font-Icons bei Download-Dateien und Links

Erstellen Sie einen Link werden automatisch bestimmte icons verwendet. Sicherlich sind Ihnen die verschiedenen Links auf web2date-designs.de aufgefallen.
Ein interner Seitenlink verwendet das Symbol fa-share-square, ein externer Link das Icon fa-link, eine Bildverlinkung nutzt fa-picture-o und standardmäßig verwendet ein Download das Icon fa-download.

Zusätzlich kann aber jedem Download ein eigenes Icon zugewiesen werden. Wir haben hier [7 KB] das Touch-Icon für Smartphones und Tablets mit dem Font-Icon fa-file-text-o verlinkt.

BB-Code für die Icons

Auf unsere Seiten sehen Sie die Icons auch in Menüs oder im Footertext, dafür verwenden wir BB-Code .

Ein tolles Anwendungsbespiel wäre eine Verlinkung eines Facebook-Icons in zweifacher Größe.

Zur Anzeige des Facebook-Icons wurde innerhalb des BB-Codes facebook-square fa-2x eingetragen.
Für wiederrum wurde youtube fa-4x angegeben.

Navigation in der linken- oder rechten Kontextspalte

Es gibt verschiedene Methoden wie eine seitliche Navigation erstellt werden kann, per Aufmacher oder durch das Template generiert.

Zum einen per Aufmacher (nur mit Überschrift). Der Vorteil hier ist dass Sie selbst Produkte als Menüpunkt integrieren können. Außerdem definieren Sie selbst die Reihenfolge der verschiedenen Navigationspunkte. Erstellen Sie für diese Menüvariante einen Aufmacher in der Kontextspalte . Als Stil wählen Sie bitte „Überschrift”. Zusätzlich müssen Sie in den erweiterten Eigenschaften des Sidebar-Absatzes den Punkt „als Menü anzeigen” auf ja stellen.

Die zweite Variante ist eine automatische Generierung des Menüs durch das Design. Natürlich haben Sie hier durch verschiedene Einstellungen Einfluss auf die Erstellung. Sie können dabei in den erweiterten Eigenschaften der kompletten Seite wählen ob das automatisch generierte Menü in der linke oder rechten Kontextspalte dargestellt werden soll. Als Nutzer des responsiven Templates beachten Sie bitte die globalen erweiterte Eigenschaften „Menü in der linken oder rechten Sidebar” im Bereich „Design (Menü)”. Zusätzlich können Sie pro Hauptseite bzw. Warengruppe wählen, welche Ebenen und ob das Menü auf dieser Seite angezeigt werden soll. Weiterhin können Sie dort angegeben ob die momentan ausgewählte Seite generell in der Kontextspalten-Navigation aufgenommen oder ob sie nicht dargestellt werden soll.

Video-Anleitung - PNG-Logo und Touch-Icon einfügen


Thomas K. schrieb am 09.01.2017 um 10:26

Neben dem Update für Vertika 9 wurde auch eine aktualisierte Version (v1.1.1) des Bootstrap 9 Designs im Kundenkonto (unter Downloads) bereitgestellt. Die nachfolgenden Änderungen sind vorhanden:
  • neue Eigenschaft: Eingabe & Auswahlfelder (Shopbereiche): Hintergrundfarbe
  • neue Eigenschaft: Eingabe & Auswahlfelder (Shopbereiche): Rahmenfarbe
  • neue Eigenschaft: Eingabe & Auswahlfelder (Shopbereiche): Schriftfarbe
  • neue Eigenschaft: Menü Sidebar / Hintergrundfarbe wenn aktiv
  • Änderungen für das KARO-Feedbackformular (neue Eigenschaft: Captcha als Popover anzeigen, config-Datei für das Feedbackformular für Siquando Web und Shop)
  • Fehlerbehebung: fetter Schriftstil bei Google-Schriften in bestimmten Browsern
  • Fehlerbehebung: falsche Hintergrundfarbe beim Dropdown auf schmalen Bildschirmen (Smartphones)
  • Fehlerbehebung: delicious-Icons funktionierten nicht mehr korrekt
  • Shop: Login per Modal ist nun auch wieder per Kundennummer möglich

Thomas K. schrieb am 08.07.2016 um 09:20

Die aktuelle Version im Benutzerkonto des Bootstrap 3 Designs für Siquando 8 ist nun 1.0.11.
Was wurde geändert?
  • Datumsanzeige im deutschen Format
  • neue erweiterte Eigenschaft: Google-Map Api-Key
  • Aktualisierung des GMAP3 Plugin auf Version 6.1.0
  • der Google Maps Typ war auskommentiert, so dass bei die Änderung des Typs in der erweiterten Eigenschaft keinen Einfluß hatte
  • Siquando Shop 8: das Warenkorb-PopUp zeigt nun auch Produkte auf dem Merkzettel an
  • Siquando Shop 8: SSL-Abfrage für den Aufruf des Warenkrob-PopUps hinzugefügt
  • Siquando Shop 8: Fehler auf der Produktseite bei Variantenauswahl in Verbindung mit verschiedenen Verfügbarkeiten behoben
Sollten Sie bisher keinen API-Schlüssel beantragt haben folgen Sie bitte den Schritten der Anleitung Google Maps Api Key erstellen.

Thomas K. schrieb am 19.01.2016 um 12:25

Heute, am 19.01.2016, wurde die Version 1.0.10 des Bootstrap 3 Designs im Kundenkonto unter Downloads zur Verfügung gestellt. Es enthält die nachstehenden Änderungen:
  • Aktualisierung auf Font Awesome 4.4.0
  • Anpassung auf Siquando Shop 8.0 Build 2719 (bei älteren Versionen von Siquando Shop 8 können daher Fehlermeldungen aufgrund von fehlenden Dateien erscheinen)
  • neue Eigenschaft: Weiterleitung nach „Registrieren” oder „Passwort vergessen” Klick
  • neue Eigenschaft: Überschriften verlinken
  • Auslagerung von JS aus der navigation.ccml
  • kleinere Fehlerkorrekturen

Thomas K. schrieb am 13.11.2015 um 08:43

Am 21.09.2015 wurde Version 1.0.9 mit den nachfolgenden Änderungen bereitgestellt:
  • Änderung der Hinweis-Box-Klasse im Benutzerbereich von alert alert-success (grün) auf alert alert-info (blau)
  • name-Attribut bei der Angabe der Firma bei der Lieferadresse korrigiert
  • Änderung der Übergabe-Parameter für Postfinance/Yellowpay auf der Zahlung erfolgreich - Seite
  • eigene Kundendatenformular-Felder wurden nur im Benutzerkonto und nicht während einer Neuregistrierung angezeigt
  • Umleitung bei einer Registrierung über das Login-Modal auf die Startseite um dopplete Eingabe der Benutzerdaten zu verhindern
  • Fehler auf der Produktseite beim Nichtsetzen des Häkchens Lieferstatus (im Bereich Shop Extras) behoben
  • eigene Linkangabe für das Google-Plus-Icon ist nun möglich
  • margin links oder rechts bei Spaltendarstellung von Textabsätzen hinzugefügt
  • falsche alt-Tag Angabe (bzw. fehlerhafte Interpretation) in Kontextspalten korrigiert

Thomas K. schrieb am 12.06.2015 um 16:30

Am 10.06.2015 wurde im Downloadbereich für Kunden des responsiven Bootstrap 3 Web/Shop 8 Designs Version 1.0.8 bereitgestellt:
  • dunkle Box im Inhaltsbereich steht nun auch zur Auswahl bereit
  • Fehlerbehebung: clearfix Bug beim gesplitteten Aufmacher
  • feste Breite von 1140px beim normalen Eyecatcher entfernt

Thomas K. schrieb am 12.06.2015 um 16:23

Änderungen in Version 1.0.7
  • charset Attribut geändert auf meta charset=windows-1252
  • smoothHeight im Inhaltsslider entfernt
  • Anpassung der Style-Anweisung für selektierten Text
  • BBCode für youtube Videos mit width und height hinzugefügt
  • Fehler behoben: keine Ausgabe der Links im Slider-Loop

Thomas K. schrieb am 23.02.2015 um 10:32

Die aktuelle Version 1.0.6 vom 20.02.2015 enthält neben Anpassungen für die Version 2711 die nachstehenden Änderungen:
  • neue erweiterte Eigenschaft: Script oder HTML vor schließendem Body-Tag (config.ccml & navigation.ccml)
  • neue erweiterte Slider-Eigenschaft: Slider auf kleinen Geräten (Smartphones) anzeigen (config.ccml & ccml/slider_header.ccml)
  • Benutzer-Icon (zur Anmeldung) anzeigen steht nun nur für das Bootstrap 3 Design zur Verfügung (und nicht für alle Designs)
  • Aktualisierung auf Font Awesome 4.3.0 (global.ccml & Fonts-Dateien)
  • index.php wird nun in der navigation.ccml automatisch aus dem kanonischen Link entfernt (SEO)
  • Teaser-Anpassungen: Entfernung des em Tags / Originalpreis in Aufmachern
  • paragraph_form.ccml: Anpassung der Captcha-Darstellung und Behebung eines Checkbox-Problemes (benötigte Checkbox wurde nicht akzeptiert)
  • bbcode.php: neben dem BBCode für [ icon = ...][ / icon ] (ohne Leerzeichen) kann nun auch [fa = ...][ / fa ] verwendet werden um Zeichen zu sparen
  • Hintergrundfarbe der Magnific-Lightbox bei iFrames von schwarz zu weiß geändert

Thomas K. schrieb am 24.11.2014 um 17:23

Die Version 1.0.5 enthält neben Änderungen für Siquando Shop 8 Version 2706 gegenüber der Vorversion zusätzliche Einstellungsmöglichkeiten und als neues Feature HTML5 Audio Player für Hintergrundmusik. Folgende Dateien wurden geändert:
  • zusätzliche Eigenschaft Ausblenden des User-Icons (notwendig wenn keine Benutzerkonten angelegt werden können)
  • product.tpl (Bilder von Kombinationsprodukten mit wenig Text wurden eingerückt und die Texteingabe bei Varianten ist nun nicht mehr möglich)
  • navigation.ccml (GoogleAnalytics Code Anpassung und HTML5 Audio Control)
  • link.ccml (Link-Ereignis-Tracking hinzugefügt)
  • paragraph_form.ccml (Placeholder IE-Fix)
  • paragraph_table.ccml (Tabellen mit 3 Spalten werden mit 33.3333% Breite dargestellt, so daß alle Bilder in gleicher Breite erscheinen)

Thomas K. schrieb am 03.09.2014 um 12:31

Und wieder ist die Zeit reif für ein weiteres Update auf Version 1.0.4, Grund dafür ist hauptsächlich das Update für SIQUANDO Shop Version 2699. Die aktualisierte Version ist im Kundenbereich unter Downloads zu finden. Für Version 1.0.4 wurden Änderungen in den folgenden Dateien vorgenommen:
  • \bs3shoptpl\basket.modal.tpl
  • \bs3shoptpl\basket.put.js
  • \bs3shoptpl\basket.tpl
  • \bs3shoptpl\quick.tpl
  • \bs3shoptpl\summary.tpl
  • \navigation.ccml
  • \style.css
  • \style.less
Änderungen die nicht für das Siquando Update vorgenommen wurden sind:
  • Anpassung des Quickcheckouts für Shop to Date 8.0 und 8s
  • HTML-Code einbetten wird nun oberhalb von <body> eingefügt
  • Anpassung des zur Kasse Links im Warenkorb-PopUp

Andreas W schrieb am 21.08.2014 um 22:16  | Website

Einfach der Wahnsinn!!!

Volker W. schrieb am 09.08.2014 um 14:59  | Website

Gefällt mir! :-)

Thomas K. schrieb am 09.08.2014 um 10:52

Am 08.08.2014 wurde Version 1.0.3 im Download-Bereich für Kunden bereitgestellt. Neben kleinerer Bug-Fixes und den folgenden Änderungen hat die Installationsdatei nun auch ein Zertifikat erhalten. Vielen Dank dafür Volker (Administrator des w2d-s2d-Siquando-Forums)!
  • Links in Kontextsspalten erhalten nun auch, wie im Inhaltsbereich Icons (abhängig von der Art des Links) zugewiesen
  • wird ein Aufmacher in Spalter geteilt, richtet sich nun jede Elementzeile an dem höhesten Elemente der vorherigen Spalte aus. Ein Beispiel und weitere Informationen zu dem aufgeteiltem Aufmacher finden Sie hier.
  • hinzugefügte globale Eigenschaft: Bilder in Tabellen skalieren
Übrigens Sie unter dem Reiter PNG-Logo und Touch-Icon hier auf dieser Seite eine weitere Videoanleitung.

Thomas K. schrieb am 02.07.2014 um 17:17  | Website

Das Design und die Anleitungsseite wurde vor wenigen Minuten aktualisiert. Die Installationsroutine von Volker W. wurde aktualisiert, so dass trotz verschiedener Shop-Template-Dateien lediglich eine Installation durchgeführt werden muss. Vielen Dank dafür!!!

Des Weiteren wurden kleinere Anpassungen für die Share-Icons, dem einzelnen Logo, (wenn keine volle Browserbreite genutzt wird) und dem angepassten Feedback-Formular vorgenommen.

Thomas K. schrieb am 12.06.2014 um 15:52  | Website

Am 11.06.2014 wurde die Version 1.0.1 als Download mit Anpassungen für das neue Widerrufsrecht (für das SIQUANDO Design) bereitgestellt. Weitere Änderungen sind:
  • Update von Font Awesome auf Version 4.1
  • zusätzliche Darstellung von Social-Share-Icons an verschiedenen Positionsmöglichkeiten, zur Icon-Auswahl stehen: Delicious, Digg, Facebook, GooglePlus, Reddit, Stumpleupon und Twitter
  • der Fehler dass das Benutzer-Icon auf Smartphones nicht klickbar ist wurde behoben
  • Bilder in Tabellen erhalten nun den CSS-Wert width: 100%;, damit sie klein-skaliert werden

Thomas K. schrieb am 27.05.2014 um 17:24  | Website

Neben Tipps zum Design werden wir auf dieser Seite zusätzliche Infos zum Design hinterlassen, falls nachträglich Änderungen vorgenommen wurde. Um den Versionsstand einfacher nachvollziehen zu können wurde dem Design ein weiteres Objekt layoutVersion hinzugefügt.

Folgende Änderungen sind in Version 1.0.0 eingefloßen:
  • Objekt layoutVersion hinzugefügt. Eine Ausgabe der Versionnummer kann durch Einfügen des Codes <cc:print value=&layoutVersion> in einem HTML-Absatz erfolgen.
  • Anpassung des Meta Tags generator für SIQUANDO & DB Versionen
  • kleine Änderungen in der Datei css/flexslider.css für die Slideshow im Content-Bereich
  • neue erweiterte Eigenschaft für Hauptseiten Seite verwendet Web to Date Slider? um die Funktion des Web to Date Sliders zu gewährleisten. Da dieser aber nicht responsiv ist empfehlen wir die integrierte Topic-Slideshow zu nutzen