Facing of web GUI design

This chapter describes how to implement customized facing in nevisIDM.

Customization possibilities

The look of nevisIDM can be adjusted to a customer's corporate design by providing a customized CSS with corporate colors, background colors, fonts and corporate logos. The customized CSS and image resources may be contained in a specified directory, JAR file, or ZIP file. The application will always first consult the location with the customized facing when looking up css and image resources.

Basic facing includes:

• css/facing.css – Colors and background colors
• images/nevisIDM_logo.png – The logo in the upper left corner

It is possible to customize the path to the facing.css per client by setting the corresponding client property (see the chapter: Client policy). Client facing is possible wherever a session context exists (e.g., this is not the case on a logout page).

Customizing cookbook

The facing mechanism is implemented as a filter that intercepts loading of resources from the images and css directories. Facing resources must therefore be placed in a directory called images or css, respectively.

To ensure usability, the css definitions of nevisIDM have been split up into two separate files, css/facing.css and css/app.css. The file css/facing.css contains the definitions of colors, background colors and properties that are likely to be subject to change in connection with application facing. The rest of the CSS definitions are contained in the file css/app.css.

We recommend that you only customize the file facing.css, not the file app.css. If required, you can override definitions in the app.css file, by adding them to the facing.css file, which is loaded after the app.css file.

You can download several examples of the customizable resources here.

The easiest way to create a custom facing is by performing the following steps:

1. Adapt it as needed (e.g., change colors).

2. (optional) Use the developer tools of the web browser (or extensions like Firebug for Firefox) to see which definitions affect which elements for prototyping and reviewing changes.

3. Create a PNG file containing your logo as nevisIDM_logo.png.

4. (optional) Change the default logo (182x 54 pixels) via CSS.

5. (optional) Create a JAR or ZIP file. Make sure you only put the desired structure (folders and files) into the archives and nothing else, such as a parent folder.

6. Copy your customized facing resources to the server. The location of the resources must be in the instance folder of nevisIDM, for example create a facing folder in the conf folder. The location of web.gui.facing.location must be relative to the instance folder and can be specified in the nevisidm-prod.properties configuration file like the following:

   web.gui.facing.location=<path_to_your_facing>
   web.gui.facing.cache.size=100000

   1. The attribute web.gui.facing.cache.size specifies the maximum size in bytes up to which a facing entry is cached in memory. Files larger than that value are read from the disk on every access.

   2. The facing location (web.gui.facing.location) can either be a directory, a JAR file, or a ZIP file. Facing resources (CSS files or images) should be located in one of the corresponding top level directories:

      css/
      images/
      admin/css
      admin/images
      selfadmin/css
      selfadmin/images
      certupload/css
      certupload/images