Eigene CSS-Datei in OXID Flow-Theme einbinden

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.

/**
 * This file is part of OXID eSales Flow theme.
 *
 * OXID eSales Flow theme is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * OXID eSales Flow theme is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with OXID eSales Flow theme.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @link      http://www.oxid-esales.com
 * @copyright (C) OXID eSales AG 2003-2016
 */

// Including 3rd party libs
@import "../vendor/bootstrap/less/bootstrap";
@import "../vendor/font-awesome/less/font-awesome";
@import "../vendor/bootstrap-select/less/bootstrap-select";
@import "../vendor/photoswipe/less/photoswipe";

// Theme related less files
@import "theme";
@import "responsive";
@import "variables";
@import "custom";

/**

* This file is part of OXID eSales Flow theme.

* OXID eSales Flow theme is free software: you can redistribute it and/or modify

* it under the terms of the GNU General Public License as published by

* the Free Software Foundation, either version 3 of the License, or

* (at your option) any later version.

* OXID eSales Flow theme is distributed in the hope that it will be useful,

* but WITHOUT ANY WARRANTY; without even the implied warranty of

* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

* GNU General Public License for more details.

* You should have received a copy of the GNU General Public License

* along with OXID eSales Flow theme. If not, see <http://www.gnu.org/licenses/>.

* @link http://www.oxid-esales.com

* @copyright (C) OXID eSales AG 2003-2016

// Including 3rd party libs

@import "../vendor/bootstrap/less/bootstrap";

@import "../vendor/font-awesome/less/font-awesome";

@import "../vendor/bootstrap-select/less/bootstrap-select";

@import "../vendor/photoswipe/less/photoswipe";

// Theme related less files

@import "theme";

@import "responsive";

@import "variables";

@import "custom";

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.