CSS Editor - Layoutanpassungen (GS ShopBuilder Standard / Pro)

Der integrierte CSS (Cacading Style Sheet) - Editor hilft Ihnen das Layout Ihres Templates weiter anzupassen. Somit können Sie auf einfache Weise z.B. die Schriftgröße vorgeben oder auch andere Farben definieren.

Fast alle Schriftauszeichnungen, wie Schriftart, -größe sowie die Link- und Tabellenfarben, sind für alle Templates in einer zentralen Datei der font.css hinterlegt. Werden Änderungen an dieser Datei vorgenommen, so wirkt sich dies unmittelbar auf das gesamte Template bzw. auf das gesamte Erscheinungsbild Ihres Onlineshops aus. Mit dem CSS-Editor bearbeiten Sie genau diese Datei.

Um den CSS-Editor nutzen zu können, müssen Sie zunächst Ihren Onlineshop lokal erzeugen. Klicken Sie dann auf das Symbol . Es öffnet sich jetzt der CSS-Editor:

In der linken Tabellenspalte werden alle Klassen gelistet, welche für dieses Template definiert wurden. Markieren Sie z.B. mit der Maus die Klasse "td". Td steht für jede Tabellenzeile und stellt somit für die allgemeine Schrift. Unter "Eigenschaften" sehen Sie jetzt welche Schriftart, Farbe und Schriftgröße festgelegt wurden. Sie können diese Angaben jetzt editieren oder mit Hilfe der angezeigten Listbox weitere Eigenschaften hinzufügen. Sie können auch über die weiteren Reiter Text, Ausrichtung oder Rahmen die Eigenschaften editieren oder weitere Eigenschaften hinzufügen.

Die Klassen (font-family etc.) unterliegen einer festen, englischsprachigen Nomenklatur. Ebenso unterliegen die Eigenschaften bzw. Werte einer eindeutigen Nomenklatur. Z.B. steht "px" für die Angabe in Pixel; Farbwerte können in Hexadezimalzahlen (z.B. #FF0000 für die Farbe Rot), aber auch direkr als Farbe benannt werden (z.B. red).

Für weitere Einzelheiten empfehlen wir die Kurzreferenz von Stefan Münz: http://de.selfhtml.org/navigation/css.htm#schrift

Sie können sich die Vorschau des Templates anzeigen lassen, indem Sie auf das Symbol klicken. Selbstverständlich können auf dieser einen Vorschau-Seite nicht alle definierten Klassen eingebunden werden. Wenn Sie die einzelnen Klassem markieren, so finden Sie jedoch - soweit nicht selbst erklärend - jeweils einen kurzen Hinweis, an welcher Stelle im Template bzw. im Onlineshop sich diese Klasse auswirkt.

Sobald Sie eine Eigenschaft geändert haben, klicken Sie wieder auf das Symbol . Befindet sich jetzt diese Klasse auf der Vorschau-Seite, so können Sie direkt die Veränderungen beobachten.

Sie können jetzt wählen:

Änderungen speichern,

Änderungen speichern und CSS-Editor beenden,

ohne Speichern der Änderungen den CSS-Edtior beenden.

Wenn Sie selbst CSS beherrschen, so können Sie auch direkt die Datei font.css mit einem einfachen Texteditor bearbeiten. Die Datei font.css finden Sie in jedem Template.