This document describes the rebranding options available for the web application, allowing you to customize its appearance to meet your specific needs. It covers the various customization mechanisms supported by the application, such as modifying CSS properties to adjust the visual design, replacing images and icons with organization-specific assets, customizing application titles and displayed text, and creating new theme configurations to ensure a consistent look and feel throughout the application.
When add branding data to the application, you should add all the resources to a branding
folder. The location of this folder can be specified in the
application.properties file by setting the
com.softwareag.natural.client.config.branding.folder property. If this
property is not set, the next possible location is the $NHA_HOME/conf
folder.
The available CSS themes are configured in the application.properties file using the following property:
com.softwareag.natural.client.config.themesList
The default value is:
emulator.css,theme_dark.css,theme_light.css
These values refer to the default CSS theme files included in the Natural Availability Server archive.
You can customize the themesList property to use different CSS files. In
addition to specifying only the CSS file name, you can provide a custom display name using
the following format:
<display-name>=<css-file-name>
For example:
com.softwareag.natural.client.config.themesList=Theme1=emulator.css,Theme2=theme_dark.css,Theme3=theme_light.css
In this configuration, the names displayed in the web application theme selector will be
Theme1, Theme2, and Theme3, while the
corresponding CSS files used by the application remain emulator.css,
theme_dark.css, and theme_light.css.
When the application starts, it processes each theme listed in themesList
and resolves the corresponding CSS file in the following order:
Branding resources
The application first searches for the CSS file in the branding resources directory under the themes directory. If found, this version is used.
Bundled resources
If the file is not available in the branding resources, the application searches for it in the application's bundled assets inside the WAR archive.
Unavailable resources
If the file cannot be found in either location, it is ignored and not included in the list of available themes.
The list of available themes, containing each theme's display name and corresponding CSS resource, is then exposed to the client.
If only one theme is defined in themesList, the theme selector is hidden and
that theme is applied automatically.
The first theme in themesList is used as the default for first-time users.
As previously mentioned, when creating a new CSS file for a theme, it should be located under:
<branding-folder>/themes/<new-theme-file>.css
The file should contain a root entry with the updated CSS properties defined under this entry. The following is an example of the CSS file structure:
:root {
--nha-custom-login-background-color: yellow;
--nha-custom-login-input-background-color: brown;
}
See the following sections for the properties that can be modified. Any property that is not explicitly defined will use the default value provided by the Natural Availability Server.
You can customize the following color-related CSS properties.
| Property | Description |
|---|---|
--nha-custom-login-background-color |
Background color of the login screen wrapper area. |
--nha-custom-login-text-color |
Text color of labels, headings, and paragraph text on the login screen. |
--nha-custom-login-input-background-color |
Background color of the username and password input fields on the login screen. |
--nha-custom-login-input-text-color |
Text color of the username and password input fields on the login screen. |
--nha-custom-login-button-background-color |
Background color of the button on the login screen. |
--nha-custom-login-button-text-color |
Text color of the button on the login screen. |
--nha-custom-login-footer-background-color |
Background color of the copyright footer area at the bottom of the login screen. |
--nha-custom-login-footer-text-color |
Text color of the copyright notice in the footer of the login screen. |
| Property | Description |
|---|---|
--nha-custom-screen-background-color |
Background color of the main terminal screen area. |
--nha-custom-screen-text-color |
Text color of output fields on the main terminal screen. |
--nha-custom-screen-input-background-color |
Background color of editable input fields on the terminal screen and inside popup windows. |
--nha-custom-screen-input-text-color |
Text color of editable input fields on the terminal screen and inside popup windows. |
| Property | Description |
|---|---|
--nha-custom-screen-blue-color |
A color that represents the blue color. |
--nha-custom-screen-red-color |
A color that represents the red color. |
--nha-custom-screen-magenta-color |
A color that represents the magenta color. |
--nha-custom-screen-green-color |
A color that represents the green color. |
--nha-custom-screen-cyan-color |
A color that represents the cyan color. |
--nha-custom-screen-yellow-color |
A color that represents the yellow color. |
| Property | Description |
|---|---|
--nha-custom-toolbar-background-color |
Background color of the entire top navigation bar, including the logo/brand area on the left and the icon buttons on the right. |
--nha-custom-toolbar-text-color |
Text color of items in the top navigation bar. Also used as the default
icon color unless --nha-custom-toolbar-icon-color is set
separately.
|
--nha-custom-toolbar-icon-color |
Color of the icon glyphs (download, upload, copy, refresh, logout) in the top navigation bar. Defaults to the toolbar text color. Set this to use a different color for icons while keeping a separate text color. |
--nha-custom-toolbar-hover-background-color |
Background color applied to toolbar items when the mouse hovers over them. |
--nha-custom-toolbar-toggle-color |
Color of the hamburger menu toggle button that appears on small screens. |
| Property | Description |
|---|---|
--nha-custom-pfkeys-panel-background-color |
Background color of the PF key panel on the right side of the screen. |
--nha-custom-pfkey-background-color |
Background color of regular PF key buttons (all keys except Enter). |
--nha-custom-pfkey-text-color |
Text/label color of regular PF key buttons. |
--nha-custom-pfkey-hover-background-color |
Background color of regular PF key buttons when hovered or focused. |
--nha-custom-enter-key-background-color |
Background color of the Enter button, which is visually distinct from the other PF keys. |
--nha-custom-enter-key-text-color |
Text color of the Enter button. |
--nha-custom-enter-key-hover-background-color |
Background color of the Enter button when hovered or focused. |
| Property | Description |
|---|---|
--nha-custom-window-title-text-color |
Text color of the title label displayed on the top border of popup/child windows. |
--nha-custom-window-title-background-color |
Background color behind the title text of popup/child windows. This color visually "breaks" the window border line so the title appears to sit on top of it. |
--nha-custom-window-background-color |
Background color of the window. |
--nha-custom-window-border-width |
Border width of the window. |
--nha-custom-window-border-color |
Border color of the window. |
--nha-custom-window-input-text-color |
Text color of the window's input fields. |
--nha-custom-window-input-background-color |
Background color of the window's input fields. |
--nha-custom-screen-text-color |
Text color of the window's labels. |
| Property | Description |
|---|---|
--nha-custom-message-background-color |
Background color of status/message line notifications (for example, upload/download messages shown in the screen). |
--nha-custom-message-text-color |
Text color of status/message line notifications. |
--nha-custom-download-indicator-color |
Background color of the download progress indicator badge shown in the toolbar when a file download is in progress or completed. |
| Property | Description |
|---|---|
--nha-custom-font-family |
The font to be used for the terminal window.
This could also support a
list of fallbacks such as Note |
You can customize the following additional CSS variables.
| Property | Description |
|---|---|
--nha-custom-button-radius |
The radius of an element's corners. By increasing this value, the corners become more rounded. |
--nha-custom-input-border-color |
The color used for the border of the input fields. |
--nha-custom-input-border-size |
The width of the border used for the input fields. |
You can customize the PF (Program Function) key display to control how the PF keys are displayed in the web application.
By default, the PF keys are displayed in a dedicated toolbar:
On the right side for left-to-right (LTR) layouts.
On the left side for right-to-left (RTL) layouts.
You can configure the PF key rendering behavior using the following property in the application.properties file:
com.softwareag.natural.client.config.pfKeyRendering=<value>
The supported values are:
| Value | Description |
|---|---|
auto |
Automatically determines the layout direction and displays the PF keys in a dedicated toolbar, that is, on the right side for left-to-right (LTR) layouts, or on the left side for right-to-left (RTL) layouts. |
left |
Displays the PF keys in a dedicated toolbar on the left side of the screen, regardless of the layout direction. |
right |
Displays the PF keys in a dedicated toolbar on the right side of the screen, regardless of the layout direction. |
in-line |
Displays the PF keys inside the screen content area, similar to traditional
terminal emulators. In this mode, the PF keys are rendered as text elements, not
interactive toolbar buttons. The display location and format are controlled by
additional properties:
|
You can change the content of both the login screen and the terminal window. To do so, create a branding.json file and add it to the root of the branding folder.
The following is an example of a branding.json file:
{
"login": {
"fields": [
{
"id": "application-name",
"visible": true,
"text": "Natural Availability Server"
},
{
"id": "version-text",
"visible": true,
"text": "9.3.4"
},
{
"id": "copyright",
"visible": true,
"text": "Copyright © 2026 Software GmbH, Darmstadt, Germany and/or its subsidiaries and/or its affiliates and/or their licensors"
}
],
"extraContent": [
{
"zone": "above-logo",
"type": "html",
"src": "/extraContent/<image>"
},
{
"zone": "below-logo",
"type": "html",
"src": "/extraContent/<image>"
},
{
"zone": "footer",
"type": "html",
"src": "/extraContent/<image>"
},
{
"zone": "under-login-button",
"type": "html",
"src": "/extraContent/<image>"
}
],
"images": [
{
"type": "fav-icon",
"image": "images/<image>"
},
{
"type": "login-image",
"image": "images/<image>"
}
]
},
"main-window": {
"images": [
{
"type": "top-menu",
"image": "images/<image>"
}
]
}
}
The login screen supports customization through several configuration sections. These are described below.
You can configure the following properties under the login/fields section.
You can modify the value of each property, or remove the property to hide the
corresponding element from the login screen.
application-name - Defines the application name displayed on the login
screen. The default value is "Natural Availability Server".
version-text - Defines the version text displayed on the login screen.
You can replace or remove this value.
copyright - Defines the copyright statement displayed on the login
screen. You can replace or remove this value.
Under the login/extraContent section, you can add custom HTML content to
different areas of the login screen. The supported locations for zone are:
above-logo - Above the logo image.
below-logo - Below the logo image.
footer - As a footer above the copyright text.
under-login-button- Below the login button.
Note
The provided HTML content must contain only elements that are valid inside the HTML
body. It must not include the <html>, <head>, or
<body> tags.
Under the login/images section, you can customize the following images:
fav-icon - The icon displayed in the browser tab. The recommended size
is 16x16 pixels.
login-image - The main image displayed.
Under the main-window/images section, you can customize the image displayed
in the top menu of the main application window by setting the type to
top-menu.