Dokumentation

Version 4.37

ältere Versionen
Read documentation in
here

Individualisierung

Die Manja Benutzeroberfläche individualisieren

Mit entsprechenden Kenntnissen lässt sich das Aussehen von Manja gemäß der eigenen Corporate Identity/dem eigenen Corporate Design anpassen.

Hinweis: Die im Folgenden beschriebene Individualisierung der Benutzeroberfläche setzt grundlegende Kenntnisse über CSS und HTML voraus.

Die Individualisierung der Benutzeroberfläche von Manja können Sie mit Hilfe eigener LESS-Dateien, Text-Dateien (sprachspezifisch) und HTML-Vorlagen realisieren.

Benutzen Sie FTP oder SCP (z.B. „WinSCP“) um auf die Dateien zuzugreifen. Alle weiteren Pfade beziehen sich hier auf das Wurzelverzeichnis der Web-Applikation, z.B. „/opt/xyz-manja/web/“.

Änderungen nehmen Sie bitte ausschließlich innerhalb des Ordners „public/custom“ vor. So bleiben Ihre individuellen Änderungen auch nach Installation neuerer Versionen der Software erhalten.

Verzeichnisse

Zurück nach oben
  • public/custom/ und dessen Unterverzeichnisse dienen als Ablage für Dateien der indivualisierten Benutzeroberfläche
  • public/custom/files/ dient als Ablage für öffentlich verfügbare Dateien (z.B. das Logo)
  • public/custom/locale/ enthält Dateien für die Texte (allgemein und sprachspezifisch)
  • public/custom/templates/ enthält HTML-Templates
  • public/custom/publication_templates/ enthält individualisierte Veröffentlichungs-Templates

Manja prüft beim Seitenaufruf jeweils, ob bestimmte Dateien in public/custom/ vorhanden sind, und verwendet diese dann.

Texte und CSS-Dateien werden jeweils von der allgemeinsten Version zur speziellsten Version zusammengeführt.

 

Die Texte für „en_US“ werden zum Beispiel aus folgenden Dateien zusammengetragen:

  • locale/common.txt
  • locale/en.txt
  • locale/en_US.txt
  • public/custom/locale/common.txt
  • public/custom/locale/en.txt
  • public/custom/locale/en_US.txt

 

Die CSS-Datei „styles.de_DE.css“ wird zum Beispiel aus folgenden Dateien zusammengesetzt:

  • public/skin/d/f/styles.less
  • public/skin/d/f/styles.de_DE.less
  • public/custom/styles.less
  • public/custom/styles.de.less
  • public/custom/styles.de_DE.less

 

Custom-Templates werden automatisch verwendet sobald die jeweilige Datei in „public/custom/templates/“ existiert.

Texte

Zurück nach oben

Alle Texte der Manja Benutzeroberfläche sind lokalisierbar, können also mehrsprachig definiert werden. Dazu werden einfache Text-Dateien verwendet, jede Zeile der Text-Datei besteht aus key=Text, wobei key durch die Anwendung vordefiniert ist. Der Text selbst ist – je nach konkreter Verwendung – ein einfaches Wort, wie z.B. die Beschriftung eines Buttons, ein Text-Fragment, ein vollständiger Satz oder auch ein ganzer Absatz. Zeilenumbrüche werden durch ein „\n“ dargestellt.

Ziel: public/custom/locale/*.txt
Referenz: locale/*.txt

 

Im Verzeichnis public/custom/locale/ können Sie Dateien mit eigenen Texten anlegen:

  • common.txt – sprachunabhängige Texte (wie z.B. ein Fenstertitel)
  • <language>.txt – Texte in der jeweiligen Sprache, z.B. de.txt oder en.txt
  • <language>_<country>.txt – Texte in länderspezifischer Schreibweise, z.B. en_US.txt oder en_GB.txt

 

Als Referenz (zum ermitteln des jeweiligen Schlüssels/“key“) dienen die Dateien im locale/ Verzeichnis.

Stylesheets (CSS / LESS)

Zurück nach oben

Alle Farben und Grafiken (mit wenigen Ausnahmen) sind per CSS definiert, und somit leicht austauschbar. Dazu werden verschiedene LESS-Dateien verwendet.

LESS ist eine dynamische Stylesheet-Sprache, die CSS um diverse praktische Funktionen ergänzt: weitere Informationen zu LESS.

Manja kompiliert .less-Dateien automatisch zu .css-Dateien.

Ziel: public/custom/*.less
Referenz: public/skin/d/f/*.less

Im Verzeichnis public/custom/ können Sie folgende LESS-Dateien anlegen:

  • styles.less – allgemeine Styles,
  • styles.<language>.less – sprachspezifische Styles, z.B. styles.en.less – um Grafiken, die Text in jeweiliger Sprache enthalten, einzubinden,
  • styles.<language>_<country>.less – länderspezifische Styles, z.B. styles.en_GB.less,
  • styles-print.less – Styles für Druckansicht.

Tipp: Style-Definitionen lassen sich in modernen Browsern leicht mit Hilfe der Webentwicklertools ermitteln: Im Firefox zum Beispiel per Rechtsklick auf das Element, dann „Element untersuchen“. Es erscheinen die Webentwicklertools mit Fokus auf das Element sowie dazugehöriger Style-Regeln. In Chrome, IE und Safari sind vergleichbare Tools integriert. Diese können per Taste F12 aufgerufen werden.

 

Styles ergänzen, nicht ersetzen

Individualisierte LESS-Dateien sollten ausschließlich Ergänzungen enthalten, die z.B. ein Logo austauschen oder einzelne Farben ändern.

Bitte verwenden Sie keine vollständige Kopie von public/skin/d/f/styles.less!

HTML-Vorlagen

Zurück nach oben

In den HTML-Vorlagen werden das allgemeine Seitenlayout, sowie einzelne Elemente (z.B. Tabellen, Dialoge und Formulare) der Anwendung definiert.

Das Seitenlayout ist in der Vorlage „page.html“ definiert, diese inkludiert weitere Vorlagen für die jeweilige Ansicht.

Mit jeder neuen Produkt-Version können einzelne Vorlagen geändert werden und Neue können hinzukommen. Einige Vorlagen enthalten auch JavaScript-Code, der in einer neuen Produkt-Version ebenfalls geändert worden sein kann.

Daher sollten bei der Individualisierung lediglich die für diesen Zweck vorgesehenen Vorlagen „page-meta.html“ und „page-header.html“ individualisiert werden. Vor der Anpassung weiterer Vorlagen halten Sie bitte Rücksprache mit uns, um Konflikte beim nächsten Software-Update zu vermeiden.

Ziel: public/custom/templates/*.html
Referenz: public/skin/d/t/*.html

Für die Indiviualisierung vorgesehene Vorlagen:

  • page-meta.html (z.B. um eigenes Shortcut-Icon zu definieren oder externen Tracking-Dienst zu integrieren)
  • page-header.html (z.B. um zusätzliche Navigations-Elemente in Kopfbereich einzufügen).

Informationen zur Syntax der HTML-Vorlagen finden Sie hier.