Limited support

 

This version of the product is in limited support. However, the documentation is available for your convenience. You will not be able to leave comments. Click here to view the documentation for the current version.

Manually rebranding the Universal Client

This topic was edited by a BMC Contributor and has not been approved.  More information.

As the BMC Digital Workplace  administrator, you can manually rebrand the BMC Digital Workplace  Universal Client (desktop web interface) for your end users.

The customization is done by modifying the style-myit.css file in the Apache Tomcat server webapps directory for a specific tenant instance; for example, %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/. This set of procedures shows the default directory location that you can use if you have not configured the multitenancy.

If the cascading style sheet (CSS) file or the file and directory are not present, you can create them manually.

Perform the following steps to rebrand the BMC Digital Workplace  Universal Client. These procedures require a basic knowledge of how to edit CSS.

Create graphics for the rebranding

Create graphics of the sizes specified in the following table. Crop each customer name or logo image according to the sizes presented in the table below:

GraphicFile name

Size (pixels)

Notes
Login page logo imagecustom_logo.png

82 x 52

Maximum width: 257 pixels (px)

Maximum height: 150 px

Example:

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 can be 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 MyIT logo:

Background image for main page headercustom_header.png

1280 x 75

You can change the background image for the entire header.

Example:

Video: Customizing BMC Digital Workplace  by using CSS

Note

The following video shows an older version of BMC Digital Workplace. The previous product name was MyIT. Although there might be minor changes in the UI, the overall functionality remains the same.

The following video (4:42) demonstrates how to use Cascaded Style Sheets (CSS) to customize BMC Digital Workplace :



https://youtu.be/EqeTIB3yRP4

To replace the graphic files in the BMC Digital Workplace  Universal Client

  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.
  3. If you created directories in steps 1 and 2, restart the Apache Tomcat service on the MyIT server.
  4. Create a style-myit.css file in the tenant folder. For a starting point, download the attached style-myit.css file.
    The CSS declarations in this file override the default BMC Digital Workplace  styling.
  5. If your style sheet references new images (such as custom_logo.png and custom_header.png), copy these graphic files into the tenant folder.
  6. To display the custom images and modify the logo and colors, edit the style-myit.css file:

    Note

    Remove any unused styling from the style-myit.css file.

    • For each custom image, if needed, modify the background property.
      The full path to the image is not required; only the file name is required.
      For example, if you have a new login page logo, remove /* and */ for the following segment:

      Example CSS for custom login image
      .login-form_logo {
        background: url("custom_logo.png") no-repeat;
        width: auto;
        height: 52px
      }
      .rtl .login-form_logo {
        background: url ("custom_logo.png") no-repeat right !important;
      }
    • Modify the properties in style-myit.css as needed, as described in To modify the BMC Digital Workplace CSS file later in this topic.

      Tips

      Modern browsers offer the feature to inspect HTML elements and to preview CSS modifications while viewing web pages on the screen. You can also install browser plug-ins that add more editing features.

      After making small changes to the CSS file, you can save it and refresh the browser to verify the results.

  7. To check your rebranding, open or refresh http://localhost:9000/ux/myitapp from the server.

To modify the BMC Digital Workplace  CSS file

You can make the following modifications to the style-myit.css file for rebranding.

Important

BMC Digital Workplace and Remedy with Smart IT (Smart IT) do not share the same CSS design. To rebrand the Smart IT Universal Client, modify the 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. If the file is not present, you can create it manually. 

Example:

  • %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/style-myit.css
  • %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/style-smart-it.css
ModificationCSS section to modify or uncomment

Change the background images for the login page.

Example:


.landing-page_background-1 {
  background-image: url("login_bg_1.png");
}
.landing-page_background-2 {
  background-image: url("login_bg_2.png");
}
.landing-page_background-3 {
  background-image: url("login_bg_3.png");
}
.landing-page_background-4 {
  background-image: url("login_bg_4.png");
}
.rtl .landing-page_background-1 {
  background-image: url("login_bg_1.png") !important;
}
.rtl .landing-page_background-2 {
  background-image: url("login_bg_2.png") !important;
}
.rtl .landing-page_background-3 {
  background-image: url("login_bg_3.png") !important;
}
.rtl .landing-page_background-4 {
  background-image: url("login_bg_4.png") !important;
}

