Branding the web client

The out-of-box Service Manager web client includes a preset Micro Focus theme, which can be modified to express your organization's own branding.

You can change your Service Manager logo icons, colors, and font style from the integrated user interface. You can also perform additional branding implementation options to change the splash screen, or to replace the images, including all the icons.

The following steps show how to implement web client branding changes.

1. Specify the location for the branding files

2. Branding implementation options

   If you are running a Service Manager applications version earlier than 9.34, you need to perform an additional step to set up the branding menu. See "Enable the branding menu in the old applications" below.

3. Additional branding implementation options

Update the operator records to enable the branding rights

In order to prevent unintended changes or problems in the web client interface, it is recommended that the web client branding be performed by an administrator.

To enable the branding rights for an operator, follow these steps:

1. Click System Administration > Ongoing Maintenance > Operators.
2. Type or select optional search criteria.
3. Click Search.
4. Select the operator that you want to update from the record list.
5. Add the SysAdmin capability word to the Execute Capabilities table on the Startup tab.
6. Click Save.
7. Click OK.

This particular operator now has the right to do the branding operations.

Specify the location for the branding files

The branding feature is enabled only when you specify a location to store your branding files. If you do not do so, when you click Tailoring > Branding, an error message is displayed, which indicates that the branding feature is not enabled.

To specify the location for the branding files, follow these steps:

1. Stop the web application server.

2. Specify the folder location in Web parameter: customize-folder.

   For example:

   <context-param>
  <param-name>customize-folder</param-name>
  <param-value>C:/customize</param-value>
</context-param>

   Tip To apply the branding settings from one web tier to another, copy the "customize" folder you created from the source web tier to the target web tier.

3. On the web tier host, create a folder (for example, C:\customize) . This folder is the root folder to store your branding image files, including your custom image files to replace the original ones and your branding settings in the branding menu. In this folder, Service Manager saves your color and font settings in a branding.xml file and custom images in a subfolder named branding-images.

   Note You must have write access to this folder.

4. Restart the web application server.

Enable the branding menu in old applications

To enable the branding menu in Service Manager applications, follow these steps:

1. Click Tailoring > Tailoring Tools > Menus.
2. Type TAILORING in the Menu Name field.
3. Click Search.

4. Select the TAILORING menu record.

5. Append a row to the table with the values described below, and leave the rest of the columns empty.

   Option#	Description	Application	Parameter Name	Parameter Value	Condition
   Enter a sequential number	Branding	us.launch.internal	url	branding.jsp	index("SysAdmin", $lo.ucapex)>0 and sysinfo.get("environment")~="scguiwswt"

   Note When you add the branding menu item to the applications, you assign a new id for this item. The new id may cause id conflicts when you upgrade the applications later. We recommend that you delete this branding menu item before you upgrade the applications and add it back manually if you still need it after you upgrade the applications.

6. Save the menu record.

7. Log off Service Manager and then log back in.

8. Click Tailoring > Branding. The branding menu opens.

Branding implementation options

The branding menu provides the following implementation options.

• Change the logo icons

  The following table describes the format requirements for the logo files.

  Logo name	Description	Format
  Favorites icon	This icon appears in the browser’s address bar, the browser tab title, and the web client URL bookmark link. Note The MIME type of the logo file should be x-icon and the browser must be able to display the .ico files.	.ico
  Main page header logo	This icon appears on the horizontal masthead at the top left corner of the web client screen. Note By default, Service Manager does not have a main page header logo. However, you may set one using your own organization's logo.	.jpg, .gif, .png
  Login and About page logo	This icon appears on the Login page and the About information page.	.jpg, .gif, .png

  To change the logo icons of the web tier, follow these steps:

  1. Log in to the web client.
  2. Click Tailoring > Branding.
  3. Click Browse to find the logo file and select it.

  4. Click Save.

     Service Manager saves your images in the <customize-folder>\branding-images subfolder.

