Farben, Logo, Hintergund anpassen

Sie können die Farben, das Hintergrundbild, das Kundenlogo und andere Elemente der IXM Plattform ändern, um sie an eine benutzerdefinierte Corporate Identity anzupassen.

Zugriff auf die Konfigurationsdateien

Um das Layout an Ihre benutzerdefinierten Anforderungen anzupassen, müssen Sie die Datei config.json bearbeiten. Um auf die Datei zuzugreifen, führen Sie die folgenden Schritte aus:

1. Navigieren Sie zu den Konfigurationsdateien auf dem Server unter: \GVServer2\www\gv2\gf\GFWebHtmlCustomer\
2. Öffnen Sie einen der folgenden Ordner:
   • 00000: Enthält die Konfigurationen für den gesamten Server, d.h. für alle Kunden. Dies gilt auch für den Login-Bereich, der erscheint, bevor sich der Nutzer in der IXM Plattform angemeldet hat.
   • 000xxx: Enthält kundenspezifische Einstellungen. xxx ist die Kunden-ID. Sie können die Kunden-ID mithilfe der Entwickler-Tools in Ihrem Browser ermitteln. Die hier angegebenen Werte überschreiben den Ordner 00000, mit Ausnahme des Login-Bereichs.
   • Wenn noch kein Ordner vorhanden ist, erstellen Sie ihn.
3. Öffnen Sie die Datei config.json in Ihrem Ordner mit einem Texteditor wie Notepad++. 
4. Wenn die Datei noch nicht vorhanden ist, erstellen Sie sie mit folgendem Inhalt:
   JSON JSON

   {
     "common": {
   	"theme": {
   		  "colors": {
   			"accent": "#00838F",
   			"accentLightContrastFrom": "300",
   			"background": "#efefef",
   			"backgroundLightContrastFrom": "9999",
   			"button": "#F0F0F0",
   			"buttonLightContrastFrom": "800",
   			"primary": "#ffffff",
   			"primaryLightContrastFrom": "9999",
   			"warn": "#E94944",
   			"warnLightContrastFrom": "400"
   		  },
   		  "backgroundImage": "../common/assets/images/grassfish_background.jpg",
   		  "disableGF": false,
   		  "favIcon": "../common/assets/images/favIcon.png",
   		  "loginHeader": "../common/assets/images/GF_LoginHeader.jpg",
   		  "logo": {}
   		}
   	}
   }
   

Sie können nun die Farben, das Logo und den Hintergrund in der Datei config.json konfigurieren. Befolgen Sie dazu die folgenden Anweisungen. Vergessen Sie nicht, Ihre Änderungen an der Datei zu speichern.

Primärfarbe und Akzentfarbe ändern

