Customize colors, logo, background

You can change the colors, background image, customer logo, and other elements of the IXM Platform to match a custom corporate identity.

Access the configuration files

To adapt the layout to your custom requirements, you must edit the config.json file. To access the file, perform the following steps:

1. Navigate to the configuration files on the server at: \GVServer2\www\gv2\gf\GFWebHtmlCustomer\

2. Open one of the following folders:

   • 00000: contains the configurations for the entire server, which means for all customers. This also applies to the login area which appears before the user has logged in to the IXM Platform.

   • 000xxx: contains customer-specific settings. xxx is the customer ID. You can determine the ID using your browser’s developer tools. The values specified here override the 00000 folder, except for the login area.

   • If there’s no folder yet, create it.

3. Open the config.json file in your folder with a text editor like Notepad++. 

4. If the file doesn’t exist yet, create it with the following content:

   JSONJSON

   {
     "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": {}
   		}
   	}
   }
   

You can now configure the colors, logo and background in the config.json file. To do this, follow the instructions below. Don't forget to save your changes to the file.

Change primary color and accent color

To change the primary color and accent color of the IXM Platform, perform the following steps:

1. In the config.json file, find the attributes accent and primary.

2. To specify a new color value for accent and primary, enter a Hex color code that begins with a pound sign or hashtag (#) followed by six letters and/or numbers.

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

Change background and buttons

To change the background and button color of the IXM Platform, perform the following steps:

1. In the config.json file, find the attributes background and button.

2. To specify a new color value for background and button, enter a Hex color code that begins with a pound sign or hashtag (#) followed by six letters and/or numbers.

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

Change the font contrast

The IXM Platform uses each color value in gradations. To maintain the contrast of a color with the font color, you can set a threshold to indicate when the font color should change from black to white.

To do so, perform the following steps:

1. In the config.json file, find the attribute AccentLightContrastFrom.

2. To specify a new threshold value for the attribute AccentLightContrastFrom, enter a number.

Change the background image

To change the background image of the IXM Platform, perform the following steps:

1. In the config.json file, find the attribute backgroundImage.

2. To specify a new value for backgroundImage, enter the file path where you saved your image.

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

Change the favicon

To change the favicon which appears in the browser tab, perform the following steps:

1. In the config.json file, find the attribute favIcon.

2. To specify a new value for favIcon, enter the file path where you saved your image.

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

Change the login header

To change the login header at the top of the IXM Platform login window, perform the following steps:

1. In the config.json file, find the attribute loginHeader.

2. To specify a new value for loginHeader, enter the file path where you saved your image.

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

Add a custom logo

To add a custom logo to the IXM Platform, perform the following steps:

1. In the config.json file, find the attribute logo.

2. To specify a new value for logo, enter the file path where you saved your image.

3. Optionally, specify the display properties:

   • height: specify the height of the logo in percent.

   • paddingBottom: specify the padding at the bottom of the logo in pixel.

   • paddingLeft: specify the padding on the left side of the logo in pixel.

   • paddingRight: specify the padding on the right side of the logo in pixel.

   • paddingTop: specify the padding at the bottom of the logo in pixel.

   • width: specify the width of the logo in percent.

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

Determine the customer ID

You can determine the customer ID with the help of your browser. The instructions below are for the following browsers:

• Google Chrome

• Mozilla Firefox

Get customer ID in Google Chrome

To determine the customer ID in Google Chrome, perform the following steps:

1. Go to the URL of your IXM Platform.

2. Open the Chrome Menu in the upper right corner of the browser window and select More Tools > Developer Tools.

3. Open the Network tab.

4. Log-in to the IXM Platform with application, username, and password. 

5. After the page has loaded correctly, look for the entry login in the developer tools.

6. Select the entry login.

7. Check the CustomerID in the Preview tab on the right side.

Get customer ID in Firefox

To determine the customer ID in Mozilla Firefox, perform the following steps:

1. Go to the URL of your IXM Platform.

2. Open the Firefox menu and select Tools > Web Developer > Web Developer Tools.

3. In the developer tools, switch to the Network tab.

4. Log-in to the IXM Platform with application, username, and password.

5. After the page has loaded correctly, look for the entry login in the developer tools.

6. Select the entry login.

7. Check the CustomerID in the Response tab on the right side.