Customizing Portal Themes
Theme Builder enables a customer or a tenant to customize the existing skins and apply new skins on Cisco MSX that matches their brand guidelines as closely as possible.
Before you begin
Only users with the UI_Themes permission can create a theme.
For more information on all the available permissions in Cisco Managed Services Accelerator (MSX) and to also see the minimum required permissions to perform various operations in Cisco MSX, see the latest version of Cisco Managed Services Accelerator (MSX) Platform and Service Pack Permissions Addendum.
Creating a Theme
Using this procedure, you can create a theme.
Procedure
Step 1 |
Log in to the MSX portal using your credentials. |
||
Step 2 |
From the left pane, click Settings. The Settings window is displayed. |
||
Step 3 |
Select the UI Theme Builder tile from the Settings window. The UI Theme Builder window is displayed. |
||
Step 4 |
Click the Create New Theme tab and enter the name for your Theme Project. |
||
Step 5 |
Upload your brand assets under Upload your Assets (Brand logo, Login logo, and Brand font).
|
||
Step 6 |
Click Continue. |
||
Step 7 |
Assign your core colors (primary, secondary and tertiary) through the automatic color assignment process. You can set the palette by adding the HEX values. |
||
Step 8 |
Click auto-assign colors to automatically assign the primary, secondary and tertiary colors to the MSX skin. |
||
Step 9 |
After you are done with the theme changes, do one of the following:
|
Editing a Theme
You can use the Edit a Theme option to edit a theme.
Using this procedure, you can edit a theme.
Procedure
Step 1 |
Log in to the MSX portal using your credentials. |
||
Step 2 |
From the left pane, click Settings. The Settings window is displayed. |
||
Step 3 |
Select the UI Theme Builder tile from the Settings window. The UI Theme Builder window is displayed. |
||
Step 4 |
Click the Edit a Theme. |
||
Step 5 |
Select the theme that you want to edit from the Saved Theme tab.
|
||
Step 6 |
From the Assign your Colors and Settings section, select the core colors from the drop-down list you want to modify. You can use the color and settings inputs to customize the theme further. |
||
Step 7 |
Click undo icon to undo individual input changes, in other words, to revert a color or other choice to the previous setting. |
||
Step 8 |
Click Save Theme to save the changes. You can also republish a theme after editing the theme. |
Managing a Theme
You can use the Manage Theme option to import, export, or delete an existing theme asset. These assets are stored as JSON files created by Theme Builder when assets are exported.
Using this procedure, you can manage created theme assets.
Procedure
Step 1 |
Log in to the MSX portal using your credentials. |
||
Step 2 |
From the left pane, click Settings. The Settings window is displayed. |
||
Step 3 |
Select the UI Theme Builder tile from the Settings window. The UI Theme Builder window is displayed. |
||
Step 4 |
Click Manage Themes. You have two options:
|
||
Step 5 |
From the Manage Theme Packages, click Import Theme Package file under Import Data and choose the file to import or publish. |
||
Step 6 |
Click Select a Theme tab to view the published themes. |
||
Step 7 |
Hover over the newly imported theme, and click the republish icon to republish the theme, or to see when the theme was last republished.
|
Previewing a Theme
Using this procedure, you can preview a created theme.
Procedure
Step 1 |
Log in to the MSX portal using your credentials. |
||
Step 2 |
From the left pane, click Settings. The Settings window is displayed. |
||
Step 3 |
Select the UI Theme Builder tile from the Settings window. The UI Theme Builder window is displayed. |
||
Step 4 |
Select the theme you want to set from Select a Theme tab. The tiles for the published themes are displayed.
|
||
Step 5 |
Hover over a tile to preview the theme in the preview pane. |
||
Step 6 |
Click a tile to preview a theme in MSX.
|
Customizing the Footer
Procedure
Step 1 |
Log in to the Cisco MSX portal using your credentials. |
Step 2 |
From the left pane, choose Settings > Footer. The Footer window is displayed. |
Step 3 |
Edit the Support Links, if required. |
Step 4 |
Click Save. |
Viewing the MSX Component Versions
The Cisco MSX component versions allows you to view all MSX microservices information and service UI information.
Using this procedure, you can view the MSX component version.
Procedure
Step 1 |
Log in to the Cisco MSX portal using your credentials. |
Step 2 |
From the left pane, choose Settings > Component Versions. The Component Versions window is displayed. You can view the following component versions:
|
Updating Languages
The Cisco MSX portal allows you to update or add languages to a running MSX instance.
An authorized user can download a JSON formatted file of all the current language keys/values used in the UI. This file can be sent to a translation center to update the values for a specific language. When the user gets it back from their translation center, they can then upload the new file after selecting what language the translations are for in the drop-down list. Any language added into them in this way will become a valid language a user can be configured to use as default.
Using this procedure, you can update or add languages.
Procedure
Step 1 |
Log in to the Cisco MSX portal using your credentials. |
||
Step 2 |
From the left pane, choose Settings > Language. The Language window is displayed. |
||
Step 3 |
Select your language's Enabled check box, and click Save.
|