Customizing the User Interface
Administrators can customize specific elements of the Xpress Insight User Interface by editing a configuration file that provides string values that will used for some messages, and that identifies which uploaded image should be used for each element. This customization will then be visible to all users. The elements that can be configured are identified in the following images.
Configurable Elements
The masthead, shown blue in the HOME page figure above, is displayed at the top of the browser window while you are logged in to Xpress Insight Web Client. It contains the links to the HOME and APP pages, the user menu, and HELP link. Users with additional authorizations may see additional links.
| Item | Description |
|---|---|
| 1 | Browser favicon |
| 2 | Browser tab text |
| 3 | Login page background image |
| 4 | Login and Home page footer text and color (color is configured separately for each page) |
| 5 | Login page logo |
| 6 | Login page message |
| 7 | Help destination URL |
| 8 | Masthead icon (optional) |
| 9 | Masthead text and colour (Text is overridden by App name when an app is opened) |
| 10 | Home page background image |
|
Note:
|
Configuration File
A configuration file defining the settings to be used must be created and named branding.properties. It must be uploaded to the Xpress Insight Server into the <INSTALLDIR>\insight\server\branding directory.
The login message, masthead text, login page footer text, and main page footer text can be specified as strings.
Images to be used for the favicon, logos, and backgrounds are specified using the image name and extension. They must be uploaded to the branding directory on the Xpress Insight Server—This location cannot be changed. Any image that cannot be located will be replaced by the relevant default Xpress Insight image.
browser.icon=myCorporateFavicon.ico
#(Item 1 on the User Interface figure)
browser.default-title = This text appears in the browser title
#(Item 2 on the User Interface figure)
footer-message=This text appears in the footer
#(Item 4 on the User Interface figure)
login.logo-image=myCorporateLogo.png
#(Item 5 on the User Interface figure)
login.background-image=loginPageBackground.png
#(Item 3 on the User Interface figure)
login.message=Custom Message when logging in via the web client
#(Item 6 on the User Interface figure)
login.footer-message-color=#000000
#(Item 4 (login page only) on the User Interface figure)
home.background-image=homePageBackground.png
#(Item 10 on the User Interface figure)
home.footer-message-color=#000000
#(Item 4 (home page only) on the User Interface figure)
masthead.background-color=green
#(Item 9 (banner color) on the User Interface figure)
masthead.foreground-color=#000000
#(Item 9 (text color) on the User Interface figure)
masthead.logo-image=corporateLogoSmall.png
#(Item 8 on the User Interface figure)
masthead.default-title=This text appears in the masthead page title
#(Item 9 on the User Interface figure)
masthead.default-help-url=This url links to your help pages
#(Item 7 on the User Interface figure)
|
|
Note: Changes are displayed immediately after the updates are saved to the server.
|
Image Size and Formats
The images to be used for each application must be provided in an acceptable format.
Use the following table showing the size and aspect ratio of the original default images as a reference for the images you should use.
| Usage | Accepted Formats | Preferred Size (px) |
|---|---|---|
| Favicon | .ico / .png | 16 x 16 / 32 x 32 / 64 x 64 |
| Logo | .png / .jpg | 111 x 40 (Max 80px height ) |
| Masthead icon | .png / .jpg | 45 x 45 |
| Login page background image | .png / .jpg | 2400 x 1210 |
| Home page background image | .png / .jpg | 1920 x 1281 |
|
|
Note:
Xpress Insight will centrally align and scale oversized logos and background images to fit the area. The standard FICO
Xpress Insight images will be used if the image properties for either logo and background are missing from the file, empty, or the file does not exist.
|
Configurable Strings
The login message, masthead text, login page footer text, and main page footer text can be configured.
branding.properties file.
|
|
Note: If the message properties are not added to the configuration file, the standard FICO text is used. If the message and footer properties are added but the string is not defined, the UI will not display any text in that location.
|
The character limits are shown in the table below.
| Usage | Max Char Length |
|---|---|
| Login Page Message | 60 |
| Login Footer Text | 325 |
| Masthead Text (overridden by App name when app is opened) | 100 |
| Main Page Footer Text | 325 |
| Masthead Help URL | 2048 |
Configurable Color Options
login.footer-message-color- Text shown in the footer of Login page onlyhome.footer-message-color- Text shown in the footer of the HOME page onlymasthead.background-color- Background color of the masthead that is shown on all pages except the Login Pagemasthead.foreground-color- Text color on all pages except the Login Page
Configuring the masthead.foreground-color value will also affect the title text, links, dropdown links, hover effects, and the dropdown font icon.
| Item | Description |
|---|---|
| 1 | Title Text |
| 2 | Links |
| 3 | Hover Effects |
© 2001-2023 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.