Möchten Sie eine CSS-Datei für eigene Style-Anpassungen in das OXID Flow-Theme integrieren? Nachfolgend zeige ich Ihnen wie einfach das umgesetzt werden kann.

Ich gehe davon aus, dass Sie bereits ein eigenes Child-Theme von OXID-Flow abgeleitet haben. Sollte Ihnen noch kein eigenes Theme vorliegen, so finden Sie in unserem Blog-Beitrag „OXID 4.10.0 – Theme „OXID-Flow“ anpassen / Child-Theme erstellen“ alle Infos um ein Child-Theme zu erstellen.

1. Eigene Less-Datei erstellen

Begeben Sie sich zu Ihrem lokalen Theme und öffnen sie das Verzeichnis [your-theme]/build/less.
Nun erstellen Sie ihre eigenen Style-Anpassungen in einer Less-Datei. Zum Beispiel „custom.less„.

2. Eigene Less-Datei einbinden

Damit ihre eigenen Style-Anweisungen müssen sie diese in der Datei „flow.less“ einbinden.
Fügen Sie am Ende des Dokuments eine Zeile mit folgendem Inhalt ein: @import „custom“
Falls Sie eine andere Bezeichnung für ihre Less-Datei gewählt haben, passen sie das entsprechend an.

3. Less-Dateien compilieren

Übersetzen Sie nun die LESS-Datein mit grunt und kopieren Sie die fertige CSS-Datei „out/flow/src/css/style.min.css“ in das entsprechende Template ihres Webservers. Das war es schon – für weitere Anpassungen sind sie nun gerüstet und diese können mit wenigen Handgriffen ausgeführt werden.