A Self-Service Portal that reflects your organization's own colors feels like a natural part of the workplace, not a generic support tool bolted on to it. That familiarity builds trust: End Users are more likely to turn to the portal, and to feel at ease using it, when it looks and feels like it belongs to the organization they already know.
This page guides you on how to select the theme colors to get the look you want for your Self-Service Portal.
Available for:
Customers using SysAid Spaces. If you're using SysAid Classic, see Theme Colors in SysAid Classic.
Users with SysAdmin permissions. To learn more about permissions, see Managing Agent and Admin Permissions.
How it works
SysAid includes two default themes, SysAid Theme and SysAid High Contrast. These default themes are locked: you can preview them, delete them, or duplicate them, but you can't edit their colors directly.
To customize a default theme, duplicate it first. The duplicate opens as a fully editable copy that you can rename and adjust. You can also create a theme from scratch instead of duplicating one. See Managing themes.
Different companies in your account can also use different themes instead of all sharing the same account-wide default. For example, you might apply a branded theme to one company's Self-Service Portal and the default SysAid theme to another. To assign a specific theme to a company, see Managing Companies.
Theme color settings
Each theme controls the color of a specific set of Self-Service Portal elements. The following sections describe what each color setting affects, so you know what you're changing before you save a theme.
The Self-Service Portal with the SysAid Theme:
The same page with the SysAid High Contrast theme:
Primary
The Primary element affects the following UI objects:
Main buttons
Active tab background
Indicator background
Fields displayed in list
Dividers
Link text
Headings
Toolbox Item icon
Primary contrast
The Primary Contrast element affects elements that display the primary color as the text or the background. For examples, see the white text on the green buttons and the active tab in the SysAid Theme screenshot above.
Background
The Background element affects the main background for all pages in the Self-Service Portal. For examples, see the white backgrounds in the screenshots above.
Text
The Text element affects most of the text items in the Self-Service Portal.
Headlines
The Headlines element affects the following UI objects:
Page headlines
Toolbox Item headlines
Service record headlines
Menu text
The Menu Text element affects the following UI objects:
Text color for profile name
Background color for main menu
Field backgrounds on the service record submission form
Button background
The Button Background element affects the background color of action buttons.
Button content
The Button Content element affects the text color for action buttons.
Hover
The Hover element affects the objects that change color when you hover over them.
Header background
The Header Background element affects the header on the top of every page in the Self-Service Portal.
Toolbar background
The Toolbar Background element affects the background of the toolbar underneath the header. For an example, see the light blue toolbar with the search box in the SysAid Theme screenshot above.
Borders
The Borders element affects the borders of all fields and areas.
Chatbot button (background color)
This Chatbot button setting affects the background color of the AI Chatbot button in the Self-Service Portal.
Chatbot button (text and outline color)
This Chatbot button setting affects the text and outline color of the AI Chatbot button.
Managing themes
Adding a theme
Go to Settings > Self-Service Portal > Themes.
Click + New.
Enter a Theme name.
Set a color for each theme element. See Theme color settings.
(Optional) Leave Users can switch to this theme selected to let End Users choose this theme. It's selected by default. See Letting end users choose their own theme.
Click Preview Theme to see your changes, then click Save.
Editing a theme
The two default themes, SysAid Theme and SysAid High Contrast, can't be edited directly. Duplicate a default theme first if you want to customize it. See Duplicating a theme.
Go to Settings > Self-Service Portal > Themes.
Click the theme you want to edit.
Update the Theme name or any color setting. See Theme color settings.
Click Preview Theme to see your changes, then click Save.
Deleting a theme
To delete a theme:
Go to Settings > Self-Service Portal > Themes.
Select the checkbox next to the theme or themes you want to delete.
Click Delete at the top.
Please note:
If a deleted theme was assigned to a company, that company's theme is reset to the default option.
Duplicating a theme
To duplicate a theme:
Go to Settings > Self-Service Portal > Themes.
Select the checkbox next to the theme you want to duplicate.
Click Duplicate.
The duplicate appears in the Themes list as a new, fully editable theme. See Editing a theme.
Applying a theme
Setting the account-wide default theme
Go to Settings > Self-Service Portal > Portal Settings.
Under Theme & Banner, select a theme from the Default theme drop-down list.
Click Save.
All users in your account see this theme unless they belong to a company with a different theme assigned, or unless they've chosen a different available theme for themselves. See Setting a theme for a specific company and Letting end users choose their own theme.
Setting a theme for a specific company
You can assign a specific theme to a company so that only users from that company see it, instead of the account-wide default. For the full procedure, see Managing Companies.
Letting end users choose their own theme
End Users can choose their own theme from My Settings, independent of the account-wide default or their company's assigned theme.
Click your user profile icon in the top-right corner, then click My Settings.
Under Custom theme, select an available theme.
Click Submit.