Less ist eine Programmiersprache, mit deren Hilfe man eine CSS-Datei erstellen kann. Auf der Website selbst kommt Less nicht zum Einsatz, sondern nur das Ergebnis, also die erzeugte CSS-Datei. Diese CSS-Datei unterscheidet sich nicht von jeder anderen, herkömmlichen CSS-Datei.
Shopversionen
OXID eShop CE/PE 4.8. bis 4.10.
Modulinstallation
- Entpacken der ZIP-Datei
- Den Inhalt des darin enthaltenen copy_this-Ordners kopieren Sie bitte im binären Modus in das Hauptverzeichnis des Shops (das Verzeichnis, in dem die Datei config.inc.php zu finden ist).
- Im Shopadmin unter Erweiterungen/Module aktivieren Sie bitte das neue Modul.
- Im Register Einstellungen können Sie das Modul bei Bedarf konfigurieren.
Modulupdate von älterer Modulversion
- Deaktivieren des vorhandenen Moduls im Shopadmin unter Erweiterungen/Module.
- Löschen des alten Modulordners ( /modules/ecs/lessphp4oxid) aus dem Shopverzeichnis ggf vorher sichern.
- Fortfahren mit der Modulinstallation.
Fehler: Modul kann nicht aktiviert werden
Falls sich ein Modul nach dem Update nicht mehr aktivieren lässt, können Sie mit folgenden SQL Statement die evtl. durcheinander geratenen Moduleinträge in der Datenbank resetten.
Nach vorangegangener Datenbank-Sicherung auszuführen unter Service/Tools/SQL ausführen:
DELETE FROM `oxconfig` WHERE `OXVARNAME` LIKE '%module%'
Bitte beachten Sie, dass nach dem Reset alle Module in der Modulverwaltung deaktivert sind und ggf. wieder aktivert werden müssen.
Bedienungsanleitung
lessPHP4OXID einrichten:
Nach der Modulinstallation können Sie in der linken Shopadmin-Navigation lessphp4OXID öffnen.
Unter Ausgabepfad der CSS-Datei können Sie entweder einen eigenen Pfad (ab Shoproot, zB. /out/flow/src/css/myflow.css) eintragen oder durch Betätigung des „nach unten-Pfeils“ am rechten Rand des Textfeldes aus einen vorgegebenen Auswahl wählen. Als Vorgabe sind die passenden Pfade für das OXID Theme Flow, Roxive und für das eComTheme verfügbar.
Sie können, wenn Sie den Pfad für Flow ausgewählt haben, den Dateinamen der CSS-Datei ändern in zB mystyle.css.
Bitte beachten: Ist das Feld bereits mit Text gefüllt, bietet das Dropdownmenue keine weiteren Alternativen mehr an. Löschen Sie den Text aus dem Textfeld, stehen im Dropdownmenue wieder alle Alternativen zur Wahl.
Less-Datei anpassen / Farben ändern:
Im grossen Textfeld finden Sie die virtuelle Less-Datei bzw. deren Inhalt.
Die Datei flow.less ist im Standard die höchste Datei im Flow-Theme, die alle weiteren Dateien importiert.
Deshalb sollte zunächst die flow.less importiert werden mit @import "/application/views/flow/build/less/flow"; und anschliessend die eigenen Änderungen angefügt werden.
Folgender Beispielinhalt eignet sich für Flow:
@import "/application/views/flow/build/less/flow";
@brand-primary: #009EC0; //Shop Grundfarbe 1
@brand-secondary: #FC6621; //Shop Grundfarbe 2
.st0{fill: @brand-primary!important;} //Farbe Einkaufstasche = Shop Grundfarbe 1
Sie können die Grundfarben einfach durch andere Farbcodes ersetzen, es werden dann alle gleichen davon abhängigen Farb-Styles in der CSS-Datei angepasst.
Sie können aus anderen less-Dateien einzelne Variablen oder Styles in Ihre eigene Datei kopieren und anpasssen, Sie können aber auch einfach normale CSS-Eigenschaften in die Datei schreiben.
Tipp: Wenn Sie das gesamte Textfeld leeren und speichern, wird automatisch wieder der Beispielinhalt eingefügt.
Less-Datei kompilieren:
Nachdem Sie Ihre Einstellungen getätigt haben, klicken Sie auf Speichern. Nun wird eine (ggf. minimierte) CSS-Datei erzeugt, die alle Styles für den Shop erhält.
Sofern Sie die entsprechende Checkbox aktiviert haben, wird die neue CSS-Datei automatisch im Theme eingesetzt, die neues Styles sind direkt im Shop sichtbar. bei aktivierter Checkbox wird diese CSS Datei immer bevorzugt verwendet.
Sollte die neue Datei nicht generiert werden können und eine Fehlermeldung im Popup erscheinen, prüfen Sie bitte die Schreibrechte des Ordners, in den die Datei geschrieben werden soll.
Fehler melden oder sonstige Fragen
Bitte werfen Sie zunächst einen Blick in unsere Online-FAQ oder nutzen Sie bitte bevorzugt unser kostenloses Ticketsystem.
Selbstverständlich erreichen Sie uns auch jederzeit per Email oder Telefon: Kontakt
Bitte beachten: Im OXID eSales-Forum gibt es keinen Support für unsere Produkte!
Lizenzinformationen
Copyright (C) Josef A. Puckl | eComStyle.de
All rights reserved – Alle Rechte vorbehalten
This commercial product must be properly licensed before being used!
Dieses kommerzielle Produkt muss vor der Verwendung ordnungsgemäß lizenziert werden!
Sonstige Wünsche
Sehr gerne sind wir Ihnen bei allen Aufgaben rund um Ihren Onlineshop behilflich!
Fragen Sie bitte jederzeit einfach an: Kontakt