Branding 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 via the Tomcat web server included with Commander.

Note: The instructions in this topic are compatible with Commander 8.x and above. If you need to apply branding to earlier versions, or if you need more help, contact the support team at support@snowsoftware.com.

In this topic:

Overview

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 Displaying your logos in the Service Portal.

Upgrading from a previous release

If you upgrade from a previous version of Commander to version 8.0 and greater, 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 sales@embotics.com to obtain a staging license for this purpose.

Install the sample files

  1. Log in to the Snow Globe user community.
  2. From the Customizing the Commander Service Portal Logos and Colors article, download one of the following sample theme files onto the Commander application server:
    • embotics_portal_theme-7.1.7 and up.zip
    • embotics_portal_theme-8.0 and up.zip
  3. 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

  4. For example:

    Service Portal Theme Folder Structure

Don't rename the emb_theme folder.

You won't see any changes in the Service Portal yet. You'll restart the Commander Windows service after you customize the Service Portal text string, as described in Customize Service Portal text strings, at which point your new theme will be visible.

Note: If you’ve rebranded the Service Portal, in the emb_theme/images folder, copy logo.jpg to portal-logo-bg-dark.jpg. Service Portal users will have to refresh their browsers to see the new image.

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

  3. 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 Sign In, Sign Out, and About dialogs

    product.name

    Label appearing in the About dialog

    company.link

    Address for your main corporate site

    dialog.about.title

    Title label for the Help > About dialog

    portal.page.title.htm

    Page title as displayed in browser tabs

    page.title.html

    Landing page title

  4. Save your changes.
  5. 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.

To customize the Service Portal:

  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.

Notes:  

  • As long as you're 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.

Customize 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. Don't change this file name.
  • <Commander_install_directory>\tomcat\public\emb_theme\images\notifications.jpg — The image that appears in notification emails. Don't change this file name.

Note: To change the main logo displayed on the Service Portal's sign in page and the About dialog, see Displaying your logos in the Service Portal.

Reverting to the default theme

To roll back to the default theme:

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