xt:Commerce 5/6 CSS Dateien bearbeiten

Ab XTC 6 steht im Backend ein Template-Editor zur Verfügung mit dem Sie einige Einstellung vornehmen können ohne selbst die nachfolgend beschriebenen Dateien ändern zu müssen:

CSS-Theme-Editor

Das XTC 5/6 Template verwendet less für die Erzeugung der css files (http://lesscss.org/).

Es gibt 2 simple Möglichkeiten:

Einzelne bestehende Regeln der Template.css über die stylesheet.css zu überschreiben (mit fertigem css) - bei kleinen änderungen, und somit immer kompatibel mit dem standardtemplate zu bleiben (wichtig wenn man regelmäßig die libraries aktualisiert)
LESS Syntax in zb less/Layout.less direkt zu bearbeiten, und dann mit einem LESS compiler neue CSS Files zu erzeugen.

Hierzu im Compiler einfach die Template.less (nur diese, da hier alle anderen referenziert sind) auswählen, und es wird eine neue Template.css generiert.

Compiler gibt es einige (kann auch jede IDE), ansonsten Standalone wie Winless (http://lesscss.org/usage/#guis-for-less-windows)

less macht das Template auch bei Anpassungen einfacher zu pflegen, da z.B. Sie für alle Variablen Inhalte in Layout.less haben (Farben etc.) und sich dort dann durch einzelne anpassungen (zb @brand-primary und @brand-secondary) vieles automatisch an diese Farben anpasst.

In diesem Template kommt die Sprache Less zum Einsatz um den massiven Umfang an CSS-Code komfortabel bearbeiten zu können.

Die Datei css/Template.css wird dynamisch über Less generiert. Die Less-Hauptdatei ist unter less/Template.less zu finden. In dieser Datei sind alle benötigten Dateien referenziert. Wenn Änderungen an den Less Dateien gemacht werden, muss sichergestellt werden, dass die Datei css/stylesheet.css automatisch aktualisiert wird. Hierfür gibt es unzählige Möglichkeiten und die meisten modernen Entwicklungsumgebungen sehen hierfür bereits Routinen vor. Es gibt natürlich auch "Standalone-Lösungen", bspw. Editoren welche nur für diesen Zweck existieren.

Weitere Hinweise und Schritte zur Installation/Konfiguration sind über nachstehende Links zu finden:
http://lesscss.org/
http://lesscss.org/usage/#guis-for-less
http://lesscss.org/usage/#command-line-usage
http://lesscss.org/features/