- 23 May 2022
- 2 Minutes to read
Theme Editor Overview
- Updated on 23 May 2022
- 2 Minutes to read
The Theme Editor edits the instance UI.
The changes made in the Theme Editor can be applied immediately without writing or changing the code on the default LESS files for Decisions. Users can select to edit the User Portal, Designer Studio, or Mobile theme. After selecting a theme, the Theme Editor lists all UI elements within that theme that can be changed.
A common use case may involve changing the color scheme to better fit with branding. Furthermore, any navigational icons, loading icons, etc may also be changed.
Accessing the Theme Editor
To view the Theme Editor. open the System folder from the Studio. Right-click on it to view the System's Action then select Theme Editor.
The following UI may be edited with the Theme Editor:
- User Portal
The left panel displays the different UI elements within the selected UI Theme. Specific elements may be found via the search bar.
There are four element types available for editing.
Selecting an element populates the right panel with configurable options. Each type may be manually edited via the Edit action. Selecting the Pick Variable option instead lets this element mirror the styling of the selected elements. This may be useful when needing to preserve the same color scheme, icons, etc. across multiple UIs.
Applying a Change in the Theme Editor
- In the Theme Editor window, select User Portal from the top radio button list. Expand portal then expand topbar.
- Select background. In the right-side panel, click Pick Color and click the pencil icon. Select a color and click PICK.
- Click SAVE. The Save Theme window will allow the user to either apply the changes or to only save the changes and apply them later.
Applying changes requires the Portal to reload.Are changes not appearing after reload?Try clearing the browser's cache to update the theme.
Import/Exporting Theme Editor Settings
To transfer Theme Editor Settings from one instance to another, copy the custom .less files(s) formatted as "theme.[UITheme]-custom" found under C:\Program Files\Decisions\Decisions Web Host\HUI\styles\less\themes of the originating instance and paste them into the same directory in another instance.
These custom files generate and then update automatically upon any changes made to the instance's Theme Editor. These files will also stay in the file system even after upgrading.
After pasting the custom .less files, restart the Service Host Manager of the instance. Upon a successful restart, the instance will apply the imported Theme Editor settings.
Reverting Theme Editor Settings
Navigate to C:\Program Files\Decisions\Decisions Server\wwwroot\styles\Less\themes and delete the "theme.[UITheme]-custom" .less file(s) and then restart the application.