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:

1. Log in to the legacy Admin Portal.

2. Choose the hierarchy level at which the theme will be applied.

   Note

   Themes can only be customized by a Provider Administrator (or higher).

3. Go to (default menus) Role Management > Themes to open the Themes list view.

4. Click the Self-service theme you wish to download.

5. 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 .css file with the theme name in it, for example voss_selfservice.zip contains voss_selfservice/voss_selfservice.css.

6. Modify the .css file, for example voss_selfservice.css. Use your browser to inspect the elements of the theme on the GUI that you wish to customize.

7. 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 .zip file extension.

   Note

   An error message will display on the user interface if the file does not have a valid file extension.

8. Upload the edited file:

   1. Go to Role Management > Themes and click on the theme to open it’s editing screen.

   2. 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.

   3. Optionally, select Backup Enabled to create a backup of the current theme on the server.

   4. From the Interface drop-down, choose Self Service.

   5. 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:

1. Log in to the legacy Admin Portal.

2. Choose the hierarchy level at which the theme will be created.

3. Go to Role Management > Themes to open the Themes list view.

4. Click Add to open the Themes page.

   Note

   Themes can only be customized by a Provider Administrator (or higher).

5. Enter the Theme Name (same as the file name created above).

6. Enter an appropriate Site Title if required. The site title entered here is the title displayed in the browser tab.

7. Browse to locate the theme zip file you wish to import. Wait until the system displays the file in the Import File field.

8. If the theme must also apply to the login page, select Use this Theme to style Login page.

9. 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.

10. From the Interface drop-down, select Self Service.

11. 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;}