• Change the colors

  To change a color in the web tier, follow these steps:

  1. Log in to the web client.
  2. Click Tailoring > Branding.
  3. Type a desired hex color code in the color value field. A sample color, which automatically changes according to the hex color code you type, is displayed after the value field.
  4. Click Save.

  Service Manager saves your changes in the <customize-folder>\branding.xml file.

  You can change the following colors.

  Section	Title	Description
  Login Page	Body Background/Foreground	The background/foreground color of the login page
  	Button Background/Foreground	The background/foreground color of the login button on the login page
  	Button Hover Background/Foreground	The background/foreground color of the login button on the login page when you hover your mouse over the button
  	Footer Background/Foreground	The background/foreground color of the footer on the login page
  Main Page	Header Background/Foreground	The background/foreground color of the header on the main page
  	Header Command Background/Foreground	The background/foreground color of the command line box on the header of the main page
  	Header Inactive Switch Button	The color of the inactive switch button on the header of the main page
  Navigation	Background/Foreground	The background/foreground color of the navigation accordion on the left side of the applications menu (only apply to the expanded mode)
  	Menu Item Background/Foreground	The background/foreground color of the navigation menu items
  	Menu Group Background/Foreground	The background/foreground color of the navigation menu groups
  	Menu Group Icon	The color of the menu group icon
  Tab	Active Tab Background/Foreground	The background/foreground color of the active tab

• Change the font

  By default, the web client uses Metric font in Latin language and German versions of Service Manager, and Arial font in other language versions. In the case of Asian language versions that do not support these two fonts, the operating system's default font is used instead.

  To change the font of the web client, follow these steps:

  1. Log in to the web client.
  2. Click Tailoring > Branding.
  3. Type the desired font name in the Font Family field.
  4. Click Save to save the changes in the <customize-folder>\branding.xml file
  • The new font takes effect only for users whose browser has the font installed. For users who do not have the font installed, the default font of the user’s browser is used instead.
  • In the login form container, the new font only takes effect on the login button.

  • Your customized font does not apply to printed pages.

• Change the font size

  To change the font size of the web client, follow these steps:

  1. Log in to the web client.
  2. Click Tailoring > Branding.
  3. Select the desired font size from the Font Size drop-down menu.
  4. Click Save to save the changes in the <customize-folder>\branding.xml file.
  If you have upgraded from an earlier version of Service Manager in which you performed branding, the default font size is 12px. Otherwise, the default font size is 14px.

Additional branding implementation options

Service Manager provides additional branding implementation options to change the name on the splash screen to reflect your organization’s name, and to replace the images, including all the icons.

• Change the applications name

  To change the splash screen, follow these steps:

  1. Stop your web application server.

  2. Navigate to the following directory:

     <SM web tier.war file>\WEB-INF\classes\com\hp\ov\cwc\web

  3. Open the app_labels_<language version>.properties file in a text editor, for example, open the app_labels_en.properties file.
  4. Modify the App.Name and App.Title field values according to your organization’s needs. The default value of these two fields is Micro Focus Service Manager.

  5. Save the properties file.

  6. Restart your web application server.

  7. Launch the web client in your browser.

  Your organization’s name is now displayed on the login page and in the browser tab title.

• Tailor the web client images

  You can change the appearance of images in the web client by placing a new image of the same name in the<customize-folder>/images folder. Any images you place here override the existing out-of-box images. Using this images folder enables you to preserve the existing Micro Focus-provided images, and ensures that any future upgrade process does not overwrite your tailoring changes. You can delete your specified images folder at any time to restore the original Micro Focus images.

  Each of your custom images must be in the .png, .gif, or .jpg format, and have the same name (but not necessarily the same format) as the out-of-box one. Service Manager looks for a custom image by name and then by format in the following order: .png, .gif, and then .jpg. For example, if the out-of-box image is back.gif, and your customization images folder contains back.png and back.gif, Service Manager uses back.png.

  To change the images, follow these steps:

  1. Stop your web application server.

  2. Create an images subfolder in the customize-folder you specified. For example: C:/customize/images.
  3. Browse to the images folder of your web tier to find the context path of the image you want to replace. For example, you want to replace the refresh icon on the toolbar, the path of this icon is <SM web tier.war file>\images\toolbar\trefresh.png.

  4. Add the new image you under the same web tier context path in your images folder. For example, you add a new image as <customize-folder>\images\toolbar\trefresh.png to replace the icon image mentioned in the previous step.

  5. Restart your web application server.

  6. Clear your browser's cache.

     To clear the browser's cache, for example, for Internet Explorer 10, follow these steps:

     1. Go to Tools > Internet Options from the menu bar at the top of your browser's screen.

     2. On the General tab, click Delete in the Browsing history field .

     3. Check all the items.

     4. Click Delete to delete the browsing history.

  Now you can log in to the web client to verify the new images.