Um die Primärfarbe und die Akzentfarbe der IXM Plattform zu ändern, führen Sie die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json nach den Attributen accent und primary.
2. Um einen neuen Farbwert für Akzent und Primärfarbe anzugeben, geben Sie einen Hexadezimal-Farbcode ein, der mit einem Rautezeichen oder Hashtag (#) beginnt, gefolgt von sechs Buchstaben und/oder Zahlen.

"theme": {
"colors": {
        "accent": "#00838F",
        "accentLightContrastFrom": "300",
        "background": "#efefef",
        "backgroundLightContrastFrom": "9999",
        "button": "#F0F0F0",
        "buttonLightContrastFrom": "800",
        "primary": "#ffffff",
        "primaryLightContrastFrom": "9999",
        "warn": "#E94944",
        "warnLightContrastFrom": "400"
      },

Hintergrund und Schaltflächen ändern

Um den Hintergrund und die Schaltflächenfarbe der IXM Plattform zu ändern, führen Sie die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json die Attribute background und button.
2. Um einen neuen Farbwert für Hintergrund und Schaltfläche anzugeben, geben Sie einen Hexadezimal-Farbcode ein, der mit einem Rautezeichen oder Hashtag (#) beginnt, gefolgt von sechs Buchstaben und/oder Zahlen.

"theme": {
"colors": {
        "accent": "#00838F",
        "accentLightContrastFrom": "300",
        "background": "#efefef",
        "backgroundLightContrastFrom": "9999",
        "button": "#F0F0F0",
        "buttonLightContrastFrom": "800",
        "primary": "#ffffff",
        "primaryLightContrastFrom": "9999",
        "warn": "#E94944",
        "warnLightContrastFrom": "400"
      },

Schriftkontrast ändern

Die IXM Plattform verwendet jeden Farbwert in Abstufungen. Um den Kontrast einer Farbe mit der Schriftfarbe beizubehalten, können Sie einen Schwellenwert festlegen, der angibt, wann die Schriftfarbe von Schwarz zu Weiß wechseln soll.

Führen Sie dazu die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json nach dem Attribut AccentLightContrastFrom.
2. Um einen neuen Schwellenwert für das Attribut AccentLightContrastFrom anzugeben, geben Sie eine Zahl ein.

Hintergrundbild ändern

Um das Hintergrundbild der IXM Plattform zu ändern, führen Sie die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json nach dem Attribut backgroundImage.
2. Wenn Sie einen neuen Wert für backgroundImage angeben möchten, geben Sie den Dateipfad ein, in dem Sie das Bild gespeichert haben.

"theme": {
"backgroundImage": "../Path_to_image/background.jpg"
}

Favicon ändern

Um das Favicon zu ändern, das auf der Registerkarte des Browsers angezeigt wird, führen Sie die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json nach dem Attribut favIcon.
2. Um einen neuen Wert für favIcon anzugeben, geben Sie den Dateipfad ein, in dem Sie Ihr Bild gespeichert haben.

"theme": {
"favIcon": "../Path_to_image/favicon.ico"
}

Login-Header ändern

Um den Login-Header am oberen Rand des IXM Platform-Anmeldefensters zu ändern, führen Sie die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json nach dem Attribut loginHeader.
2. Um einen neuen Wert für loginHeader anzugeben, geben Sie den Dateipfad ein, in dem Sie das Bild gespeichert haben.

"theme": {
	loginHeader": "../Path_to_image/favicon.jpg”
}

Benutzerdefiniertes Logo hinzufügen

Um der IXM Plattform ein benutzerdefiniertes Logo hinzuzufügen, führen Sie die folgenden Schritte aus:

1. Suchen Sie in der Datei config.json nach dem Attribut logo.
2. Wenn Sie einen neuen Wert für das Logo angeben möchten, geben Sie den Dateipfad ein, in dem Sie das Bild gespeichert haben.
3. Geben Sie optional die Anzeigeeigenschaften an:
   • height: Geben Sie die Höhe des Logos in Prozent an.
   • paddingBottom: Geben Sie den Abstand am unteren Rand des Logos in Pixel an.
   • paddingLeft: Geben Sie den Abstand auf der linken Seite des Logos in Pixel an.
   • paddingRight: Geben Sie den Abstand auf der rechten Seite des Logos in Pixel an.
   • paddingTop: Geben Sie den Abstand am unteren Rand des Logos in Pixel an.
   • width: Geben Sie die Breite des Logos in Prozent an.

"theme": {
	"logo": {
		"height": "100%",
		"paddingBottom": "",
		"paddingLeft": "5px",
		"paddingRight": "",
		"paddingTop": "2px",
		"path": "../Path_to_image/favicon.jpg”
		"width": "100%"
	}
}

Kunden-ID ermitteln

Die Kunden-ID können Sie mit Hilfe Ihres Browsers ermitteln. Die Anleitungen gelten für die folgenden Browser:

• Google Chrome
• Mozilla Firefox

Kunden-ID in Google Chrome abrufen

Um die Kunden-ID in Google Chrome zu ermitteln, führen Sie die folgenden Schritte aus:

1. Gehen Sie auf die URL Ihrer IXM Plattform.
2. Öffnen Sie das Chrome-Menü in der oberen rechten Ecke des Browserfensters und wählen Sie Weitere Tools > Entwicklertools aus.
3. Öffnen Sie die Registerkarte Netzwerk.
4. Melden Sie sich mit Anwendung, Benutzername und Passwort bei der IXM Plattform an. 
5. Nachdem die Seite korrekt geladen wurde, suchen Sie in den Entwicklertools nach dem Eintrag login.
6. Wählen Sie den Login-Eintrag aus.
7. Überprüfen Sie die Kunden-ID in der Registerkarte Vorschau auf der rechten Seite.

Kunden-ID in Firefox abrufen

Um die Kunden-ID in Mozilla Firefox zu ermitteln, führen Sie die folgenden Schritte aus:

1. Gehen Sie auf die URL Ihrer IXM Plattform.
2. Öffnen Sie das Firefox-Menü und wählen Sie Tools > Web Developer > Web Developer Tools.
3. Wechseln Sie in den Entwicklertools zur Registerkarte Netzwerk.
4. Melden Sie sich mit Anwendung, Benutzername und Passwort bei der IXM Plattform an.
5. Nachdem die Seite korrekt geladen wurde, suchen Sie in den Entwicklertools nach dem Eintrag login.
6. Wählen Sie den Login-Eintrag aus.
7. Überprüfen Sie die Kunden-ID auf der Registerkarte Antwort auf der rechten Seite.