This documentation supports the 3.5 version of BMC Digital Workplace. To view the latest version, select the version from the Product version menu.

Rebranding the Universal Client

As a BMC Digital Workplace administrator, you can rebrand the BMC Digital Workplace Universal Client (desktop web interface) for your end users. You can change the logo image, background images, and colors of various elements on the BMC Digital Workplace Universal Client to suit your company's branding. 

 The BMC Digital Workplace Rebranding Tool, available from the BMC Digital Workplace Admin console, is intuitive and easy to use. The rebranding tool eliminates the need for writing the CSS code manually and automatically generates the CSS file required for rebranding. The BMC Digital Workplace Rebranding Tool also allows you to add CSS code to rebrand other elements that are not directly available in the tool.  After you complete all the rebranding changes, you can generate the CSS file required for rebranding the BMC Digital Workplace Universal Client and deploy the changes for your end users.

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 following image shows different buttons that you can rebrand directly from the BMC Digital Workplace Rebranding tool:

    The following image shows various areas of the login page that you can rebrand directly from the BMC Digital Workplace Rebranding Tool:


    The following image shows various areas of the top menu bar and side menu bar that you can rebrand directly from 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:

    Tip

    Keep a company style-sheet that defines the required colors, fonts, and graphics, ready for your reference.

    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

    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

    The following table provides guidelines for creating the rebranding graphics:

     GraphicFile name

    Size (pixels)

    Notes
    Login page logo imagecustom_logo.png

    82 x 52

    Maximum width: 257 pixels (px)

    Maximum height: 150 px

    Example:

    Login page logo textNot applicableNot applicable

    Logo text can have any lenth. If the logo text is too long, the text is wrapped.

    Background images for login page
    • login_bg_1.png
    • login_bg_2.png
    • login_bg_3.png
    • login_bg_4.png

    1280 x 854

    Four different pictures for the login background rotate when triggered by a timer. Depending on your requirements, all four files can contain the same image.

    For faster loading, you can use lower resolution images.

    Example:

    Main page header logocustom_header_logo.png270 x 30

    The background must be either transparent or the same color as the main header.

    Example of main header:

    Example:

    The default color of the main header is #414042. The following image shows the BMC Digital Workplace logo:

    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.

    Important

    BMC Digital Workplace and Remedy with Smart IT (Smart IT) cannot share the same CSS design. To rebrand the Smart IT Universal Client, modify the Smart IT stylesheet, style-smart-it.css, which is located in the same directory as style-myit.css, as described in Rebranding Smart IT on the Universal Client in the Smart IT online documentation. If the file is not present, you can create it manually.For example:

    %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/style-smart-it.css

    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.

    Tip

    Different browsers offer the feature to inspect HTML elements and to preview CSS modifications while viewing web pages on the screen. After making small changes to the CSS file, you can save it and refresh the browser to verify the results.

    Where to go from here

    Deploying clients

    Was this page helpful? Yes No Submitting... Thank you

    Comments