LESS individuell in Warp7

Autor: Christian Hamberger, Kategorie: Warp 7, uikit, Widgetkit, Erstellt am: 16.10.2015, Bearbeitet: 22.11.2015, Aufrufe: 2806

Das Schöne an Warp7 ist, dass man LESS individualisieren kann. Statt eine Custom CSS baut man sich eine Custom LESS Datei, die CSS Befehle beherrscht und darüber hinaus natürlich LESS. Diese Anleitung ist für Joomla Systeme gedacht.

Wie legt man eine eigene LESS Datei an?

Duplizieren den Ordner /less und nenne ihn /less-custom.

Nun muss der Pfad in der config.php (Template Ordner) angepasst werden.

   'less'    => array(__DIR__.'/less'),

>>> wird zu

   'less'    => array(__DIR__.'/less-custom'),

Der komplette Dateiinhalt in der /less-custom/theme.less wird nun gelöscht und durch die folgende Zeile ersetzt:
```
@import "../less/theme.less";
```
Der komplette Dateiinhalt in der /less-custom/bootstrap.less wird nun gelöscht und durch die folgende Zeile ersetzt:
```
@import "../less/bootstrap.less";
```
Aufgrund des Importes (Schritt 3) sind im Verzeichnis /less-custom UIkit und Bootstrap nicht mehr nötig. Daher werden die Verzeichnisse gelöscht:
```
/less-custom/uikit
```
```
/less-custom/bootstrap
```
Nun kann man mit seinem individuellen LESS-Code in der Datei /less-custom/theme.less verwenden.

Troubleshooting

Änderungen haben keine Auswirkung
LESS muss kompiliert werden damit die Änderungen im Frontend Auswirkungen haben. Dies macht man wie folgt:
```
   Erweiterungen > Template > Stile > Dein Template   >>>   Compile LESS
```
Tipp: Hier kann man auch einstellen, dass bei jedem Seitenaufruf LESS automatisch kompiliert wird. In der Entwicklungsphase ist die Option sehr hilfreich.

Quellen:

Less Customization, Yootheme

Frage 66786, Yootheme Forum