osCommerce anpassen

 

Da osCommerce™ in der Version 2.3.1 immer noch kein Template System besitzt, gestaltet sich das Anpassen des Shops als schwieriges Unterfangen. Die Layoutinformationen (HTML-Code) sind auf viele einzelne Dateien verstreut, so dass es kaum möglich ist dem Shop ein komplett neues Layout zu geben. Die wichtigsten Dateien , die die Layoutinformationen beinhalten sind template_bottom.php und template_top.php im includes Verzeichnis. Wenn Sie ein Template von einem Anbieter kaufen, geht die Integration in der Regel nur dann reibungslos, wenn Sie die Orginalversion ohne zusätzliche Module haben. Wenn Sie bereits Module integriert haben, müssen sie aufpassen, dass Sie bei der Inegration des Templates nicht teile ihrer Module überschreiben.

Dieser Artikel erläutert das Grundlayout eines osCommerce™ Shops in der Version 2.3.1.

Das Grundlayout setzt sich aus folgenden Komponenten zusammen

  1. Grid System 960gs

    Das Grid System 960gs dient dazu, die einzelnen Zeilen und Spalten für das Layout zu definieren. Im Header sehen Sie folgende Zeile:

    <link rel="stylesheet" type="text/css" href="</span>ext/960gs/960_24_col.css<span>" />

    Das bedeutet, dass das Layout auf eine feste Breite von 960 Pixel festgelegt ist, und diese 960 Pixel in 24 Spalten a 40 Pixel unterteilt sind.

    Folgende Definition sagt also aus, dass der DIV header 24 Spalten überspannt, was die komplette Breite von 960 Pixel bedeutet.

    <div id="header" class="grid_24">

    Der Inhaltsbereich mit linker Spalte, Inhalt und rechter Spalte ist folgendermaßen definiert:

    <div id="bodyContent" class="grid_16 push_4">
    <div id="columnLeft" class="grid_4 pull_16">
    <div id="columnRight" class="grid_4">

    Der Inhaltebereich umfaßt 16 Spalten, was eine Breite von 640 Pixeln bedeutet.
    Die linke und rechte Spalte umfassen jeweil 4 Spalten, was jeweils eine Breite von 160 Pixeln bedeutet.

    Wenn Sie z.B. einen dieser Inhaltsbereiche vergrößern wollen, geht das nur in Schritten von 40 Pixeln.
    Um z.B. die linke und die rechte Spalte um 40 Pixel zu vergrößern, ändert man die das Layout folgendermaßen
    ab:

    <div id="bodyContent" class="grid_14 push_5">
    <div id="columnLeft" class="grid_5 pull_14">
    <div id="columnRight" class="grid_5">

    Achten Sie dabei darauf, dass der Inhaltesbereich um zwei Spalten verkleinert werden muß, wenn Sie die rechte und linke Spalte um jeweils eine Zeile verbreitern.

    So können Sie auch komplett eigene Inhaltebereiche in das Layout einführen wie zum Beispiel:

    <div id="meineInhalte" class="grid_24"></div>

    Weiterführende Informationen finden Sie unter 960 Grid System

     
  2. jQuery UI

    jQuery ist eine Javascript Klassenbibliothek, welche mit jQuery UI unter anderem eine Reihe von Möglichkeiten bietet, eine HTML-Seite mittels der jQuery Bibliothek optisch anzupassen.  Hiervon macht osCommerce 2.3.1 sowohl in Shop als auch im Administrationbereich reichlich gebrauch. So werden z.B. im Shop alle Farben und Buttons mittels jQuery UI definiert.

    Die CSS-Datei um die entsprechenden Bereiche anzupassen finden Sie unter catalog/ext/jquery/ui/redmond/jquery-ui-1.8.6.css


    Um Änderungen vorzunehmen, können Sie auch über den Themeroller von jQuery ihr eigenens Farbschema gestalten, herunterladen und in ihren Shop integrieren.
     

  3. stylesheet.css

    Das Sylesheet stylesheet.css beinhaltet Definitionen, die nicht schon über 960gs und jQuery UI festgelegt worden sind. Das sind z.B. Schriftarten, Abstände, Hintergründe .... Weiterhin können hier Definitionen von 960gs und jQuery UI überschrieben werden.
Design by Joomla 1.6 templates