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 email@example.com.
The Commander admin console colors and theme can't be customized.
In this topic:
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.
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 firstname.lastname@example.org to obtain a staging license for this purpose.
- 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.
- Extract the downloaded zip file to:
The file structure must look like this:
Don't rename the
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.
You can customize a number of text strings that appear in the Service Portal.
- Open the following file with a text editor, such as Notepad++:
- 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.
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 information presented in the Login, Logout, and About dialogs
Label appearing in the About dialog
Address for your main corporate site
Title label for the Help > About dialog
Page title as displayed in browser tabs
Landing page title
- Save your changes.
- 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
Customize the Service Portal styles
To customize the Service Portal:
- Open the .css files from the
<Commander_install_directory>\tomcat\public\emb_themefolder 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.
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.
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:
- Delete the
- Restart the Commander Windows service.