Mitentwicklung am Kundentheme (CSS)

Owned by Johann Müller
Last updated: 05.10.2016

Der folgende Artikel ist an alle gerichtet die an der CSS-Datei vom Kundentheme mitwirken müssen.

Das Ziel

Styleanpassung an der CSS Datei und somit Einflussnahme auf die visuelle Darstellung des Odoo-Themes


Die Problematik

Die Themes für odoo bestehen, runtergebrochen auf die notwendigsten Elemente, aus folgenden Bereichen

  • Template Datei (XML)
  • Style-Datei (CSS)
  • Javascript (JS)
  • Bilder (PNG / JPG)

Die einzigen Elemente die man online aus dem Theme direkt im Zugriff hat und editieren kann sind die Template Dateien (XML), diese sind auch nur direkt aus der Datenbank anzeig- und editierbar, nicht aber direkt als Datei.

Alle anderen Dateitypen (CSS, JS, Bilder) liegen auf dem Server innerhalb der jeweilgen Module und können nicht ohne ein Update des Moduls einfach ersetzt werden.


Der Lösungsweg

1 - Das Styling kreieren & testen

Das Styling des Templates wird mittels der Entwicklertools in Browsern wie Firefox oder Chrome vorgenommen.

  • Dazu öffnen Sie die gewünschte Odoo Website und gehen folgende Schritte an
FirefoxChrome
  1. Wählen Sie mit einem Rechtsklick das gewünschte Element (z.B. eine Überschrift) welche angepasst werden soll.
  2. Im Kontextmenü wählen Sie nun Element untersuchen. Dadurch öffnen sich die Entwicklerwerkzeuge.
  3. Wir wechseln nun auf den Tabreiter Stilbearbeitung

  4. In der linken Spalte finden wir nun eine Auflistung aller CSS Dateien welche gerade auf dieser Website im Einsatz sind. Uns interessiert üblicherweise die Datei eq_theme_customer.css

  5. Die eq_theme_customer.css (falls nicht anders für das Theme definiert), soll alle Änderungen und Anpassungen enthalten welche direkt für einen Kunden wichtig sind.
    Nach dem Auswählen der Datei auf der linken Spalte, bekommen Sie den vollständigen Inhalt dieser Datei in der rechten Spalte angezeigt und können Diesen dort temporär editieren. Das bedeutet Sie sehen alle Anpassungen sofort auf der Website. Hier können Sie nun alle Änderungen vornehmen sowie neue CSS Klassen hinzufügen oder erweitern.
  6. Sind Sie mit Ihren Anpassungen fertig, wählen Sie auf der linken Seite Speichern um die Datei in ihrem aktuellen Zustand herunter zu laden.


    Bitte beachten: Wenn Sie während den Anpassungen auf der Website auf einen Link klicken und somit die Seite wechseln (z.B. auf eine Unterseite der Website) werden Ihre Anpassungen verworfen und die Datei neu geladen. Sie können vor einem Wechsel der Seite den gesamten Inhalt der rechten Spalte in die Zwischenablage speichern (Alles markieren, rechtsklick und kopieren). Nach einem Seitenwechsel einfach den kompletten Inhalt (Alles markieren), mit Einfügen überschreiben.
  7. Die gespeicherte CSS Datei muss nun in das Kunden-Modul über GitHub eingecheckt werden. Mehr dazu finden Sie im nächsten Punkt 2 - Die CSS Datei einchecken
  1. Wählen Sie mit einem Rechtsklick das gewünschte Element (z.B. eine Überschrift) welche angepasst werden soll.
  2. Im Kontextmenü wählen Sie nun Untersuchen. Dadurch öffnen sich die Entwicklerwerkzeuge (namentlich: Developer tools).
  3. Wir wechseln nun auf den Tabreiter Sources
  4. Navigieren Sie in der linken Spalte bis zur eq_theme_customer.css Datei
  5. Die eq_theme_customer.css (falls nicht anders für das Theme definiert), soll alle Änderungen und Anpassungen enthalten welche direkt für einen Kunden wichtig sind.
    Nach dem Auswählen der Datei auf der linken Spalte, bekommen Sie den vollständigen Inhalt dieser Datei in der rechten Spalte angezeigt und können Diesen dort temporär editieren. Das bedeutet Sie sehen alle Anpassungen sofort auf der Website. Hier können Sie nun alle Änderungen vornehmen sowie neue CSS Klassen hinzufügen oder erweitern.
  6. Sind Sie mit Ihren Anpassungen fertig, wählen Sie auf der linken Seite mit einem Rechtsklick auf die CSS Datei und im Kontextmenü Save as um die Datei in ihrem aktuellen Zustand herunter zu laden.

    Bitte beachten: Wenn Sie während den Anpassungen auf der Website auf einen Link klicken und somit die Seite wechseln (z.B. auf eine Unterseite der Website) werden Ihre Anpassungen verworfen und die Datei neu geladen. Sie können vor einem Wechsel der Seite den gesamten Inhalt der rechten Spalte in die Zwischenablage speichern (Alles markieren, rechtsklick und kopieren). Nach einem Seitenwechsel einfach den kompletten Inhalt (Alles markieren), mit Einfügen überschreiben.
  7. Die gespeicherte CSS Datei muss nun in das Kunden-Modul über GitHub eingecheckt werden. Mehr dazu finden Sie im nächsten Punkt 2 - Die CSS Datei einchecken


