Wenn der Editor nicht ausreicht – wie Sie mit CSS das Design Ihres ePages-Shops anpassen können – Teil 1

Mit den Editoren in ePages können Sie das Aussehen Ihres  Onlineshops Ihren Wünschen anpassen. Mit ein wenig gestalterischem Geschick können Sie damit Ihren Shop in Ihrem Wunschdesign erstrahlen lassen. Doch manchmal stoßen Sie bei der Gestaltung per Editor an Grenzen, die Ihnen das System vorgibt. Mit CSS Code, den Sie in den Quelltext Ihrer Website einfügen können, können Sie viele dieser Beschränkungen umgehen. Das ePages Blog zeigt Ihnen anhand einiger Beispiele, was möglich ist, wie sie dafür den nötigen Code herausfinden und wo Sie ihn einfügen müssen. Doch Vorsicht: Anwendung geschieht auf eigene Gefahr!

Eine kleine Einführung in CSS

Möchten Sie sich intensiv mit CSS auseinandersetzen, empfiehlt es sich, einige der Lehrgänge, die Sie kostenlos im Internet finden können, durchzulesen. Einen guten Einstieg in CSS bietet Ihnen zum Beispiel dieses Tutorial.

An dieser Stelle möchten wir lediglich einen kurzen Überblick darüber geben, was CSS eigentlich genau ist. CSS ist eine Auszeichnungssprache, mit denen Sie das Aussehen von bereits vorhandenen Inhalten auf Ihrer Website ändern können. Wörtlich bedeutet CSS: „Cascading Style Sheets“.

Also: Mit CSS ist es möglich, das Aussehen von bereits vorhandenem Inhalt der Website zu ändern. Mit CSS können Sie einer neuen Website keinen neuen Inhalt hinzufügen oder Funktionalitäten Ihres Onlineshops ändern.

CSS Code ist stets gleich aufgebaut. Zunächst wird angegeben, was geändert werden soll. Dies ist der sogenannte „Selektor“. In einer geschwungenen Klammern steht dann, was mit dem eben aufgerufenen Element geschehen soll. Dieser Befehl besteht aus zwei Elementen: Eigenschaft & Wert.

Hier einmal ein Beispiel, dass dem Hintergrund einer Website die Farbe rot (Angabe als Hexadezimalwert) gibt:

Möchten Sie einem Element zusätzlich eine weitere Eigenschaft zuweisen, können Sie dies tun, indem Sie innerhalb der Klammer nach dem Semikolon eine weitere Eigenschaft angeben.

Ergänzen wir das Beispiel. Nun soll nicht nur der Hintergrund („background color“) die Farbe Rot erhalten, sondern zusätzlich die Schriftfarbe („color“) in kräftigem Blau dargestellt werden.

body {

color: 0800FF;

background-color: #FF0000;

}

Zwar hätten wir auch alle Angaben in eine Reihe schreiben können. Damit es besser lesbar ist, haben wir es aber auf verschiedene Zeilen verteilt. Für den Browser macht dies später keinen Unterschied, da für ihn nur zählt, was zwischen den geschwungenen Klammern steht. Zeilenumbrüche spielen für Ihn keine Rolle. Wichtig ist nur, dass am Ende jeder Eingabe ein Semikolon steht, da dies als Trennzeichen fungiert.

Wie Sie die den richtigen Selektor in Ihrem Shop finden können

Nachdem wir uns angeschaut haben, wie ein CSS Code aufgebaut ist, stellt sich nun die nächste Schwierigkeit. Nehmen wir an, wir möchten gerne ein bestimmtes Element in unserem Shop manuell unsichtbar schalten. Wie finden wir nun den passenden Selektor heraus, mit dem wir es ansprechen können?

Hier hilft uns ein Plug-In für Firefox weiter: Firebug. Hier der Link zur Installation: https://addons.mozilla.org/de/firefox/addon/firebug/

Mit Firebug können wir direkt im Browser die Storefront unseres Shops detailliert untersuchen und unter anderen auch den jeweiligen Selektor eines jeden Elementes herausfinden.

Versuchen wir es einmal an einem Beispiel: In ePages Shops wird die Breadcrumb, also der Pfad zum Produkt, jeweils oberhalb des einzelnen Produktes angezeigt. Diese ist nun durch eine gestrichelte Linie vom Rest der Produktdarstellung abgetrennt. Versuchen wir nun, diese gestrichelte Linie unsichtbar zu schalten.

Dazu öffnen wir im Firefox die Storefront unseres Shops und wählen ein Produkt aus, von dem wir uns die Produktdetails anschauen möchten. Oberhalb der Produktdetails finden wir die Breadcrumb sowie die schon genannte gestrichelte Linie.

Nun wollen wir die Seite mit Firebug untersuchen. Dazu klicken wir entweder auf das entsprechende Symbol in der oberen Menüleiste des Browsers oder wählen per rechtem Mausklick „Element untersuchen“.

In der unteren Hälfte des Browser öffnet sich Firebug. Möchten wir nun einzelne Elemente genauer anschauen, müssen wir diese zunächst auswählen. Dafür klicken wir in der Firebug-Menüleiste auf folgendes Symbol.

Wenn wir nun über einzelne Elemente unserer Website fahren, werden diese mit einem blauen Rand hervorgehoben. Gleichzeitig ändert sich im Firebug-Fenster der Inhalt und der aggregierte Quellcode für das jeweilige Element wird angezeigt.

