Anpassungen des Shop Frontend Stylesheets (CSS)

Dieser Artikel beschreibt, wie das Design des Shop Frontends angepasst werden kann.

Einleitung

Zum besseren Verständnis des nachfolgenden Artikels werden Grundkenntnisse in HTML und CSS empfohlen.

Das Shop Frontend der eCommerce Suite besteht aus Webseiten, die im Browser dargestellt werden können. Die Struktur wird dabei durch HTML vorgegeben. Das Design der Seite dann über CSS Dateien (Stylesheets) geregelt. Im Standard Shop Template findet eine Trennung zwischen Layout-Styles und Theming-Style statt. Dazu werden verschiedene Stylesheets eingebunden. Darüber hinaus können Formate Ihre eigenen Stylesheets mitbringen, die dynamisch und da wo sie benötigt werden, in die Website integriert werden können. Zu guter Letzt wird bei der Installation des Standard Shop Templates eine leere CSS Datei shop_styles_custom.css angelegt und eingebunden. Beginnern beim Thema CSS und Design wird empfohlen, alle Änderungen am Design in dieser zuerst leeren CSS Datei vorzunehmen.

Trennung von Layout und Theming

Um das Customizing und Theming eines Shop Frontend zu erleichtern sind die Stylesheets des Standard Shop Templates in eine Layout-CSS-Datei und eine Theme-CSS-Datei getrennt. Im Layout Stylesheet werden alle Struktur-spezifischen CSS Anweisungen angegeben. Dies betrifft im wesentlichen die standardisierten Hauptelemente eines Templates. Dies Datei enthält keine Farbangaben oder Anweisungen zu Schriften (Größen, Farben, Typen).

Das Theme Stylesheet definiert alle Design-spezifischen CSS Anweisungen. Hier werden Schriften, mit ihren Größen und Farben, sowie Hintergründe, Rahmen oder sonstige Farben definiert.

CSS Dateien und Einbindungen, die aus Plugins und Formaten eingefügt werden, beinhalten in der Regel nur CSS Angaben, die sich auf das Erscheinungsbild des auszugebenden Formatinhalts beziehen. Diese sollten nach Möglichkeit auch lediglich struktureller Natur sein. In der Theme-Styledatei werden Design-spezifische Angaben zu Standardformaten und Plugins bereits berücksichtigt, insofern diese für das Design des Themes nötig sind.

Layout strict vs. Layout break

Das Standard Shop Template folgt im Normalfall der Regel "layout strict". Das bedeutet, dass zu große Inhalte das grundlegende Design der Seite nicht zerstören dürfen ("layout break"). Dies wird u.a. teilweise durch fixe Höheangaben bzw. durch "overflow: hidden;" - Anweisungen erwirkt.

Aufgrund dieser generellen Entscheidung kann es vereinzelt zu abgeschnittenen Bildern oder Texten führen. Teilweise wird das aufbrechen des Layouts auch bereits durch neuartige CSS3-Angaben (z.B: "flex"-Anweisungen) und durch den Einsatz des Bootstrap Frameworks verbessert oder verhindert.

CSS Einbindung im Shop Template

Die CSS Dateien werden in der Regel im <head>-Bereich einer Website eingebunden. Mit dem eCMS kann dies dynamisch oder fix im HTML Grundlayout (Layout: eCS HTML Basis Container) geschehen. Im Normalfall werden dynamisch geladene CSS Stylesheets in Formaten definiert, die bestimmte CSS Styles vorgeben wollen. Daher werden diese dynamischen Stylesheets auch zumeist am Anfang des HTML Grundlayoutes eingefügt. Grundsätzlich bestimmt die Reihenfolge der CSS Dateien und Anweisungen innerhalb einer CSS Datei, welches Style bei gleichem CSS Klassennamen Vorrang hat. Daher werden die Standard Shop Template Stylesheets in den meisten Fällen fast ans Ende des <head>-Bereiches gesetzt. Nur die leer angelegte shop_styles_custom.css wird nach den Standard Stylesheets eingefügt, wodurch es möglich ist, Anweisungen aus den anderen Stylesheets zu überschrieben und anzupassen.

Dynamische CSS Einbindung