2 - Die CSS Datei einchecken

In Diesem Schritt wird erklärt worauf Sie beim Einchecken und Aktualisieren einer neuen Datei und somit einer neuen Modulversion in unseren Repositorys mit Odoo beachten müssen. Die Nutzung von Github oder das Arbeiten mit Repositorys wird hier nicht im Detail erläutert.

Die in Punkt 1 (Das Styling kreieren und testen) gespeicherte CSS Datei muss nun in das Kundenmodul eingecheckt werden. Hierzu benötigen Sie einen Benutzer bei Gitbub.com und die nötigen Zugangsrechte für das Repository des Kunden.


Der Aufbau des Theme-Moduls (vereinfacht dargestellt)

odoo-kundenrepository

|__ modules

    |__ eq_theme_kundenname

    |      |__ static

    |      |      |__ src

    |      |            |__ css

    |      |                  eq_theme_customer.css

    |      |__

    |      |__

    __openerp__.py

   RELEASE_NOTES.md


Die oben 3 angezeigten Dateien aus der Baumstruktur

  • eq_theme_customer.css
  • __openerp__.py
  • RELEASE_NOTES.md

müssen für ein Update aktualisiert werden.

Wichtig: Beim Arbeiten mit Repositorys immer vorher einen Pull durchführen um zu prüfen ob das Modul nicht schon durch jemand anderes aktualisiert wurde. Sollte dies der Fall sein, müssen Sie genau prüfen welche Änderungen im Vergleich zu Ihrer Datei bestehen und diese Änderungen zusammenführen.

  1. Die eq_theme_customer.css Datei muss im optimalfall einfach nur überschrieben werden, insofern kein aktuellerer Stand / Update der Datei besteht
  2. In der __openerp__.py muss die Versionsnummer um 1 hochgezählt werden. Dies finden Sie im Code hier:

    In diesem Beispiel müsste die Versionsnummer von 1.0.2 auf 1.0.3 hochgezählt werden
  3. Unter RELEASE_NOTES.md werden die Änderungen in kurzen, sinnvollen Erklärungen dokumentiert. Dabei ist der Aufbau z.B. wie folgt:

    ### 03.10.2016 (Datum der Änderung)

    ### Version 1.0.3 (Hier die Versionsnummer natürlich mit aktualisieren)

    #### FIX (Mögliche Zustände hier, ADD, FIX, CHG, IMP)

    - An dieser folgenden Stelle noch in kurzer schriftlicher Form was geändert wurde

Alle Änderungen müssen unbedingt in den Branch develop eingespielt werden.


3 - Die Änderungen online sehen

Damit die Änderungen am Theme in der CSS Datei auch online zu sehen sind muss das System erst durch uns, mittels unseres release_managers, auf die neuen Versionen upgedatet werden.
Hierzu benötigen wir lediglich die Information wo und welche Änderungen in welchem Repository vorgenommen wurden und welche Versionsnummer der aktuelle Stand haben muss.




Rechtliche Hinweise / Impressum