Customize the Self-service Theme¶
This section provides steps to customize and add a Self-Service theme from within the legacy Admin Portal.
Customize an Existing Self-service Theme¶
To customize an existing Self-service theme:
Log in to the legacy Admin Portal.
Choose the hierarchy level at which the theme will be applied.
Note
Themes can only be customized by a Provider Administrator (or higher).
Go to (default menus) Role Management > Themes to open the Themes list view.
Click the Self-service theme you wish to download.
Click Action > Download. The file is exported in a .zip archive.
Note
The file is exported with the name of the theme. The archive contains a folder and a
.cssfile with the theme name in it, for examplevoss_selfservice.zipcontainsvoss_selfservice/voss_selfservice.css.Modify the
.cssfile, for examplevoss_selfservice.css. Use your browser to inspect the elements of the theme on the GUI that you wish to customize.When editing is complete, ensure the directory folder name is the same as your theme name. Compress the folder and save the file with the theme name and a
.zipfile extension.Note
An error message will display on the user interface if the file does not have a valid file extension.
Upload the edited file:
Go to Role Management > Themes and click on the theme to open it’s editing screen.
If this file theme contains an update, browse to locate the file.
Note
If a theme update does not require an updated CSS in a zip file but only updates the text of the theme, then no file upload is required. See also Add a Theme in the Legacy Admin Portal.
Optionally, select Backup Enabled to create a backup of the current theme on the server.
From the Interface drop-down, choose Self Service.
Click Save. The file is imported.
Add a Self-service Theme¶
The preferred method to add a new Self-service theme is to downloading an existing theme to maintain directory structure and file naming conventions.
To add a new Self-service theme to the system:
Log in to the legacy Admin Portal.
Choose the hierarchy level at which the theme will be created.
Go to Role Management > Themes to open the Themes list view.
Click Add to open the Themes page.
Note
Themes can only be customized by a Provider Administrator (or higher).
Enter the Theme Name (same as the file name created above).
Enter an appropriate Site Title if required. The site title entered here is the title displayed in the browser tab.
Browse to locate the theme zip file you wish to import. Wait until the system displays the file in the Import File field.
If the theme must also apply to the login page, select Use this Theme to style Login page.
To set login banner text and notices on the login page, refer to Customize Login Page Theme and Text in the Legacy Admin Portal.
Note
The Use this Theme to style Login page check box does not have to be enabled
for banner text to show.
From the Interface drop-down, select Self Service.
Click Save.
Customize the Self-service Banner Style¶
To customize the Self-service banner style, find the element .banner-text
in the CSS file and customize it, for example:
.banner-text {
background-color: #515150;
color: #FFFFFF;
}
Customize Self-service Theme for Minimal Mode¶
This section describes the options for customizing the Self-service theme to support minimal mode.
Important
If your theme uses a dark colors, the minimal theme may need to be modified to provide a contrasting text and background display.
Examples of minimal mode image snippets and theme settings
.minimal-mode-container {color: white;}
.minimal-mode-container .overlay {background-color: #2e2e2e!important;}
resized logo (
<number>variable)resized tagline (
<number>variable)
.logo-holder-header {padding: <number>px <number>px;}
.ss-tagline {height: <number>px; width: <number>px;}
contrasting drop-down menu items and text
.minimal-mode-menu ul {background: #3e3e3e;}
.minimal-mode-menu ul li {border-bottom: 1px solid #2e2e2e;}
.minimal-mode-menu ul li > a {color: white;}