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 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) 4.3 Platform and Service Pack Permissions Addendum.

Creating a Theme

Using this procedure, you can create a theme.

Procedure

Step 1

Log in to the Cisco 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).

Note 
Click the Show Preview button to see in the page layout on the right pane.
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 Cisco MSX skin.

Step 9

After you are done with the theme changes, do one of the following:

  1. Click Save Theme to save your changes.

  2. Click Publish Theme to publish the theme.

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

Note 
Modify the theme to match it with your brand guidelines.
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 Cisco 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:

  • Manage Theme Packages: Theme Packages are JSON files that contain all of the assets associated with a given theme.

  • Manage Individual Theme Assets: Theme assets are individual data files that are in JSON format.

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.

Note 

If you have permission to edit the theme, you will also have the permission to republish the theme.

You can do the following from the Manage Individual Theme Assets:

  • Import Theme file: Using this option, you can import the theme file.

  • Import Logo file: Using this option, you can import the logo file.

  • Import Font Set file: Using this option, you can import the font set file.

  • Import Published Theme file: Using this option, you can import the published theme file.

Previewing a Theme

Only users with the ‘UI Themes’ permission set to ‘View’ or ‘Manage’ can Preview a Theme. This permission is available under ‘Integrations, Settings, and Logs'.

Using this procedure, you can preview a created theme.

Procedure

Step 1

Log in to the Cisco 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 Cisco MSX.

Note 

Users with the Manage option can click Set Active to make the chosen theme the default skin for Cisco MSX for all the users.

If the republishing is blocked, an error message appears with the missing theme data.

If you get a warning that there is more than one theme out-of-date, click Republish Out-of-Date Themes to republish all the out-of-date themes.

Viewing the Cisco MSX Component Versions

The Cisco MSX component versions allows you to view all Cisco MSX microservices information and service UI information.

Using this procedure, you can view the Cisco 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:

  • Microservice Information—This includes:

    • Component Name

    • Version

    • Build Number

    • Build Date

  • Service UI Information—This includes:

    • Service UI

    • Version

    • Build Number

    • Build Date

    • Language Support

Updating Languages

The Cisco MSX portal allows you to update or add languages to a running Cisco 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.

Note 
You can also change the Cisco MSX portal's default language from the user profile icon.