This documentation supports the 18.11 version of BMC Digital Workplace Basic.

To view the latest version, select the version from the Product Version menu.

Manually rebranding the Universal Client

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.

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.

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

Comments