Wie kann ich die Farben eines Templates anpassen?


Für Änderungen an den Templates sind Browser (Firefox, Chrome, Internet Explorer) in neueren Versionen erforderlich. In diesem Artikel verwende ich den Firefox 33.1. Diesen empfehlen wir auch, um die Änderungen durchzuführen.

Die Farben der Templates können wie folgt geändert werden:

Als Beispiel verwende ich hier das Template New Experience - dark blue. Alle anderen Templates können analog geändert werden.

Zunächst sollten Sie den Ordner des Templates, welches Sie ändern wollen unter neuem Namen in den Template-Ordner kopieren. Die Templates befinden sich im Ordner:

Windows XP: C:\Programme\GS Software AG\GS ShopBuilder 15 Pro Plus\templates

Windows Vista/7/8/8.1: C:\Programme(x86)\GS Software AG\GS ShopBuilder 15 Pro Plus\templates

Navigieren Sie in diesen Ordner. Wechseln Sie nun in den Ordner der Template-Reihe, in der sich das Template, welches Sie berabeiten wollen, befindet (hier: New Experience).

Kopieren Sie den Ordner des Templates, welches Sie bearbeiten wollen (hier: dark blue) und fügen Sie es direkt wieder ein. Windows Vista/7/8/8.1 fragt nun nach den Administratorberechtigungen. Klicken Sie auf "Fortsetzen". Windows legt nun eine Kopie des Ordners an (hier: dark blue - Kopie). Benennen Sie diesen Ordner nach eigenen Vorstellungen um. Ich nenne ihn hier "yellow", da ich gelbliche Farbtöne für mein Template verwenden will.
Auch hier fragt Windows Vista/7/8/8.1 nach den Administratorberechtigungen.

Starten Sie nun den GS ShopBuilder und öffnen Sie die Templateauswahl. Hier finden Sie nun das neue Template unter der entsprechenden Template-Reihe (hier: New Experience). Machen Sie einen Doppelklick auf das neue Template (hier yellow).

Nachdem sich das Templateauswahlfenster geschlossen hat, führen Sie eine Veröffentlichung mit der Schnellauswahl "Templatewechsel" aus. Dies ist gefahrlos, da sich ausser dem Namen noch nichts am Template geändert hat. Sie können natürlich auch als Testshop veröffentlichen, um sicher zu gehen. Allerdings müssen Sie dann ggf. eine Komplettveröffentlichung durchführen.

Öffnen Sie den (Test-)Shop im Firefox-Browser (Empfehlung).

Drücken Sie die Taste F12 auf Iher Tastatur, um die Webdevelopertools zu öffnen.

 Webdevelopertools

Klicken Sie dann auf das Symbol des Inspektortools (Pfeil).

Fahren Sie nun mit dem Mauspfeil auf ein Element des Shops, dessen Farben Sie ändern möchten. Das Element wird beim Überfahren mit dem Mauspfeil umrandet. Wird das richtige Element umrandet, klicken Sie mit der linken Maustaste. In diesem Beispiel möchte den Hintergrund der Breadcrump-Navigation ändern.

Breadcrumpnavi

Auf der rechten Seite der Webdevelopertools finden Sie den Reiter "Styles". Bitte klicken Sie diesen an, falls er noch nicht aktiv ist. Dort finden Sie u. A. die Farbangaben des gewählten Elements. Dabei ist "color" die Farbe der Schrift und "background-color" die Farbe des Hintergrunds.

Eigenschaften 

Klicken Sie nun auf den Wert hinter dem Attributsnamen, den Sie ändern wollen. In diesem Beispiel möchte ich die Hintergrundfarbe ändern und klicke auf den Wert (#d0daed) hinter "background-color". Unterhalb öffnet sich eine Vorschau der aktuellen Farbe. Klicken Sie auf diese Vorschau und es öffnet sich ein Farbwähler.

Farbwähler 

Wählen Sie in diesem Farbwähler die gewünschte Farbe durch anklicken. Die Farbe wird im aktuellen Dokument direkt geändert, aber nicht gespeichert! Aktualisieren Sie während der Arbeiten niemals die Seite und wechseln Sie niemals die Seite, da sonst alle Änderungen ohne Vorwarnung verloren gehen!

Versierte Benutzer können natürlich auch noch andere CSS-Eigenschaften ändern.

Um weitere Elemente zu ändern, klicken Sie zu nächst wieder auf das Inspektortool-Symbol und wählen Sie das Element aus. Verfahren Sie dann wie zuvor Beschrieben.

Nachdem alle Elemente bearbeitet wurden, müssen Sie die neuen CSS-Eigenschaften speichern und in das neue Template kopieren.

Klicken Sie dazu im Styles-Reiter auf den Namen der Datei (hier: style.css).

Dateiname

Links vom Style-Reiter erscheint nun der gesamte Quellcode der Datei im Fenster. Klicken Sie in das linke Fenster der Webdevelopertools und drücken Sie STRG+A und anschließend STRG+C auf Ihrer Tastatur.

Öffnen Sie einen Texteditor, z. B. den Editor unter Programme/Zubehör und fügen Sie den Quellcode in ein neues Dokument ein, in dem Sie STRG+V auf Ihrer Tastatur drücken.

Klicken Sie im Editor auf Datei/Speichern unter und speichern Sie die Datei unter dem angeklickten Namen der Datei (hier: style.css) im Ordner des neuen Templates (hier: yellow).

Die alte Datei kann überschrieben werden.

Wenn Sie nun das nächste Mal veröffentlichen (Templatewechsel), sind die Änderungen übernommen.

Tags: Farbe, ShopBuilder 15, ShopBuilder 16, Template
Letzte Änderung:
2014-11-12 11:56
Verfasser:
T. Schürhoff
Revision:
1.13
Durchschnittliche Bewertung:0 (0 Abstimmungen)

Kommentieren nicht möglich

Chuck Norris has counted to infinity. Twice.