Change the logo on the login page.

Maximum width: 257 px

Maximum height: 150 px

Example:


.login-form__logo {
  background: url("custom_logo.png") no-repeat;
  width: auto;
  height: 52px; /* put actual heigh of the image */
}
.rtl .login-form__logo {
  background: url("custom_logo.png") no-repeat right !important;
}

Change the color of the column header that is displayed below the login form.

Example:


.landing-page-intro__header {
  color: #DE5F20;
}

Change the color of the bullet text that is displayed in the columns below the login form.

Example:


.landing-page-intro__list-item {
  color: #DE5F20;
}

Change the logo in the main header.

Maximum width: 270px

Example:


.rbr-bmc-logo {
   height: 0;
   width: 270px; /* put actual width of the logo image */
   visibility: hidden;
}

.rbr-customer-logo {
   width: 270px; /* put actual width of the logo image */
   height: 30px; /* put actual height of the logo image */
   background: url("custom_header_logo.png") no-repeat;
   display: block;
}
 
.rbr-page-header {
  height: 51px; /* put actual height of the logo image if it is bigger than 50px */
}

Change the background color of the main header on the page.

Example:


.rbr-page-header {
  background-color: #27526A;
}

Change the background image of the main header on the page.

Recommended image width: 1280 px

Recommended image height: 50 px

Example:


.rbr-page-header {
  background: url("custom_header.png") 50% 0% no-repeat;
}

Change the color or line under the page Main header.

Example:

.rbr-global-banner {
border-top: 2px solid blue;
}

.notification-banner_no-border {
border: none;
}

Remove the line under the page Main header.

Example:


.rbr-global-banner {
border: none;
}

Change the background color of the side menu.

Example:

.rbr-side-nav {
background-color: #27526A;
}

Change the background color of the hovered side menu items.

Example:


.rbr-side-nav-link:hover,
.rbr-side-nav-link:focus {
  background-color: #DE5F20;
}

Change background color for My Activity drop-down.

Example:


.rbr-page-header-dropdown-toggle-active,
.rbr-page-header-dropdown {
background-color: #736A3B;
}

Change the text color of the user name link in the user menu.

Example:


.rbr-user-dropdown-user-name,
.rbr-user-dropdown-user-name:hover {
  color: red;
}

Change the text color of the links on the main menu (News feed, Catalog, and so on).

Example:


.rbr-main-nav-link {
  color: black;
}
.rbr-main-nav-link:hover {
  color: lightgrey;
}
.rbr-main-nav-link:active {
  color: lightgrey;
}
.rbr-main-nav-link:focus {
  color: lightgrey;
}
/* Only if an item is selected */
.rbr-main-nav-item-active .rbr-main-nav-link:hover {
  color: red;
}
.rbr-main-nav-item-active .rbr-main-nav-link:active {
  color: red;
}
.rbr-main-nav-item-active .rbr-main-nav-link {
  color: white;
}

Change the color of icons on the main menu (Reservations, Requests, Appointments, and Approvals).

Example:


.rbr-page-header-dropdown-menu-icon {
  color: red;
  fill:  red;
}
.rbr-page-header-dropdown-menu-link:hover .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link:focus .rbr-page-header-dropdown-menu-icon {
  color: green;
  fill:  green;
}

Change the color of each icon (Reservations, Requests, Appointments, and Approvals) individually.

Example:


