Customize the User Interface
Some of the Clarive application web interface look-and-feel can be customized
by the user in the
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
/public/ folder. The feature
/root folder on the Clarive web server
node is also supported, but has been deprecated in favor of using a
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:
While your config
myconfig.yml file will have the following path (in fact,
the relative URL to your file):
Changing the logo files¶
To change the application logo files, 6 different
[env].yml config keys are
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_style- Set the style attributes of the
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_image- The main image shown in the login page to the left.
Add a text next to the logo¶
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
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 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:
To add HTML code at the bottom:
1) Create a feature folder at
2) Create a subfolder for the snippet file
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
src path will be
require statement instead and the rest
head.html file will be ignored. If you need to load the full 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
The narrow logo ceased to exist after the ui changes of version 7.2.