Manually rebranding the Universal Client

82 x 52

Maximum width: 257 pixels (px)

Maximum height: 150 px

Example:

• 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:

1280 x 75

You can change the background image for the entire header.

Example:

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;
}

.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:

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

Example:

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:

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;
}

.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:

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

Example:

Change the color of the notifications icon.

Example:

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; 
}

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