Um bequem zwischen den 15 verschiedenen, fertigen Designvorlagen für das eComStyle.de Responsive Theme zu wechseln und um die Themeeinstellungen komfortabel vorzunehmen, liegt das Modul Designswitcher dem Theme gratis bei.
lessPHP 4 OXID
In der neuen Version 2.0 wurde das Modul um lessPHP 4 OXID erweitert und bietet damit die Möglichkeit, Less-Dateien online im Shop zu kompilieren und so individuelle, fertige CSS-Dateien per Mausklick zu erstellen.
Sie können so Ihren Shop mit geringsten Aufwand und ohne Programmierkenntnisse weitgehend optisch anpassen.
Die neu erstellte oder aktualisierte CSS-Datei kann das Modul dann automatisch im eComStyle.de Responsive Theme einsetzen, damit Sie Ihre Anpassungen live überprüfen und die neue Datei ohne weiteren Aufwand direkt beibehalten und im eComStyle.de Responsive Theme nutzen können.
Was kann alles verändert werden?
Hier ein (unvollständiger) Auszug der Einstellmöglichkeiten in der Datei variables.less:
- Grundfarben und Farbabstufungen
- Hintergrund-Farben
- Schriftarten und Größen (Überschriften, Text,…)
- Abstände der Elemente zueinander
- Tabellenfarben, Buttonfarben, Formularfarben, Farben der Dropdowns, Paneel-Farben
- Umbruchpunkte (Breakpoints) für verschiedene Displaytypen/-breiten
- Gridsytem (Anzahl Spalten), Containergrößen
- Navigationsbar: Farben, Breakpoint
- und viele weitere…
Sie können all diese (und viele weitere) Variablen in der übersichtlich gestalteten Datei variables.less anpassen. Jede Variable muss bei Bedarf nur noch an einer Stelle einmalig geändert werden. Less setzt diese Variable dann automatisch an jeder erforderlichen Stelle in der neuen CSS-Datei ein.
Was kann lessPHP 4 OXID noch?
Im Modul sind alle erforderlich Dateien, perfekt abgestimmt auf das eComStyle.de Responsive Theme, enthalten, damit Sie direkt loslegen können. Sie benötigen keine zusätzlichen Dateien.
Eigene CSS-Dateien integrieren:
Möchten Sie eigene Styles dem Theme hinzufügen, können Sie jetzt einfach eine neue Datei erstellen und Ihre Styles in diese schreiben. Die neue Datei können Sie einfach in der bootstrap.less importieren (ein Bespiel ist bereits fertig integriert).
Die neue Datei mit Ihren Styles wird beim Kompilieren berücksichtigt und in die Shop-CSS-Datei integriert. Sie können Ihre Styles lesbar anordnen und müssen sich über Minimierung keine Gedanken machen – das übernimmt das Modul für Sie!
Sie erhalten nach dem Kompilieren eine maximal minimierte CSS-Datei für Ihren Shop, die alle erforderlichen Styles in einer einzigen Datei beinhaltet.
Mehrere CSS-Designs erstellen:
Pfade und Dateinamen sind bereits voreingestellt. Möchten Sie mehrere CSS-Dateien mit verschiedenen Designs anlegen, müssen Sie nur im Modul einen anderen Dateinamen der CSS-Datei angeben. Dann wird automatisch eine neue CSS-Datei angelegt und im Theme eingesetzt. Die alte CSS-Datei bleibt natürlich erhalten und kann bei Bedarf später wieder verwendet werden.
„Fremde“ Less-Dateien kompilieren:
Wenn Sie möchten, können Sie die Pfade zu den Less- und CSS-Dateien beliebig in den Moduleinstellungen ändern. Die Dateien können somit an einer beliebigen Stelle im Shopordner liegen. Sie können zB. so auch Less-Dateien für andere Themes, wie zB für das OXID Mobile Theme, bequem per Mausklick online kompilieren.
Auch OXID-Fremde Less-Dateien können kompiliert werden, Sie ersparen sich damit die Installation von Offline-Tools und haben Ihren Less-Compiler immer dabei! 😀
Dateigröße der neuen CSS-Datei:
Um eine möglichst geringe Dateigröße zu erreichen, ist standardmäßig die Option „compress“ aktiv. Dadurch wird mit dem Modul erzeugte CSS-Datei automatisch soweit wie möglich minimiert, d.h. es werden alle Umbrüche, Leerstellen, Kommentare, usw. entfernt. Die minimale Dateigröße wirkt sich positiv auf die Seitenladezeiten und den PageSpeed aus.
Wo ist das Modul erhältlich?
Das Modul Designswitcher mit integriertem lessPHP 4 OXID ist ausschließlich zusammen mit dem eComStyle.de Responsive Theme erhältlich und liegt diesem kostenfrei bei.
