CSS
Layout > Layout-Generator > Tab: CSS
Themen bzw. Einstellungen dieses Kapitels:
1) Info: CSS
3) Details zum Aufbau einer CSS-Datei
5) Hinweise und Fehlermeldungen
Wenn Sie Einträge, Einstellungen oder Änderungen vorgenommen haben, klicken Sie vor Verlassen eines Bereichs jeweils auf das Speichern-Symbol, um Ihre Konfiguration zu sichern.
1) Info: CSS
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. Eine CSS-Datei enthält die Regeln zur Gestaltung der Inhalte einer Webseite. Diese Regeln sind als (X)HTML-Codes in der Datei enthalten, die Datei ist in reinem Textformat angelegt. Mit Hilfe von Editoren haben Sie die Möglichkeit, die Codes strukturiert und farblich hervorgehoben (Syntax) oder mit grafischer Benutzeroberfläche (Editor) anzuzeigen.
Der besondere Vorteil von CSS liegt darin, dass die Gestaltung damit übergreifend möglich ist. Das bedeutet, dass die entsprechenden Festlegungen zentral erfolgen und somit auch nur einmal zentral - in der jeweiligen CSS-Datei - geändert werden müssen.
Durch die zentrale Steuerung erhalten Sie ein einheitliches Erscheinungsbild Ihrer Webseiten.
So lassen sich per CSS die Eigenschaften und Werte der Textformate übergreifend bestimmen. Diese CSS-Regeln werden nach gewissen Festlegungen gewichtet und umgesetzt. Bei Konflikten aufgrund konkurrierender Regeln werden diese kaskadierend (cascading) abgearbeitet und es setzt sich die Regel durch, die aufgrund der Festlegungen dominierend ist.
Beispiel:
Die CSS-Regel der Vererbung besagt, dass Elemente, die sich innerhalb eines anderen Elementes befinden, deren Eigenschaften durch Vererbung annehmen. So erscheint ein em-Element innerhalb eines p-Elements z. B. kursiv, aber ansonsten in der gleichen Schriftart, Schriftgröße und Schriftfarbe, wie das p-Element, obwohl es nicht direkt so formatiert wurde. Die Eigenschaften werden in diesem Fall durch Vererbung übertragen.
CSS-Strukturen
Die Gestaltung Ihres Webshops wird von mehreren CSS-Dateien gesteuert, wobei die Datei plenty_main.css eine Art Grundgerüst bzw. Standard-Einstellungen enthält. Diese Datei ist nicht direkt editierbar. Sie können die von dieser Datei gesteuerten Einstellungen aber indirekt verändern. Wir zeigen Ihnen im Abschnitt 5 anhand eines Beispiels, wie das geht.
Durch geschickte Erstellung und Anordnung entsprechender CSS-Regeln lassen sich viele Gestaltungsmöglichkeiten umsetzen, doch Vorsicht: Aufgrund der Komplexität der möglichen Verflechtungen sind hierzu solide Kenntnisse der HTML- und CSS-Regeln nötig. Sie sollten sich daher, bevor Sie die Standardwerte verändern, entsprechende Kenntnisse aneignen oder ggf. einen Dienstleister mit entsprechenden Arbeiten beauftragen.
Empfehlenswerte Webseiten zum Thema CSS:
2) Bearbeiten der CSS-Daten
Die CSS-Regeln des verwendeten Layouts sind in einer entsprechenden CSS-Datei abgelegt, die Sie unter Layout > Layout-Generator öffnen und bearbeiten können.
Die CSS-Datei bezieht sich immer auf das jeweils verwendete Layout.
Das Layout wählen bzw. verwalten Sie im Menü Layout > Layout-Generator.
Klicken Sie auf das Tab CSS, um die CSS-Formatierungen zu öffnen bzw. zu bearbeiten.
Für die Bereiche Weblog (Blog, Template: MainLayout_Weblog) und Forum sind jeweils separate CSS-Dateien angelegt, die im jeweiligen Tab geöffnet werden (siehe Bild 1).
Bild 1: Das Tab CSS
Die Optionen zur Bearbeitung der CSS-Datei finden Sie in der nachfolgenden Tabelle.
Bild 2: Bearbeitungsfenster einer CSS-Datei
Zur Bearbeitung stehen Ihnen folgende Optionen zur Verfügung (die Positionsnummern beziehen sich auf Bild 2):
| Pos.Nr. | Option | Erläuterung/Hinweise |
|---|---|---|
| 1 | Bearbeitung | Wählen Sie eine der drei Möglichkeiten: |
| Syntax | Textbearbeitung mit farblichen und strukturellen Auszeichnungshilfen | |
| Editor | Komfortable Bearbeitung in Menüboxen | |
| Text | Reine Textbearbeitung ohne Auszeichnungshilfen | |
| 2 | Bilder-Galerie | Hier gelangen Sie in die Bilder-Galerie Ihres Webshops, dort sind in verschiedenen Ordnern die Bilder abgelegt, die Sie in Ihrem Webshop verwenden. Legen Sie eine sinnvolle und nachvollziehbare Ordnerstruktur an, besonders dann, wenn Sie viele Bilder in Ihr Layout einbinden möchten. |
| 3 | Website öffnen | Über diesen Link erhalten Sie eine Ansicht Ihrer Website, so können Sie während der CSS-Bearbeitung jederzeit prüfen, welche Auswirkung eine Änderung der Einstellungen hat. Nicht vergessen: Um Änderungen sehen zu können, müssen Sie diese durch Klick auf das Speichern-Symbol gesichert haben. |
| 4 | Vorschau | Klicken Sie auf das Vorschau-Symbol, um den Webshop zur Ansicht der Formatierungen aufzurufen. |
Tab. 1: Optionen zur Bearbeitung einer CSS-Datei
3) Details zum Aufbau einer CSS-Datei
Die Eigenschaften, Einstellungen und Regeln sind im CSS in Klassen (.class) oder IDs (#id) angeordnet, diese sind wiederum in den Templates referenziert. Das heißt, im Template erfolgt die Einbindung und Anordnung und in der CSS-Datei wird die Feineinstellung der Elemente vorgenommen.
Schriften und Hintergrund
Die Schriften der Elemente Ihres Webshops können Sie sehr einfach im CSS bearbeiten. Die Elemente sind im Template MainLayout_Content häufig in Feldern angeordnet, die im Template jeweils als Box bezeichnet werden. Während Sie in den Templates die Bezeichnungen verändern können, erfolgt das Fine-Tuning im CSS. Hier haben Sie verschiedenste Möglichkeiten, auf die Gestaltung von Schriftart, Schriftgröße, Schriftstil etc. Einfluss zu nehmen.
Beispiel:
Bild 3: Gestaltung der Filter-Box im Template MainLayout_Content
Die Namen bzw. CSS-Klassen der Filter-Box-Elemente im Template:
- ff01_box_darkgrey - Gestaltung des Hintergrunds
- ff01_box_top - Gestaltung "Kopfzeile" des Hintergrunds
- ff01_box_content - Inhalt der Box: der Platzhalter [Filter_CharacterGroups] fügt die Merkmale für die Merkmal-Suche in die Box ein.
- ff01_box_bottom - Gestaltung "Fußzeile" des Hintergrunds
Die Formatierung einiger Elemente wird im CSS wie folgt dargestellt:
Bild 4: Formatierung einiger Elemente der Filter-Box im CSS
Ein Hintergrund kann entweder als HTML-Element angelegt sein oder er ist als verknüpfte Datei angelegt. Im letztgenannten Fall wird im CSS die entsprechende URL der verknüpften Datei hinterlegt.
Farben
Farben werden in der CSS-Datei in der Regel als Hexadezimal-Code hinterlegt. Dieser besteht aus einem 6-stelligen Code mit vorangestelltem Raute-Zeichen, z. B. #C0C0C0 (silber). Daneben ist es möglich, Farbnamen anzugeben, eine Übersicht mit 16 erlaubten Farbnamen zeigt folgende Seite...
Die Wirkung verschiedener Schriftfarben auf farbigem Hintergrund können Sie auf folgender Seite testen...
Eine umfangreiche Übersicht möglicher Farben mit Hexadezimal-Codes bietet die Seite...
Unter Farbtabelle.net finden Sie neben einer Farbtabelle auch einen Umrechner nach RGB.
4) CSS-Anwendungsbeispiel
Wir zeigen Ihnen anhand eines Beispiels, wie Sie die Elemente Ihres Webshops verändern können.
Mit einem Entwickler-Tool, z. B. Firebug, können Sie die Elemente auf den Webseiten identifizieren, um sie dann im CSS zu finden. Ohne ein solches Tool ist es u.U. sehr mühsam, ein Element anhand der Bezeichnung zu finden, weil die Bedeutung der englischen Bezeichnungen nicht immer sofort ersichtlich ist.
Beispiel:
Sie möchten für die Schrift der aktiven Kategorie im Webshop, also für die Kategorie, die angeklickt wurde, eine auffälligere Farbe einstellen. In der Grundeinstellung werden aktive Kategorien nur durch den Schriftschnitt bold hervorgehoben. Wir zeigen Ihnen, wie Sie die Farbe orange einstellen.
Wir zeigen die Vorgehensweise mit Firebug. Bitte installieren Sie das Tool, bevor Sie die nachfolgende Anleitung beginnen.
A) Element identifizieren:
- Starten Sie Firebug.
-
Aktivieren Sie das Untersuchen-Werkzeug in Firebug und klicken Sie im Webshop auf das Element, das Sie identifizieren möchten.
⇒ Für unser Beispiel wäre das eine Kategorie-Bezeichnung. - Suchen Sie die CSS-Einstellung in Firebug zu dem Element.
-
Kopieren Sie die Bezeichnung mit Strg + C bzw. cmd + C.
⇒ Für unser Beispiel wäre das die Bezeichnung left_menu .level1active_link.
Bild 5: in Firebug gefundenes CSS-Element
B) Element editieren:
- Öffnen Sie die CSS-Datei unter Layout > Layout-Generator > Button CSS.
-
Fügen Sie die kopierte Bezeichnung aus Schritt A) in das Such-Fenster ein (Suche öffnen: Strg bzw. cmd + F) oder suchen Sie das Element in der Zeile, die in Firebug angegeben wurde.
⇒ Für unser Beispiel wäre das die Zeile 291 (siehe Bild 5). -
Ändern Sie den Farbwert wie gewünscht.
⇒ In unserem Beispiel schreiben Sie orange; anstelle des Hexadezimal-Codes. - Fügen Sie den Befehl !important; hinter dem Farbwert ein.
Der Befehl !important bewirkt, dass alle anderen Formatierungen dieses Elementes unterdrückt werden. In unserem Beispiel ist für dieses Element per Gruppenformatierung ebenfalls der Farbwert #C0C0C0 (Silver) eingestellt. Prüfen Sie im CSS, ob bei evtl. anderen Formatierungen der Schriftfarbe für dieses Element ein important-Befehl eingetragen ist, falls ja, löschen Sie diesen.
Sie erhalten in Firebug eine Farbvorschau, wenn Sie mit dem Mauszeiger in der CSS-Ansicht auf den Farbwert zeigen.
Bild 6: Formatierung des CSS-Elements
Das Resultat sieht dann im Webshop wie folgt aus:
Bild 7: Ansicht des geänderten CSS-Elements im Webshop
5) Hinweise und Fehlermeldungen
In Ihrem Webshop werden zahlreiche Hinweise und Fehlermeldungen angezeigt, z. B. wenn Kunden etwas falsch bedient oder vergessen haben.
Beispiel:
Bei Klick auf einen leeren Warenkorb erscheint folgender Hinweis:
Bild 8: Hinweis bei leerem Warenkorb im Webshop
Sie können die grafische Gestaltung der Boxen und der Texte der Hinweise und Fehlermeldungen in der CSS-Datei global ändern.
Die Elemente, die das Aussehen der Hinweise steuern, sind z. B. in der Main-CSS-Datei (s. Info in Abschnitt 1) folgende:
.plentyMessageBox {
width:98%;
background-image:url(/images/admin/message_background.gif); background-repeat:repeat-y;
border:0px;
margin: 0px 0px 4px 0px;
padding:8px;
text-align:left;
vertical-align:middle;
color: #FFFFFF
}
.plentyMessageBoxTitle {
margin-top:4px;
margin-bottom:6px;
padding-left:26px;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
background-image:url(/images/icons/idea_ongreen.gif); background-repeat:no-repeat;
}
Das Element plentyMessageBox steuert den Hintergrund und den Text der Box durch Werte für Größe, Bildverknüpfung, Ränder, Ausrichtung und Farbe.
Das Element plentyMessageBoxTitle steuert die Überschrift der Fehlermeldungen, im Beispiel Bild 8: Hinweis.
Wenn Sie die hier gezeigten Festlegungen der übergeordneten plenty_main.css-Datei ändern möchten, können Sie dies nur in der CSS-Datei Ihres Webshops anpassen.
CSS-Datei des Webshops ist dominant
Die Festlegungen der übergeordneten CSS-Datei gelten solange, bis sie durch Festlegungen in der CSS-Datei Ihres Webshops überlagert werden.
Wenn Sie z. B. das Hintergrundbild durch eine Hintergrundfarbe ersetzen möchten, ersetzen Sie die Zeile background-image:url(/images/admin/message_background.gif); background-repeat:repeat-y; durch folgende Zeilen:
background-image: none; -> bewirkt, dass das Hintergrundbild nicht angezeigt wird
background-color: red; -> bewirkt, dass die Farbe rot als Hintergrund erscheint
Um das Layout der Hinweise zu verändern, passen Sie die Parameter der obigen Elemente nach Belieben an oder ersetzen diese. Wichtig ist, dass Sie die Namen bzw. Bezeichnungen der Elemente nicht verändern.