Wenn dynamische Inhalte wie CSS und Javascript Dateien aus Formaten heraus eingebunden werden, stehen dem Entwickler dabei 4 Bereiche im HTML zur Verfügung, in der er die Inhalte integrieren lassen kann. Diese Bereiche sind:

head_start
head_end
body_start
body_end

Damit die Integration bei der Darstellung im Browser korrekt erfolgt, müssen diese Bereich im HTML Grundlayout eingefügt sein. Dafür stehen Platzhalter bereit. Diese sind:

%{eCMS-SRCX:head_start}%
%{eCMS-SRCX:head_end}%
%{eCMS-SRCX:body_start}%
%{eCMS-SRCX:body_end}%

Nur wenn diese Platzhalter eingefügt sind, werden an die entsprechenden Stellen die dynamischen CSS und Javascript Anweisung oder Dateien eingebunden.

Grundsätzlich sollte beachtet werden, dass CSS Dateien im Normalfall an den Anfang des HTML Dokumentes geladen werden. Javascript Dateien wiederum ans Ende des <head>-Bereiches, am Besten jedoch an das Ende des HTML Dokumentes, also via body_end. Der head_end-Platzhalter ist im Normalfall auch tatsächlich vor dem schließenden </head> eingebunden, so dass dynamische CSS Dateien, die in den head_end-Bereich eingefügt werden, nach den statischen CSS Stylesheets platziert werden würden! Damit hätten die dort eingefügten CSS Stylesheets Vorrang vor allen anderen zuvor eingebunden CSS Dateien und könnten ggf. zu unerwünschten CSS Überschreibungen führen.

Statische CSS Einbindung

CSS Dateien können auch statisch eingebunden werden. Dies kann normal über das HTML <link>-Element oder über das eCMS Format eCMS-CSS in Elementschreibweise vorgenommen werden. Dies sieht bspw. für die Einbindung der shop_styles_custom.css wie folgt aus:

${eCMS-CSS:shop_styles_custom.css(media=all,print)}$

Einbindung im Standard Shop Template HTML Grundlayout

Die Einbindung im Standard Shop Template (der Version 4) HTML Grundlayout (eCS HTML Basis Container) sieht demnach wie folgt aus:

<html>
	<head>
	  [... z.B. meta Angaben zu Charset, etc. ...]
 
	  %{eCMS-SRCX:head_start}%
 
	  [... z.B. sonstige Einbindungen, wie Favoriten-Icon, weitere eCMS Platzhalter, etc. ...]
 
	<!-- include layout styles file -->
	${eCMS-CSS:shop_v4_layout_strict.css(media=all,print)}$
 
	<!-- include theme styles file -->
	${eCMS-CSS:shop_v4_theme_grey.css(media=all,print)}$
 
	<!-- include print.css -->
	${eCMS-CSS:shop_v4_print.css(media=print)}$
 
	<!-- include custom styles file / is created empty on first install of shop template -->
	${eCMS-CSS:shop_styles_custom.css(media=all,print)}$
 
	 %{eCMS-SRCX:head_end}%
	</head>
	<body>[...]</body>
	</html>

Anpassung der shop_styles_custom.css

Die CSS Datei shop_styles_custom.css wird bei der Installation des Standard Shop Templates automatisch im Haupt-Web-Verzeichnis angelegt. Über ein FTP-Programm kann diese Datei heruntergeladen bzw. entsprechend hochgeladen werden, um sie zum Einsatz zu bringen.

Voraussetzung dafür ist ein FTP-Zugang zu Ihrem Server. Wenden Sie sich dafür an Ihren Server-Administrator.

Innerhalb der shop_styles_custom.css Datei sind Sie frei in Ihren CSS Anweisungen. Sie können darüber alle CSS Angaben des Shop Frontends, die vorher dynamisch oder statisch eingebunden wurden, überschreiben und verändern.

Beachten Sie, dass Änderung an der Standard Shop Template CSS Dateien nicht update-sicher geschützt sind. Diese Datei könnten bei Updates des Shop-Templates überschrieben werden. Änderung an der shop_styles_custom.css sind bei einem Update geschützt. Nehmen Sie Änderungen daher möglichst immer in der shop_styles_custom.css vor.