Rebranding the Universal Client

Areas that can be rebranded by using the BMC Digital Workplace Rebranding Tool

Click each tab to view the different areas that you can directly rebrand by using the BMC Digital Workplace Rebranding Tool:

The rebranding process

Perform the procedures described in this section to rebrand the BMC Digital Workplace Universal Client. These procedures assume a basic knowledge of working with CSS. Although the BMC Digital Workplace Rebranding Tool generates the CSS required for rebranding, having CSS knowledge is essential to make any additional branding changes that are not available in the tool. Perform the following steps sequentially:

• Before you begin
• Step 1: Create a tenant directory
• Step 2: Create graphic files required for rebranding
• Step 3: Rebrand the BMC Digital Workplace Universal Client
• Step 4: Deploy and verify the rebranding changes

Before you begin

Ensure that you have MyIT Admin permissions and can access the BMC Digital Workplace Admin console.

Step 1: Create a tenant directory

For BMC Digital Workplace Cloud, this step is performed by BMC Digital Workplace Cloud operations.

Create the tenant directory in the Apache Tomcat server on the BMC Digital Workplace server computer. This procedure shows the required directory structure, which is /webapps/tenant-custom-res/<tenantDirectory>. If the directory structure is not present, you can create it manually. In single tenant environments the default tenant ID is 000000000000001. In multitenant environments, obtain the tenant IDs for each tenant.

(Optional) To obtain tenant IDs in a multitenant environment

1. Configuring-multitenancy.
2. Determine the tenant ID for each tenant.
3. On the BMC Digital Workplace server, run the following command:
   (Windows) list_tenants.bat
   (Linux) list_tenants.sh
   The ID for the default tenant is 000000000000001, and the other ID values correspond to the other company tenants.

To create a tenant directory

1. If %TOMCAT_HOME%/webapps/tenant-custom-res/ does not yet exist on your BMC Digital Workplace server, create the tenant-custom-res directory.
2. Create a new subdirectory in the tenant-custom-res directory, and name it with the ID of the tenant that you want to rebrand.
   
   • If you are not configuring multitenancy, use the default tenant ID 000000000000001 to name the subdirectory.
   • If you are configuring multitenancy, use the tenant ID of each tenant to name each subdirectory. For the procedure to obtain tenant IDs, see To obtain tenant IDs in a multitenant environment.
      The name of each subdirectory must match the tenant ID of each tenant.
3. If you created directories in steps 1 and 2, restart the Apache Tomcat service on the BMC Digital Workplace server.
4. Create the graphics required for rebranding.

Step 2: Create graphic files required for rebranding

Create the graphics files required for rebranding for each tenant. The BMC Digital Workplace Rebranding Tool supports graphic file formats such as .png and .jpeg.

You can change the following default graphics available in the BMC Digital Workplace Universal Console directly from the BMC Digital Workplace Rebranding Tool:

• Login page logo image
• Background images for login page
• Main page header logo 

You can also change any additional graphics, such as the background image of the main navigation bar or the bell notification icon. However, to change additional graphics, you must must add CSS code in the BMC Digital Workplace Rebranding Tool.

This section provides the following information:

• Size guidelines for the rebranding graphics
• To create graphic files required for rebranding

Size guidelines for the rebranding graphics

The following table provides guidelines for creating the rebranding graphics:

To create graphic files required for rebranding

1. Create the graphic files required for rebranding each tenant.
2. Use the size guidelines to crop each customer name or logo image so that the image is small enough to be inserted into a style block.

3. Save the logo and background images in a location on your computer.

   Note

   You need not add the logo and background image files to the tenant directory on the BMC Digital Workplace server computer. When you upload the images to the BMC Digital Workplace Rebranding Tool, the tool bundles all images, in BASE64 format, with the CSS file that it generates.

4. (Optional) If you are changing any additional graphics, such as the bell notification icon, create custom graphic files and place them in the tenant subdirectory you created earlier. For example 000000000000001 subdirectory, in the %TOMCAT_HOME%/webapps/tenant-custom-res/ directory.

   Note

   The BMC Digital Workplace Rebranding Tool does not generate CSS code or bundle additional graphics with the CSS file. You must add the additional graphics to the tenant subdirectory and enter additional CSS code through the BMC Digital Workplace Rebranding Tool.

5. Rebrand the Universal Client.

Step 3: Rebrand the BMC Digital Workplace Universal Client

Use the BMC Digital Workplace Rebranding Tool to rebrand the BMC Digital Workplace Universal Client for each tenant. You can upload logo and background images, and choose colors of various elements. According to your selections, the BMC Digital Workplace Rebranding Tool automatically generates the CSS code required for rebranding and creates the style-myit.css file. This CSS file defines the design of BMC Digital Workplace Universal Client.

To rebrand the BMC Digital Workplace Universal Client

1. Log in to the BMC Digital WorkplaceAdministration Console and navigate to More > Configuration > Rebranding Tool.

2. From different tabs in the BMC Digital Workplace Rebranding Tool, rebrand various elements in different areas of the BMC Digital Workplace Universal Client.

   • To update colors, use the color picker tool or type a hexadecimal code.
   • To update a logo image or a background image, browse and upload the image.

   See Areas that can rebranded by using the Rebranding Tool.

3. Preview your changes in the images shown at the bottom of the page.
4. Click Show compiled CSS to view the code generated in the CSS file for every change you make.

5. To make any additional changes that are directly not available in the BMC Digital Workplace Rebranding Tool, add the required CSS code in the Add additional CSS styles text box.
   The following examples show how you can make additional changes by adding CSS code:

   Examples

   • The following code block shows how you can change the font size of Catalog items:

     .catalog-item_display_small .catalog-item__title {
     font-size: 17px;
     } 

   • The following code blocks show how you can hide the Request Again button:

     .request-again-button_all-statuses {
       display: none;
     }
     

   • The following code blocks show how you can hide the Cancel Request button:

     .sr-details-footer__button_cancel-request {
     display: none;
     }
     

   Tip

   To avoid manually editing the CSS file after it is generated, make all additional changes to the CSS file by using the BMC Digital Workplace Rebranding Tool.

6. After you make all changes, click Download compiled style-myit.css and save the style-myit.css file to your computer.
7. In multitenant environments, repeat steps 1 through 6 for each tenant and generate a separate CSS file for each tenant.
8. Deploy and verify the rebranding changes.

Step 4: Deploy and verify the rebranding changes

1. Copy the style-myit.css file to the tenant subdirectory in the Apache Tomcat server.
   • If you are not configuring multitenancy, copy the style-myit.css file to the %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001 directory.
   • If you are not configuring multitenancy, copy the style-myit.css file generated for each tenant to each respective <tenantDirectory> in the %TOMCAT_HOME%/webapps/tenant-custom-res/ directory.
2. Restart the Apache Tomcat server.
3. Clear the Apache Tomcat cache by deleting the Catalina directory located at C:\Program Files\Apache Software Foundation\Tomcat8.0\work.

4. To check your rebranding, open http://localhost:9000/ux/myitapp in a browser.

   Note

   In multitenant environments, the login screen is the same for all tenants. To check the rebranding for a specific tenant, you must login as a user who belongs to that tenant company.

5. If you further modify the style-myit.css file manually, save the file and then refresh the page in the browser.

Where to go from here

Deploying-clients