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.

If you want to modify only the logos instead of re-branding the entire Service Portal, see Displaying your logos in the Service Portal.

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, please contact our support team by emailing support@embotics.com.

The Commander admin console colors and theme can't be customized.

In this topic:

Branding process overview

To custom-brand the Commander Service Portal, you'll apply a custom theme by copying its images, style sheet and properties file to a directory in the Commander Tomcat installation directory. When the Commander service is restarted, Commander will detect the theme and apply it to the Service Portal. Your customers will only ever experience your branding.

As long as you're using CSS built on the jQuery framework, your custom theme will work with the Service Portal.

Upgrading from a previous release

If you are upgrading from a previous version of Commander to version 8.0.2, 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. Download the sample theme (embotics_portal_theme-7.1.7 and up.zip) onto the Commander application server from https://support.embotics.com/support/solutions/articles/8000061185-customizing-the-vcommander-service-portal-colors.
  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

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

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 Login, Logout, 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

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++. The information in these files defines the appearance of the Service Portal as follows.
    • ui.core.css — Describes general core component styles like widgets, menus, and buttons.
    • ui.custom.css — Describes 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.
  2. Make the appropriate changes to the .css files and save the files.

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.

To change the main logo displayed on the Service Portal login 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.