Model: tool/Theme

Themes

Overview

Themes allow you to configure the look and feel of the entire user interface, including images, logos, colors, fonts, sizing, and positioning. Themes can also be used to manage the login and interface header text, and the theme you choose can be applied to the Login page.

You can add any number of new themes, and edit existing themes. VOSS Automate ships with a default theme, which can be used as a baseline template.

Themes are associated with user roles, and are typically associated with a specific customer (company).

Manage themes

Full HTML Help

Overview

You can use the Themes page in the Admin Portal to create a theme.

Note

To access the Themes page in the Admin Portal, go to (default menus) Role Management > Themes or use the Search bar to locate the page.

You can select the following tabs on the Themes page in the Admin Portal:

Theme Details
Branding
Login Page Details

Themes settings

Theme details tab

On the Theme Details tab of the Themes page you specify theme details:

Provide a theme name and a description

Note

Valid characters allowed for the theme name are in the range: a-zA-Z0-9_.
Specify navigation bar text
Define whether to use the theme to style the Login page
Define whether to hide the theme from lower hierarchies
Specify the site title
Upload a custom theme file, if applicable
Enable or disable backups
Define the GUI where the theme is applied

Branding tab

On the Branding tab, you can change colors via the color picker or by typing in the color hex value. When no colors are chosen in this tab, the defaults apply.

When uploading images for the theme:

Note the file size and width x height pixel dimension size restrictions. A system message displays if the image is too large.
Only PNG files are supported for the Logo image. Other images can be PNG or JPEG.
For image filenames, you can use the following characters and character types:

ALPHA / DIGIT / "-" / "." / "_" / "~"/ "#"

Image details:

Favicon: The favicon for the site. Shown on the tab and when the site is bookmarked.
- Type: PNG image or with .ico extension.
- Maximum dimensions: 256x256 pixels.
Logo: This image is used for the logo in the top left of the menu bar.
- Type: PNG image with a transparent background.
- Maximum file size: 0.5MB
- Maximum dimensions: 600 pixels in width and 192 pixels in height.
Login Logo: This image is used for the logo on the login page.
- Type: PNG image with a transparent background.
- Maximum file size: 0.5MB
- Maximum dimensions: 600 pixels in width and 192 pixels in height.
Login Background: This image is used for the login screen background.
- Type: PNG or JPEG image.
- Maximum file size: 5MB
- Maximum dimensions are 1920 pixels in width and 1080 pixels in height.
Menu Background: This image is used for the side menu background.
- Type: PNG or JPEG image.
- Maximum file size: 2MB
- Maximum dimensions: 240 pixels in width and 1040 pixels in height.

Login page details tab

The Login Page Details tab defines the theme for the Login page, including the title and banner text, cookie policy and privacy policy details.

If you add banner text (limited to 2048 characters), this is used at the bottom of the Login page.

References to the cookie policy and privacy policy in the Banner Text field should be added as placeholders, which will then resolve to the Cookie Policy and Privacy Policy data entered. The placeholders are:

{{cookie_policy}}
{{privacy_policy}}

Note

You can add multiple lines for the banner text, including paragraphs. Banner text displays exactly as you add it to this field. Cookie and security references show as links that open in a new browser tab.

Custom themes

You can create a custom theme to change the following properties of the Admin Portal:

Primary and accent colors
Logo image
Login screen background image

If the background image also contains logos, it is recommended that these be placed on the bottom of the image.
Background image for menu
Browser tab title

Themes created in the Admin Portal can't be exported in full.

Custom theme file

If you're configuring a theme in the Admin Portal, you can upload a custom Admin Portal theme file. Alternatively, you can customize a theme via the Branding tab settings.

Preview a theme

When creating a theme, you can use the toolbar Preview icon to see what your theme looks like before assigning it to a user role. Once you assign a theme to a user role it is applied to the GUI.

Theme element color references for the Admin Portal

Full HTML Help

Note

Color selection on the Branding tab of a theme always affects the Admin Portal.

To edit and manage theme files:

Refer to Less files and Theme Customization in the Advanced Configuration Guide.

Color selection is optional. Where no colors are selected, defaults apply.

If manual input of color Hex values is required, ensure the value is prefixed with #.

Admin Portal default colors

Default color reference table:

Title	Field Name	Default Value (Hex)	Notes
Primary Color	primary_colour	#000046	This is the background color for most menus and headers, as well as the text color for links and buttons.
Primary Text Color	primary_text_colour	#ffffff	This is the text color for anything with the primary color background.
Accent Color	accent_colour	#007fb0	This color is used when attention needs to be drawn for important notifications or active buttons and text.
Accent Text Color	accent_text_colour	#ffffff	This is the text color for anything with the accent color background.
Topbar Color	topbar_colour	#000046	The color used for the top bar of the site. Will use the primary color if no value is given.
Topbar Text Color	topbar_text_colour	#ffffff	This is the text color for the top bar. Will use the primary text color if no value is given.
Menu Color	menu_colour	#000046	The color used for the menu on the left. Will use the primary color if no value is given.
Menu Text Color	menu_text_colour	#ffffff	This is the text color for the menu. Will use the primary text color if no value is given.
Panel Color	panel_colour	#f2f2f2	The color used for all the panels in the app.

Title	Field Name	Default Value (Hex)	Notes
Panel Text Color	panel_text_colour	#000000	This is the text color for normal text in the app.
Input Color	input_colour	#ffffff	The background color for input fields. Will use the panel color if no value is given.
Input Text Color	input_text_colour	#414042	The text color for input fields. Will use the panel text color if no value is given.
Background Color	background_color	#e6e7e8	The color of the background behind panels.
Info Notification Color	info_notification_colour	#00ade5	The color used for info notifications.
Info Notification Text Color	info_notification_text_colour	#ffffff	This is the text color for info notifications.
Success Notification Color	success_notification_colour	#68bd17	The color used for success notifications.
Success Notification Text Color	success_notification_text_colour	#ffffff	This is the text color for success notifications.
Warning Notification Color	warn_notification_colour	#fbc403	The color used for warning notifications.
Warning Notification Text Color	warn_notification_text_colour	#000000	This is the text color for warning notifications.
Error Notification Color	error_notification_colour	#dc0c00	The color used for error notifications.
Error Notification Text Color	error_notification_text_colour	#ffffff	This is the text color for error notifications.

On the Admin Portal, consider the color selection on the Branding tab:

Note

For details on images and logos, see: Create a Theme in the Business Admin Portal.
If a color value appears blank, default values apply.
Sub-menu and sub-sub-menu backgrounds are rendered as percentages of the Menu Color.

Admin Portal

Model Details: tool/Theme

An asterisk * in the title indicates the field is mandatory.
If a field has a default value, it is shown in the Description column.
If the field type is an array, the Field Name has a .[n] suffix, where n is the array index placeholder.
Object and array field names are listed to provide context. If a field belongs to an object or an array, the full field name is shown in dot separated notation.

Title															Description																				Details

File-based themes (Less files)	If you're using a file-based theme, this takes precedence. This is a CSS file that may be added, downloaded/exported, edited, and re-imported, to apply a theme. For more information, see Less Files and Customizing Themes in the Advanced Configuration Guide.
Custom branding options	Configured directly within the GUI