Webdesign gestalten mit CSS

plentymarkets » CMS » Webdesign » Layout » CSS

 

Allgemeines

In diesen Kapiteln erhalten Sie zunächst einige grundlegende Informationen zu CSS. Sie erfahren, was CSS bedeutet und wie Sie damit das Design Ihres Webshops gestalten. Weiterhin erfahren Sie, wie das CSS in plentymarkets aufgebaut ist und wo die Festlegungen der verschiedenen Bereiche hinterlegt sind.

CSS (Cascading Style Sheets) bezeichnet eine Auszeichnungssprache für strukturierte Dokumente. Während Sie mit HTML den reinen Inhalt gestalten, bietet Ihnen CSS mehr Möglichkeiten, auf die Formatierung und Gestaltung des Inhalts sowie das Design einer Webseite Einfluss zu nehmen.

CSS in plentymarkets

In plentymarkets sind die allgemeinen CSS-Festlegungen im Menüpunkt CSSBase hinterlegt, was im Standard im jeweiligen CSS-Bereich immer geladen wird. Die Menüpunkte unterhalb von CSSBase enthalten nur Abweichungen oder Erweiterungen zu den Festlegungen im CSSBase. Zusätzlich wird im Standard ein CSS pro Bereich geladen, z.B. für den Bestellvorgang oder den Bereich Mein Konto. Darüber hinaus besteht die Option, über Template-Funktionen weitere Bereiche in das jeweilige CSS einzubinden (Kapitel 4). Aus der jeweiligen Kombination wird dann jedoch nur eine CSS-Datei pro Bereich erzeugt, d.h., es ist jeweils nur ein URL-Aufruf pro Bereich nötig.

Bereiche im CMS

Die CSS-Formatierungen finden Sie im Menü CMS » Webdesign » Layout » CSS in verschiedenen Menüpunkten, die nun vorgestellt werden.

Bild 1: Ordnerstruktur im Bereich CSS

Unbenutzt

Der Ordner Unbenutzt enthält die CSS-Bereiche, die nicht oder noch nicht konfiguriert wurden oder die aus einem anderen Grund keinen Inhalt haben. Sobald der Inhalt aus einem Bereich entfernt wird, wird der Menüpunkt in diesen Ordner verschoben.

CSSBase

Das CSSBase enthält die allgemeinen CSS-Festlegungen für den gesamten Webshop und wird immer geladen.

CSSContent

CSS-Formatierungen für die Bereiche Kategorien mit dem Template PageDesignContent, für die Artikeldarstellung und die Artikelsuche im Webshop.

CSSOrder

CSS-Formatierungen für den Bestellvorgang.

CSSMyAccount

CSS-Formatierungen für den Bereich Mein Konto.

CSSForum

CSS-Formatierungen für das Forum.

CSSBlog

Hier wird das CSS für einen Blog hinterlegt.

Anwendung

Das CSS wird über die Template-Funktion CSS() im jeweiligen Page-Design eingebunden. Die Standard-Konfiguration, bei der das CSSBase und das CSS des jeweiligen Bereichs in einer CSS-Datei geladen wird, kann durch folgende Funktion erweitert werden:

{% CSS([Content, Forum]) %}

In diesem Beispiel wird der Content-Bereich durch das CSS des Bereichs Forum erweitert. Es werden somit die Festlegungen beider Bereiche angewendet. Der CSS-Bereich, der erweitert werden soll, muss bei einer solchen Template-Funktion immer aufgeführt werden. In diesem Beispiel ist das der Bereich CSSContent. Das obligatorische CSSBase muss nicht im Code enthalten sein, da es immer automatisch mitgeladen wird.

Nach oben