Skip to main content
Version: 2.75.x.x LTS

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

While it is possible to customize all static resources found in the nevisidm-app-*.ear ). 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 so required, you can override definitions in app.css by adding them to the file facing.css which is loaded after app.css.

You can download several examples of the customizable resources here.

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

Extract the facing.css from the deployed nevisIDM application:
 find /var/opt/adnwildfly/instances/nevisidm/ -name facing.css
  • Save the file to another location and adapt it as needed (e.g., change colors).
  • (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.
  • Create a PNG file containing your logo as nevisIDM_logo.png.
  • (optional) The default logo (182x 54 pixels) can be changed via CSS.
  • (optional) Create a JAR or ZIP file. Make sure you only put the desired structure (folders and files) into the archives and noting else, such as a parent folder.
  • Copy your customized facing resources to the server and specify the location in the configuration by adding the following definition to nevisidm-prod.properties. The location of the resources must be in the instance folder of nevisIDM in case of standalone deployment, for example create a facing folder in the conf folder.
web.gui.facing.location=<path_to_your_facing>
web.gui.facing.cache.size=100000

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. 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

Alternatively, the facing location can be specified on installation of nevisIDM. This is achieved by specifying the "IDM_FACING_LOCATION" parameter when setting up the nevisIDM instance:

 nevisidm handover IDM_FACING_LOCATION=/my/config/my_idm_facing.jar