Brand the Service Portal

You can deliver a fully branded Service Portal experience for end users by creating a custom theme for your organization and publishing it through the Tomcat web server included with Commander.

You can configure a custom theme for the Service Portal by adding theme files to the Commander Tomcat installation directory. The theme files include images, properties, and style sheets. The theme is applied to the Service Portal after the Commander service restarts.

If you only want to modify the logos displayed in the Service Portal (as opposed to providing an entire branded experience), see Display your logos in the Service Portal.

Upgrading from a previous release

We recommend that you install a separate instance of Commander in a staging area where you can reproduce your current theme using the new method. That way, you can deliver a theme providing seamless branding during the maintenance window for your upgrade. Contact your account manager to obtain a staging license for this purpose.

Install the sample theme files

  1. Click the following link to download the sample theme file to the Commander application server:

    theme.zip

  2. Extract the downloaded zip file to:

    <Commander_install_directory>\tomcat\public\

    The file structure must look like this:

    <Commander_install_directory>\tomcat\public\emb_theme\images\

    <Commander_install_directory>\tomcat\public\emb_theme\theme.properties

    <Commander_install_directory>\tomcat\public\emb_theme\ui.core.css

    <Commander_install_directory>\tomcat\public\emb_theme\ui.custom.css

    <Commander_install_directory>\tomcat\public\emb_theme\ui.theme.css

You will not see any changes in the Service Portal yet. You will restart the Commander Windows service after you customize the Service Portal text string, at which point your new theme will be visible. For information on restarting the Commander Windows service, see Customize Service Portal text strings.

If you have previously replaced the default logos that appear in the Service Portal with your organization's custom logos, additional steps are required to include those in your branded Service Portal. For more information, see Modify the graphics.

Customize Service Portal text strings

You can customize a number of text strings that appear in the Service Portal.

  1. Open the following file with a text editor, such as Notepad++:

    2. <Commander_install_directory>\tomcat\public\emb_theme\theme.properties

  2. Referring to the table below, edit the content to suit your needs. Any text that follows the equals (=) character will be displayed in the Service Portal.

    Entry

    Description

    product.release

    Version number displayed in the About dialog. You can increment this as you add more services to the catalog or grant more permission to users.

    copyright

    Copyright information presented in the About dialog

    product.name

    Label appearing in the About dialog

    company.link

    Address for your main corporate site

    dialog.about.title

    Title label for the About dialog.

    By default, this label is not displayed. To display:

    1. Open ui.custom.css.

    2. Locate #header-form\:about_dlg.ui-dialog .ui-widget-header{
    display:none;
    }    .

    3. Comment out the second line with the following format: */ display:none;/*.

    For more information, see Customize the Service Portal styles.

    portal.page.title.htm

    Page title as displayed in browser tabs

    page.title.html

    Landing page title

  3. Save your changes.
  4. In the Windows Services Control Panel, locate the Commander service in the list, select it, and click Restart.

    Commander requires a few minutes to initialize after a service restart. Your changes should now be visible in the Service Portal (you may need to clear your browser cache). You need to restart the Commander service whenever you make changes to the theme.properties file.

Customize the Service Portal styles

The style sheets define the appearance of the Service Portal as follows:

  • ui.core.css — Defines general core component styles like widgets, menus, and buttons.
  • ui.custom.css — Defines specific styles for unique features such as the main navigation menu.
  • ui.theme.css — Defines theme styles for the overall look and feel. For example, background colors, header colors, and fonts.
  1. Open the .css files from the <Commander_install_directory>\tomcat\public\emb_theme folder with a text editor like Notepad++.
  2. Make the appropriate changes to the files, then save your changes.
  • As long as you are using CSS built on the jQuery framework, your custom theme will work with the Service Portal.
  • Any changes you make to the CSS files are visible in the Service Portal without restarting the Commander service. Service Portal users must clear their browser cache for the changes to take effect.

Modify the graphics

You can modify the following graphics files:

  • <Commander_install_directory>\tomcat\public\emb_theme\images\favicon.ico — The icon that appears in the address bar of some web browsers. Do not change this file name.
  • <Commander_install_directory>\tomcat\public\emb_theme\images\notifications.jpg — The image that appears in notification emails. Do not change this file name.

You can add the following graphics file:

  • <Commander_install_directory>\tomcat\public\emb_theme\images\portal-logo-bg-dark.jpg — The image that appears on the top left corner of the Service Portal. Do not change this file name.

Service Portal users will have to clear their browser cache to see the new images.

To change the main logo displayed on the Sign In and About dialogs for the Service Portal, see Display your logos in the Service Portal.

Revert to the default theme

You can roll back to the default theme if you want.

  1. Delete the emb_theme folder.
  2. Restart the Commander Windows service.