.rbr-page-header-dropdown-menu-link-all-activity .rbr-page-header-dropdown-menu-icon {
  color: blue;
  fill:  blue;
}
.rbr-page-header-dropdown-menu-link-posts .rbr-page-header-dropdown-menu-icon {
  color: blue;
  fill:  blue;
}
.rbr-page-header-dropdown-menu-link-reservations .rbr-page-header-dropdown-menu-icon {
  color: green;
  fill:  green;
}
.rbr-page-header-dropdown-menu-link-requests .rbr-page-header-dropdown-menu-icon {
  color: yellow;
  fill:  yellow;
}
.rbr-page-header-dropdown-menu-link-appointments .rbr-page-header-dropdown-menu-icon {
  color: orange;
  fill:  orange;
}
.rbr-page-header-dropdown-menu-link-approvals .rbr-page-header-dropdown-menu-icon {
  color: red;
  fill:  red;
}
.rbr-page-header-dropdown-menu-link-all-activity:hover .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-all-activity:focus .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-reservations:hover .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-reservations:focus .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-requests:hover .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-requests:focus .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-appointments:hover .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-appointments:focus .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-approvals:hover .rbr-page-header-dropdown-menu-icon,
.rbr-page-header-dropdown-menu-link-approvals:focus .rbr-page-header-dropdown-menu-icon {
  color: blue;
  fill:  blue;
}

Change the text color of the links in the drop-down menu next to the user name.

Example:


.rbr-user-dropdown-menu-link {
  color: blue !important;
}
/* Icons in the dropdown list */
.rbr-user-dropdown-menu-icon {
  color: red !important;
}

Change the color of the connection list background.

Example:


.connections-list {
  background-color: #736A3B;
}

Change the text color in the connection list.

Example:


.connections-list-item__name  {
  color: #E4DFDF;
}
/* For hovered items */
.connections-list-item__name :hover {
  color: #FE5000;
}

Change the color of the connection list counter.

Example:


.connections-list__section-count {
  color: #FE5000;
}

Change the color of the profile timeline background.

Example:

.profile-content {
  background-color: #DBCDCD;
}

Change the color of the toolbar menu's filter selection on the My Stuff tab.

Example:



.controls-section__filter-label { color: red; }
.controls-section__filter dropdown-selector dropdown { color: red; }

/* Color of dropdown items */
dropdown-selector__dropdown-item-title__item { color: red; }
}

Change the color of catalog item titles and statuses on the My Stuff tab.

Example:

.tombstone-title__focus-highlight,
.vm.itemData.status.message {
  color: red;
}

Change the color of the timeline toolbar filter on the News Feed page.

Example:


.activity-stream .timeline-toolbar-filter__selection,
.activity-stream .timeline-toolbar-filter__dropdown-arrow {
  color: red;
}

/* Dropdown items */
.activity-stream .timeline-toolbar-dropdown .dropdown-menu__item { color: red; }

/* Icon of the selected item */
.activity-stream .timeline-toolbar-filter {
  color: black;
}
/* Icons in the dropdown list */
.activity-stream .timeline-toolbar-dropdown__item-icon {
  color: black;
}

Change the color of the timeline toolbar filter on the Profile page.

Example:


.profile-content .timeline-toolbar-filter__selection,
.profile-content .timeline-toolbar-filter__dropdown-arrow {
  color: red;
}
/* Dropdown items */
.profile-content .timeline-toolbar-dropdown_filter .dropdown-menu__item { color: red; }

/* Icon of the selected item */
.profile-content .timeline-toolbar-filter__current-icon { color: black; }

/* Icons in the dropdown list */
.profile-content .timeline-toolbar-dropdown_filter .timeline-toolbar-dropdown__item-icon { color: black; }

Change the color of the timeline toolbar action buttons on the Profile page.

Example:

.profile-content .timeline-toolbar__action-icon {
  color: red;
}
.profile-content .timeline-toolbar .timeline-toolbar__clear-text {
  color: red;
}

Change the color of the location panel icon on the Location page.

Example:

.location-panel-control-icon {
  color: red;
  fill:  red;
}

Change the color of the reserve location icon on the Location page.

Example:

.location-map-tools__reserve-location.icon-calendar {
  color: red;
  fill: red;
}

Change the color of the notifications icon.

Example:



