This guide intends to describe the various options to customize the visualization of i-net Clear Reports remote GUI applications. It will therefore cover how to modify the look and feel of the Remote Interface and its software components.

This guide will be quite technical and is intended for programmers with knowledge about Java, HTML and CSS.

The Java report viewer is using the look and feel of the Swing framework. The applet (Java viewer in the browser) use the platform default look and feel. If you want use your own look and feel or another look and feel then you need to set it before you create an instance of the viewer. The follow sample show it for the Nimbus look and feel.

try {
    UIManager.setLookAndFeel( "javax.swing.plaf.nimbus.NimbusLookAndFeel" );
} catch (Exception ex) {
    ex.printStackTrace();
}

The Remote Interface heavily relies on a Bootstrap-based implementation. Bootstrap is a popular HTML, JS and CSS framework to create responsive web pages. It allows users to customize a wide range of properties that will affect the whole appearance.

The theme plugin must be installed and activated to use the theme functions. There are some different ways to to add your corporate design colors:

1. Use predefined theme as default theme
2. Use downloaded theme as default theme
3. Creating a default theme by changing primary colors
4. Creating a custom less file

In the configuration manager dialog Appearance it is possible to set a predefined theme that will be used as standard theme for the Bootstrap based applications of the i-net Clear Reports remote interface.

All themes are located in the themes folder and have a subdirectory containing the less files for Bootstrap 3. To add a theme to i-net Clear Reports you need to create a subfolder in the themes folder of the i-net Clear Reports installation. The name of the subdirectory is the name of the theme.

You can put multiple .less or .css files into this theme folder and they will be added and compiled to the style. If you want to import other .less files into an existing one in the themes folder, you need to create an additional subfolder or these files would be imported twice.

In order to activate, e.g. a theme example1 go to the configuration manager dialog Appearance and select the theme example1. After you saved this setting this theme is active and used as default theme.

Another possibility is to use a design from a website that provides Bootstrap 3 themes. Please be aware of the fact that some of the themes won't look right without some adaptations. You should always use the less files instead of css if possible. Here are some examples:

• https://bootswatch.com/
• https://getbootstrap.com/customize/
• https://pikock.github.io/bootstrap-magic/app/index.html#!/editor

Additionally to the available themes you can create a user defined theme in the configuration manager dialog Appearance. For this user defined theme you can define base color, primary color and other colors. Also you can change the default font size.

If the previous method does not target your requirements you can change the whole CSS by creating a custom theme.

A simple way to create a custom theme is to create a files, e.g. mytheme.less in a mytheme folder.

If you want to get deeper into this topic, have a look at http://getbootstrap.com/customize/. There you can find many additional variables that can be set.