Custom Theming

Customise AppNavi to your corporate design

The acceptance of software largely depends on its functionality and usability. An important factor is how well solutions integrate into the overall application landscape. With the "Custom Theme" option, AppNavi can be seamlessly adapted to the corporate design’s colour scheme for each individual application.

Step 1: Edit the Application

Since custom theme is to be done at the application level, the relevant application must be opened in edit mode.
• Open the portal.
• Select the "Manage tenant" section in the left navigation menu.
• Go to Applications tab.
• Click on the button with the 3 dots in front of the application and select the "Edit" option.

Step 2: Enable Custom Theme

In the next step, you need to enable custom theme for the selected application.
• Enable the Custom Design toggle.
• Go to Design tab appearing on the top menu.

Step 3: Setting the colour values

The colours can now be customised for 11 different areas. The colours can be entered via HEX codes or specified via a colour picker.
• First check which colour you want to change.
• Then click on the colour field to open the colour picker and select a colour or enter a HEX code (preceded by a "#").
• Now save the changes and go to this application in another browser window to view your changes.

The Colors tab under Design, listing all theme color fields with their current hex values.

Supported Theme Properties

The table below summarizes all ten customizable color roles, the field name shown in the Colors panel, and what each one affects in AppNavi. Full detail and screenshots for each property follow this table.

Before-and-After Glance:

A small sample of the color changes used as examples throughout this page, shown side by side. Full screenshots for every property are in the sections below.

• Primary Colour
  The primary colour affects the basic appearance of the AppNavi menu background as well as the background of the tool tips, hotspots, news and announcements.

Before — the Primary Color field selected, set to #003beb.

After — Primary Color (#003beb) applied to the AppNavi menu background and route tile panel.

• Secondary Colour
  The secondary colour affects the basic appearance of the AppNavi route tiles.

Before — the Secondary Color field selected, set to #dbdf26.

After — Secondary Color (#dbdf26) applied to the AppNavi route tiles.

• Shadow Colour
  The Shadow Colour affects all shadows within AppNavi. For example, the shadows for the route tiles, borders of the avatar and border of the menu beneath.

Before — the Shadow Color field selected, set to #ff00d0.

After — Shadow Color (#ff00d0) applied as a glow around the menu, buttons, and route tiles.

• Accent Colour
  The accent colour - as the name suggests - sets accents in AppNavi. It influences the colour of buttons (e.g. in tool tips, in the route planner or in the AppNavi menu) and other highlighted elements.

Before — the Accent Color field selected, set to #da0b49.

After — Accent Color (#da0b49) applied to the tab toggle, navigation bar highlight, and footer link.

• Accent Contrast Colour
  The accent contrast colour creates a standout from the accent colour. It is reflected in the text of many places like the logout button and other buttons.

Before — the Accent Contrast Color field selected, set to #f46b10.

After — Accent Contrast Color (#f46b10) applied to the Log Out button text on an Accent-colored button

• Primary Font Colour
  The primary font colour is usually used on areas with the primary colour, e.g. on the route tiles, in the AppNavi menu.

Before — the Primary Font Color field selected, set to #4dec09.

After — Primary Font Color (#4dec09) applied to the 'Routes' title, tab label, and route tile text.

• Secondary Font Colour
  The secondary font colour is usually used in all other areas like the info of the avatar version etc.

Before — the Secondary Font Color field selected, set to #00bbfa.

After — Secondary Font Color (#00bbfa) applied to the version info and footer text on the Information screen.

• Element Active Colour
  The element active colour is used to highlight active or selected elements like hovering on the icons etc.

Before — the Element Active Color field selected, set to #b10692.

After — Element Active Color (#b10692) applied to the selected route tile and its action icons.

• Border Colour
  The border active colour is used for all borders.

Before — the Border Color field selected, set to #159d49

After — Border Color (#159d49) applied to the route tile borders.

• Icon Colour
  The Icon Colour affects the appearance of all icons in AppNavi, for example the icons of the home and setting button etc.

Before — the Icon Color field selected, set to #a394f0.

After — Icon Color (#a394f0) applied to the home, settings, and bottom navigation icons.

Custom CSS:

The CSS tab under Design, where custom CSS rules can be added (10,000-character limit).

CSS added here will be used to design and customise AppNavi components. Please note that use of '!important' is required with every CSS property.

Example custom CSS applying custom font styling to AppNavi components.

.an-custoimi-style-1{
font-family: Times New Roman !important;
}
.on-custom-style-2{
font-family: Times New Roman !important;
Font weight: bold !important;
}

.on-custom-style-3{
font-family: Times New Roman limportant.
font-weight: bolder limportant;
}

an-custom-style-4{
font-family: Times New Roman !important;
background-color: transporent !important;
}

If a user wishes to customize the appearance of a tooltip or the borders used to highlight the element, they can do so by applying CSS on the following CSS class names:

• For borders: .an-custom-overlay-border-class
• For the tooltip: .an-custom-tooltip-class

Example CSS overriding the position of the overlay border and tooltip elements.

.an-custom-overlay-border-class {
    position: fixed !important;
}

.an-custom-tooltip-class {
    position: fixed !important;
}

Browser Compatibility
It is compatible by the given browsers mentioned below. The technology applied on custom colours is CSS variables and CSS variables are not supported by Internet Explorer.

Browser compatibility matrix for Custom Theme.

Limitations

• Custom Theme is configured per application, not tenant-wide — each application must be opened, enabled, and themed individually.
• Only the ten predefined color roles listed above can be set from the Colors tab; any other visual change (spacing, borders on elements without a dedicated role, fonts, etc.) requires Custom CSS.
• Every Custom CSS rule must include !important to override AppNavi's built-in styles — rules without it are silently ignored.
• The Custom CSS editor has a combined limit of 10,000 characters per application, shown by the character counter in the editor.
• There is no live preview while editing — changes must be saved and then checked by opening the application in a separate browser window or tab.
• Colors can only be entered as HEX values (via typing or the color picker); RGB, HSL, and named colors are not supported.
• The theming engine is built on CSS custom properties (CSS variables) and does not work in Internet Explorer; see the browser compatibility tables above.

Related Documents

Custom Theme covers the color and CSS options on the Design tab. For other personalization options, see:
• Avatar Customization – for customizing the user avatar shown in the AppNavi menu and Information screen.

https://docs.appnavi.com/docs/guide-customizing

• Standard Text Styling – for configuring fonts, sizes, and text styles used across AppNavi outside of the color roles covered here.

https://docs.appnavi.com/docs/standard-text-styling