Im linken unteren Fenster sehen wir den Quellcode des Elements, auf der rechten Seite sehen wir die verwendeten CSS-Befehle, die dem Element sein Aussehen geben. Hier können wir mit den bereits verwendeten CSS-Befehlen herumspielen und etwa testweise die Größe ändern. Dazu tragen wir bei der Eigenschaft „heigth“ einen anderen Wert ein.

Ohne dass es zu tatsächlichen Veränderungen im Quellcode kommt, kann man sich auf diese Weise schon einmal einen ersten Eindruck verschaffen, wie ein Element nach einer tatsächlichen durchgeführten Änderung aussehen würde. Das macht Firebug zum idealen Werkzeug, um mit dem Design zu spielen.

Auch neue Styles können probeweise hinzugefügt werden. Dazu müssen Sie im rechten Fenster mit der rechten Maustaste klicken und dann eine neue Eigenschaft hinzufügen. Da wir die gestrichelte Linie ja ausblenden möchten, tragen wir im rechten Fenster folgende neue Eigenschaft ein

visibility: hidden

Die gestrichelte Linie unterhalb der Breadcrumb sollte nun ausgeblendet sein. Diesen und andere CSS-Befehle finden Sie übrigens in dem bereits erwähnten Tutorial.

Ändern des Quellcodes

Als nächstes wollen wir versuchen, diese Änderung permanent in unserem Shop anzuwenden. Dazu müssen wir den Befehl an der richtigen Stelle im Quellcode unterbringen.

Wir brauchen dazu:

• Den genauen Pfad des Elements, damit wir es ansprechen können sowie
• den Befehl, mit dem wir es unsichtbar schalten können.

Letzteres haben wir bereits, fehlt noch der genaue Pfad des Elements. Diesen müssen wir noch herausfinden. Dazu wählen wir in Firebug erneut das Auswahlwerkzeug und markieren die gestrichelte Linie mit einem Mausklick. Im linken unteren Fenster wird wieder der entsprechende Teil des Codes angezeigt. In der Firebug-Menüleiste können wir bereits jetzt den CSS-Pfad des Elements sehen. Wir klicken dort mit der rechten Maustaste und wählen „CSS-Pfad kopieren“

Im Zwischenspeicher unseres Rechners ist nun der folgende Pfad gespeichert, den wir in einen Texteditor einfügen können, um ihn zu bearbeiten:

html.mozilla body.epages div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.Separator

Diesen müssen wir ein wenig anpassen, bevor wir ihn weiter verwenden können. Aus html.mozilla machen wir html, aus body.epages wird body. Nach der Bearbeitung sieht der Pfad folgendermaßen aus:

html body div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.Separator 

Wenn man den Pfad von links nach rechts liest, wird er immer genauer, indem er der vorangegangenen Information eine weitere hinzufügt. Schlussendlich landet man dann beim Element „div.Separator“, der gestrichelten Linie. Wenn wir den kompletten Pfad benutzen, können wir sicher gehen, dass lediglich dieses eine Element und nicht ein weiteres, das zufällig ebenfalls den Namen „div.Separator“ trägt und irgendwo anders auf der Website zu finden ist, modifiziert wird.

Nun haben wir alles, was wir benötigen.

Wechseln wir nun also in unser Backoffice und tragen alle Informationen im Menü „Einstellungen/Allgemeine Einstellungen“ und dort auf der Karteikarte „Erweiterte Einstellungen“ in den Quellcode unserer Seite ein.

Der Code sieht nun so aus:

<style type="text/css">

html body div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper div.Separator

{

visibility: hidden;

}

</style>

Mit <style type="text/css"> geben wir an, dass wir Änderungen an den CSS vornehmen wollen, mit dem abschließenden </style> beenden wir diese wieder. Dazwischen steht zunächst die Information, auf welches Element sich die Änderung bezieht (der Pfad, der zu div.Separator führt) und dann in geschwungenen Klammern, was geändert werden soll: visibility: hidden; (Semikolon nicht vergessen!).

Nachdem wir den Code eingetragen haben, klicken wir auf Speichern und aktualisieren einmal den Seitencache unseres Shops. Wenn wir nun in der Storefront durch unseren Shop surfen, sehen wir, dass die gestrichelte Linie permanent ausgeblendet ist.

Kleine Änderungen können Sie schnell und einfach in der oben beschriebenen Weise durchführen, wenn die mitgelieferten Editoren des Shops an Ihre Grenzen stoßen. Im nächsten Teil unseres kleinen CSS-Überblicks, den wir in Kürze hier im Blog veröffentlichen werden, gehen wir dann ein wenig mehr in die Tiefe und erklären, wie sie vorgehen sollten, wenn Sie größere Änderungen vornehmen möchten.

Machen Sie sich auf jeden Fall mit den Möglichkeiten von CSS vertraut, wenn Sie vorhaben, damit zu experimentieren. Einen guten Einstieg bietet Ihnen das bereits erwähnte Tutorial: http://de.html.net/tutorials/css/

CSS ist das Mittel der Wahl, wenn Sie die Rahmenbedingungen, die Ihnen Ihr Shop im Standard vorgibt verlassen möchten. Doch Vorsicht: Alles nur auf eigene Gefahr. Es besteht das Risiko, dass Sie aus Versehen wichtige Funktionen Ihres Shops deaktivieren bzw. verstecken, von denen Sie dies eigentlich nicht vorhatten. Falls also Ihr Shop seltsames Verhalten zeigt, überprüfen Sie, ob es nicht an dem von Ihnen verwendeten Code liegen könnte und nehmen Sie ihn probeweise aus dem Quellcode Ihrer Seite.