Gambio GX2: Styles ohne Styleedit bearbeiten

Dieser Artikel beschreibt, wie Styles in der ECommerce-Software Gambio2 auch ohne EyeCandy verwendet werden können. Leider war es mir nicht möglich, beim Umzug von Gambio nach Gambio GX2 die Styles einfach zu übernehmen. Daher wechselte ich das Template von EyeCandy zu gambio und führte die unten beschriebenen Änderungen durch.

Die ursprüngliche Datei, die sich zunächst ergeben hat, war ca. 208 KByte groß und enthielt viele Redundanzen (z.B. gleichen Definitionen in unterschiedlichen Hierarchiestufen). Ich habe die Datei auf eine Größe von ca. 110 KByte gebracht, ohne dass die Funktionalität gelitten hat.

Das Ergebnis ist im ConeleK-Shop zu betrachten.

Statisches .css File einlesen

Zunächst muss eine kleine Änderung in der Datei includes/header.php durchgeführt werden, damit die Gambio-Shop-SW die statische .css Datei einliest.

original

ersetzt durch:

Nun wird nicht mehr die Programmdatei gm_dynamic.css.php sondern die Datei /templates/gambio/stylesheet.css aufgerufen.

Eine kleine Version dieser Datei ist schon im System vorhanden, diese reicht jedoch nicht aus, um ein vernünftiges Design zu erstellen.

.css File erstellen

Nun wird ein statisches .css File erstellt. Dieses Stylesheet setzt sich aus dem ursprünglichen Datei templates/gambio/stylesheet.css
und einer selbst erstellten .css Datei zusammen. Diese neue Datei wird an Stelle der ursprünglichen stylesheet.css Datei verwendet. Wir haben hierzu unser altes Stylesheet aus der der alten Gambio Installation benutzt. Diese Datei befindet sich unter:

/cache/__dynamics.css

Sie ist leider für den Menschen nicht gut lesbar, da sie nicht formatiert ist. Wir haben sie mit einem Texteditor (Kate / Kubuntu Linux) und regulären Ausdrücken so bearbeitet, dass sie ein lesbares Format hat. In diese Datei haben wir die Datei templates/gambio/stylesheet.css integriert.

Nun haben wir ein funktionierendes Stylesheet für unseren GX2-Shop, das im wesentlichen auf Styles des alten GX-Shops beruht.

Styles bearbeiten

Wie findet man nun die Bezeichungen der Klassen (class) und IDs (id). Hier hilft ein Addon für den Firefox, der Firebug. Wenn dieser in Firefox installiert ist, kann man jedes Element einer Internet-Seite inzpizieren, Indem man man mit der Maus über das Element fährt und die rechte Maustaste klickt, Im Kontext-Menü, welches dann erscheint, wählt man dann “Inspect Element” und erhält so den Namen der Klasse oder ID. In der Datei lokalen stylesheet.css kann man nun mit Hilfe der Suchfunktion die entsprechende Klasse bzw. ID suchen und die Eigenschaften bearbeiten. Die Datei kann dann nach der Bearbeitung mit Hilfe eines ftp-Programms hoch geladen werden. Wir verwenden hierzu Filezilla stylesheet.css vom Server auf den lokalen Computer heruntergeladen und öffnet sie mit Filezilla mit dem Menüpunkt Maus -> rechts -> edit mit seinem Texteditor, so erscheint bei jeder Änderung / Abspeichern ein Dialog, der fragt, ob man die geänderte Datei hoch laden möchte. Klickt man auf “Yes” geschieht dies an die richtige Stelle.

Man kann nun das Ergebnis der Änderung mit dem Browser anschauen. Nicht vergessen beim Firefox Strg + R zu drücken, um den Cache zu leeren und die Seite neu aufzurufen.

Noch schneller geht es übrigens mit Webdav (Web-based Distributed Authoring and Versioning). Viele lokale Filesystem-Browser beherrschen Webdav. Hat man ein Webdav zu deinem Server und dem Ordner in dem sich das Shopsystem befindet eingerichtet, erscheint dessen Dateisystem im lokalen Filesystem-Browser wie auf dem eigenen Computer. Man kann nun mit einer entfernten Datei, wie z.B. der stylesheet.css arbeiten, wie mit einer Datei auf dem lokalen Computer. Nach Editieren der Datei klickt man auf “Speichern” und die Datei wird direkt auf dem Server geändert und gespeichert.

Download

Unter folgendem Link können Sie das Stylesheet herunterladen. Wir bitten Sie allerdings für Ihren eigenen Style anzupassen und nicht das ConeleK Design zu verwenden. Benennen Sie die Datei in stylesheet.css um: stylesheet_gambio_template_120903.css.zip

Siehe auch

Gambio GX2: Boxen ohne Styleedit platzieren

3 comments

  1. Hallo, ich versuche die ganze zeit die CSS ( die ja wie ich gelesen habe standardmässig in der datenbank ist) in eine statische zu verwandeln. Ich lese überall das ich in der header.php die veränderte css angeben muss aber in der header.php finde ich nicht den code bereich wo ich die css einbinden kann. Könnten sie mir da irgendwie weiterhelfen?

    1. Hallo Segar,
      du kannst dir das Ergebnis im Quelltext der Startseite von http://www.conelek.com ansehen. Wir haben uns nicht ganz an die Anleitung in diesem Beitrag gehalten: In /includes/header.php haben wir das Stylesheet “templates/gambio/gm_dynamic.css.php” angepasst (Zeile 127), das im else-Zweig von folgender if-Abfrage eingefügt wird: if($_SESSION[‘style_edit_mode’] == ‘sos’) (Zeile 118).

      Hilft dir das?

      Viele Grüße, Roland

  2. Hallo,

    über die Suche nach einer Lösung zu meinem Problem mit der Gambio-Shopsoftware bin ich auf Ihren Blog gestoßen.

    Leider konnte ich auch hier nicht die Lösung für mein Problem finden. Darum versuche ich es mal auf diesem Weg – vielleicht wissen Sie ja auf Anhieb eine Lösung.

    Folgendes Problem habe ich:
    Ich bin derzeit daran ein Template für den Gambio GX2 Shop umzusetzen. Bei dem Template soll die Einstiegsseite anders aufgebaut sein als die nachfolgenden Seiten. Ich würde gerne der Einstiegsseite eine Klasse in den -Tag bzw. den -Tag hinzufügen z. B.: oder . Diese Klasse soll NUR auf der Einstiegsseite erscheinen, sobald ich auf eine Unterseite gehe soll sie weg sein.

    Haben Sie da eine Idee?

    mit freundlichen Grüßen,
    Iris

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box