LESS individuell in Warp7

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

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?

  1.  Duplizieren den Ordner /less und nenne ihn /less-custom.
  2.  Nun muss der Pfad in der config.php (Template Ordner) angepasst werden.
       'less'    => array(__DIR__.'/less'),

          >>> wird zu 

       'less'    => array(__DIR__.'/less-custom'),
  3. Der komplette Dateiinhalt in der /less-custom/theme.less wird nun gelöscht und durch die folgende Zeile ersetzt:
    @import "../less/theme.less";
  4. Der komplette Dateiinhalt in der /less-custom/bootstrap.less wird nun gelöscht und durch die folgende Zeile ersetzt:
    @import "../less/bootstrap.less";
  5. 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
  6. 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

Christian Hamberger
22.11.2015
Warp 7, uikit, Widgetkit
16.10.2015
1182
Hinweis

Die Umsetzung der hier gemachten Lösungen und Vorschläge geschehen immer auf eigener Gefahr.