.rbr-notification-menu-item-icon {
  color: red;
  fill:  red;
}
.rbr-notification-menu-item-icon.icon-bell_o {
  color: blue;
  fill:  blue:
}
.rbr-notification-menu-item-badge {
  background-color: red;
}

Change the color of all orange buttons throughout the BMC Digital Workplace Universal Client.

Examples:


.btn-primary {
  background-color: blue;
  border-color: blue;
}
.btn-primary:focus,
.btn-primary:hover {
  background-color: #1E61CE;
  border-color: #1E61CE;
}
.btn-primary:active,
.btn-primary.btn_selected {
  background-color: #303BCE;
  border-color: #303BCE;
}
.btn-primary[disabled],
.btn-primary.disabled,
.btn-primary[disabled]:focus,
.btn-primary.disabled:focus,
.btn-primary[disabled]:hover,
.btn-primary.disabled:hover {
  background-color: blue;
  border-color: blue;
} 

Change the color of all teal buttons throughout the BMC Digital Workplace Universal Client.

Examples:


.btn_teal {
  background-color: #f86e00;
  border-color: #f86e00;
}
.btn_teal:focus,
.btn_teal:hover {
  background-color: #df6300;
  border-color: #df6300;
}
.btn_teal:active,
.btn_teal.btn_selected {
  background-color: #df6300;
  border-color: #df6300;
}

Change the color of the Rating & Reviews and Timeline Posts buttons.

Example:


.sb-timeline-swticher__item {
  background-color: #8EC1F6;
  border-color: blue;
}
.sb-timeline-switcher__item_selected {
  background-color: blue;
}
.sb-timeline-switcher__item_selected:after {
  border-top: 10px solid blue; 
}

Remove the Ratings & Timeline tab from the preview of BMC Digital Workplace Catalog items.

Example:

.sb-profile .dpl-tab:last-child {
  display: none;
}

For items in the Catalog, hide the How to and Bundle labels.

Example of label:

.tombstone__title-type {
  display: none;
}
.tombstone_display_small.tombstone_bundle .tombstone__title {
  padding-top: 13px;
}

Rebranding the BMC Digital Workplace  Universal Client in a multitenant environment

In a multitenant environment, after a user logs in, the user's company is identified, and the user can see screens that are branded specifically to that company. The user's company is the company to which the user belongs, even if the user has access to other companies.

Before you begin

  1. Configuring multitenancy.
  2. Determine the tenant ID for each tenant.
    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 00000000000001, and the other ID values correspond to the other company tenants.

To rebrand the BMC Digital Workplace  Universal Client in a multitenant environment

  1. Create a folder for each tenant at %TOMCAT_HOME%/webapps/tenant-custom-res/. The name of each folder must match the tenant ID of each tenant.
  2. Copy the graphic files into the directory for the applicable tenant.
  3.  Copy the style-myit.css file into the directory for each tenant, and rebrand as applicable.
  4. To check your rebranding, open or refresh http://localhost:9000/ux/myitapp from the server.
    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.

This version of the documentation is no longer supported. However, the documentation is available for your convenience. You will not be able to leave comments.

Comments

  1. Shane Manning

    I am trying to change the logo on the main toolbar. I have the BMC logo replaced, but cannot get the Digital Workplace to disappear. I have attempted to use the inspector, but it shows as .page-header__logo with the BMC logo. I have put this into my style-myitt.css: .rbr-bmc-logo { height: 0; width: 200px; /* put actual width of the logo image */ visibility: hidden; }

    .rbr-customer-logo { width: 200px; /* put actual width of the logo image / height: 53px; / put actual height of the logo image */ background: url("mylogo.png") no-repeat; display: block; }

    Is there something else necessary to remove the Digital Workplace logo?

    Jan 15, 2019 12:21
    1. Ravee Panjwani

      Hi Shane,

      Apologies for the delay in responding. Please let us know if you were able to rebrand your UI to change the logo, or still need some assistance.

      Thanks,
      Ravee

      Feb 12, 2019 12:47