Skip to content

Customize the User Interface

Some of the Clarive application web interface look-and-feel can be customized by the user in the [env].yml file.

There are 2 basic customizations available:

  • Logo files - the logo shown on the top left of the screen
  • CSS files - one or more cascading stylesheet files

File Location on the Server

We recommend that custom files (logos or CSS stylesheets) reside withing a plugin /public/ folder. The feature /root folder on the Clarive web server node is also supported, but has been deprecated in favor of using a plugins/myplugin/public path.

In general, the browser will attempt to load the file from a URL, therefore custom files can reside anywhere under the Clarive main URL.

For example, if the logo file resides physically in the CLARIVE_BASE/plugins/myplugin/public/mylogo.png, then you should be able to load the file through the following URL:

http://myclariveserver/plugin/myplugin/mylogo.png

While your config myconfig.yml file will have the following path (in fact, the relative URL to your file):

logo_file: /plugin/myplugin/mylogo.png

Changing the logo files

To change the application logo files, 6 different [env].yml config keys are available:

logo_file: /path/to/logo.png logo_style: width: 200px marginTop: -8px
login_logo: /path/to/login-logo.png

The logo file will be shown as a source of a img tag in the application.

The width is optional, but it allows you to easily resize a logo without having to edit the image file (which usually requires aditional tools).

  • logo_file - Is the logo shown in the top left of the main application navigation menu
  • logo_width - (deprecated in favor of logo_style) Is the optional logo width applied to the logo_file img tag
  • logo_style - Set the style attributes of the img tag style property for the logo. Attributes should be in Javascript camel case (ie. margin-top becomes marginTop)
  • login_logo - Is the logo shown in the login page of the application.
  • login_logo_width - Is the optional logo width applied to the login_logo img tag
  • login_image - The main image shown in the login page to the left.

This is a perfect strategy to better identify your Clarive instance in case you have more than one instance installed. Or simply to customize the instance info for your users.

Add the following entry to your [env].yml file:

logo_text: MY INSTANCE

Restart the server and refresh the browser. The text will show up next to the top-left logo in the application navigation menu.

Custom CSS

Custom CSS is a convenient and powerful way to add custom styles to the Clarive application HTML.

To add your styles to the Clarive web application, use the following [env].yml file entry:

custom_css: /path/to/mystyles.css

Adding HTML Snippets and JavaScript to the home page

Sometimes you may want to load your own JavaScript files or execute web configuration snippets on the application homepage load.

To add HTML code at the bottom:

1) Create a feature folder at CLARIVE_BASE/features/yourfeature

2) Create a subfolder for the snippet file CLARIVE_BASE/features/yourfeature/root/include/head.html

3) Add your HTML snippet and save the file.

4) Reload the homepage. The snippet should be seen at the bottom.

!!! note Snippets that contain the pattern <script type="javascript" src="..."> will not be printed as-is. The javascript src path will be extracted and loaded with a javascript require statement instead and the rest of the head.html file will be ignored. If you need to load the full script, supress the type="javascript" attribute from your script.

Deprecated in version 7.2

These configuration parameters are no longer supported:

  • logo_narrow_file - the logo shown in the top left of the main application navigation menu when in narrow mode
  • logo_narrow_width - the optional logo width ot apply to the logo_narrow_file

The narrow logo ceased to exist after the ui changes of version 7.2.