This version of the documentation supports the 3.2 version of BMC Digital Workplace Basic. Click here to view the documentation for the current version.

Rebranding the BMC MyIT Universal Client

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

You can rebrand the BMC MyIT Universal Client (desktop web interface) for your end users. You modify 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 example shows the default directory location, which you use if you have not configured multitenancy. If the cascading style sheet (CSS) file or the file and directory are not present, you can create them manually.

Use the following process to rebrand the BMC MyIT Universal Client.

Note

Basic CSS editing knowledge is required for this procedure.

Important

BMC MyIT and BMC Remedy with Smart IT (Smart IT) cannot 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 for 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

Before you begin

Create graphics of the sizes specified in the following table. Crop the customer name or logo image so that the image is small enough to be inserted into a style block.

Description File name

Size (pixels)

Notes
Login page logo image custom_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's logo custom_header_logo.png 270 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 MyIT logo:

Main page header's background image custom_header.png

1280 x 50

You can change the background image for the entire header.

Example:

Video: Customizing BMC MyIT by using CSS

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

https://youtu.be/EqeTIB3yRP4

Replacing the graphic files in the BMC MyIT Universal Client

  1. If %TOMCAT_HOME%/webapps/tenant-custom-res/ does not yet exist on your BMC MyIT 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 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 BMC 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 MyIT 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:
    • For each custom image, remove the comment markup, and, 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 Modifying the BMC MyIT CSS file.

      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 http://localhost:9000/ux/myitapp in a browser.
  8. If you modified or added the style-myit.css file, refresh a page in the browser.

Modifying the BMC MyIT CSS file

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

Start adding filters for your table either in the macro settings or on the filtration pane.

Oops, it seems that you need to place a table or a macro generating a table within the Table Filter macro.

The table is being loaded. Please wait for a bit ...
Area of modification Modification task CSS section to modify or uncomment
Login page

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

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

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

Example:


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

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;
}
 Main navigation bar

Change the BMC MyIT 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 main navigation(logo image height + 20px) if the logo image is bigger than 30px */
}
 
.rbr-logo {
  height: 51px; /* put actual height of main navigation(logo image height + 20px) if the logo image is bigger than 30px */
}
 
.side-nav__header {
  height: 51px; /* put actual height of main navigation(logo image height + 20px) if the logo image is bigger than 30px */
}
Main navigation bar

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

Example:


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

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

Recommended image size—Width: 1280 px; height: 50 px

Example:


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

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;
}
Main navigation bar

Remove the line under the page Main header.

Example:


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

Change the background color of the side menu.

Example:

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

Change the background color of the hovered side menu items.

Example:


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

Change background color for My Activity drop-down.

Example:


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

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;
}
Main navigation bar

Change the text color of the links on the main menu (Updates, Catalog, Support, 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;
}
Side menu

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

Example:


.rbr-page-header-dropdown-menu-icon {
  color: 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;
}
Side menu

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;
}
.rbr-page-header-dropdown-menu-link-posts .rbr-page-header-dropdown-menu-icon {
  color: blue;
}
.rbr-page-header-dropdown-menu-link-reservations .rbr-page-header-dropdown-menu-icon {
  color: green;
}
.rbr-page-header-dropdown-menu-link-requests .rbr-page-header-dropdown-menu-icon {
  color: yellow;
}
.rbr-page-header-dropdown-menu-link-appointments .rbr-page-header-dropdown-menu-icon {
  color: orange;
}
.rbr-page-header-dropdown-menu-link-approvals .rbr-page-header-dropdown-menu-icon {
  color: 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;
}
User menu

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

Change the left column background color on the Support tab.

Example:


.support-left-col {
  background-color: #93B8CA;
}
Support tab

Change the text color and the background color of items in the left column on the Support tab.

Example:

.support-menu__item-link {
  color: #FE5000;
  background-color: #E6E6E6;
}
Support tab

Change the text color and the background color of selected items in the left column on the Support tab.

Example:


.support-menu__item-link_selected {
  color: #FE5000;
  background-color: #E6E6E6;
}
Support tab

Change the text color and the background color of hovered items in the left column on the Support tab.

Example:


.support-menu__item-link:hover {
  color: #338787;
  background-color: beige;
}
News Feed tab

Change the color of the connection list background on the News Feed.

Example:


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

Change the text color in the connection list.

Example:


.connections-list-item {
  color: #E4DFDF;
}
/* For hovered items */
.connections-list-item:hover {
  color: #FE5000;
}
News Feed tab

Change the color of the connection list counter.

Example:


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

Change the color of the profile timeline background.

Example:

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

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

Example:

.my-products-toolbar-menu .dropdown-selector__selection {
  color: red;
}
.my-products-toolbar-menu .dropdown-selector__dropdown-arrow {
  color: red;
}
/* Color of dropdown items */
.my-products-toolbar-menu__dropdown .entity-status-dropdown-filter-item {
  color: blue;
}
My Stuff tab

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

Example:

.catalog-item_display_small .catalog-item__title,
.catalog-item_display_large .catalog-item__title {
  color: red;
}
News Feed tab

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

Example:


.activity-stream .timeline-toolbar-filter__selection,
.activity-stream .timeline-toolbar-filter__dropdown-arrow {
  color: red;
}
/* Dropdown items */
.activity-stream .timeline-toolbar-dropdown__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;
}
My Activity tab

Change the color of the timeline toolbar filter on the My Activity timeline.

Example:


.profile-content .timeline-toolbar-filter__selection,
.profile-content .timeline-toolbar-filter__dropdown-arrow {
  color: red;
}
/* Dropdown items */
.profile-content .timeline-toolbar-dropdown__item {
  color: red;
}
/* Icon of the selected item */
.profile-content .timeline-toolbar-filter {
  color: black;
}
/* Icons in the dropdown list */
.profile-content .timeline-toolbar-dropdown__item-icon {
  color: black;
}
My Activity tab

Change the color of the timeline toolbar action buttons on the My Activity timeline.

Example:

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

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

Example:

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

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

Example:

.location-map-tools__reserve-location.icon-calendar {
  color: red;
}
Main navigation bar

Change the color of the notifications icon.

Example:


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

Change the color of all orange buttons throughout the MyIT application.

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;
} 
Throughout the application

Change the color of all teal buttons throughout the MyIT application.

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;
}
Enhanced catalog items

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; 
}
Enhanced catalog items

Remove the Rating & Timelines tab from the preview of BMC MyIT Service Broker items.

Example:

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

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

Example of label:

.catalog-item__title-type {
  display: none;
}
.catalog-item_display_small.catalog-item_bundle .catalog-item__title {
  padding-top: 13px;
}
Catalog tab

Change the color of the catalog toolbar filter on the Catalog page.

Example:


.catalog-section-toolbar-menu__selection {
  color: red;
}
.catalog-section-toolbar-menu__dropdown-arrow {
  color: red;
}
/* Color of dropdown items */
.catalog-section-toolbar-menu__dropdown .entity-status-dropdown-filter-item {
  color: red;
}
/* Color of the slider */
.slider-switch__checkbox:checked + .slider-switch__toggle {
  background-color: blue;
}
Throughout the application

Change the overall body text color.


body {
  color: #FE5000;
}

Rebranding the BMC MyIT 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 to, even if the user has access to other companies.

Before you begin

  1. Configure multitenancy for BMC MyIT.
  2. Determine the tenant ID for each tenant.
    On the BMC MyIT 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 MyIT 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 http://localhost:9000/ux/myitapp in a browser.
    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 modified or added the style-myit.css file, refresh a page in the browser.
Was this page helpful? Yes No Submitting... Thank you

Comments

  1. Veeral Oza

    Hi Team,

    Can you please upload the latest css file for reference?

    Please refer to the section above titled "Replacing the graphic files in the BMC MyIT Universal Client". it talks about downloading style-myit.css. This template seems really old.

    Please upload the latest css file.

    Regards,

    Veeral Oza

    Jul 13, 2016 05:57
    1. Bhakti Paranjpe

      Hello Veeral,

      Thank you for your comment. We are looking into this and will get back to you soon.

      Thanks,
      Bhakti

      Jul 14, 2016 03:07
    1. Bhakti Paranjpe

      Hello Veeral,

      The updated style-myit.css has been attached to the topic.

      Thanks,
      Bhakti

      Jul 21, 2016 09:13
  2. Veeral Oza

    Thank you!

    Jul 21, 2016 09:08
  3. Giri G

    Hi ,

    Knowledge video contents are displayed in a small window in  how to template

    please let me know if  it is possible to increase the height of the video .

     

     

     

    Sep 22, 2016 08:36
    1. Bhakti Paranjpe

      Hello Giri,

      Thank you for your comment. I have forwarded your query to an SME and will get back to you soon.

      Thanks,
      Bhakti

      Sep 26, 2016 01:39
    1. Bhakti Paranjpe

      Hello Giri,

      I confirmed with the SME that knowledge articles are configurable in BMC Knowledge Management or BMC Remedy with Smart IT (Smart IT) and you can set the video size when you import or add the article using either of these applications. BMC MyIT only displays the knowledge articles, and the video size cannot be changed from BMC MyIT.

      Hope this answers your question. Let us know if you are looking for anything else.

      Thanks,
      Bhakti

      Sep 26, 2016 08:47
  4. Gordon Yeh

    Hi team

    Anyway that we can rename the Support tab to something else? For example, Need help?

    We can rename the other headers (e.g. Catalog, My Activities, etc) so I am hoping that we can rename this as well. Thank you

    Nov 09, 2016 09:15
    1. Bhakti Paranjpe

      Hello Gordan,

      Thank you for your comment. I am investigating and will get back to you soon.

      Regards,
      Bhakti

      Nov 09, 2016 11:52
    1. Bhakti Paranjpe

      Hi Gordon,

      Although the name of Support tab can be changed by updating .json files (for example, resource-locale_en.json), it is not a recommended method and BMC does not support it. Please note that the customization are not retained during an upgrade or when updating a hotfix.

      Thanks,
      Bhakti

      Nov 14, 2016 10:22
  5. Francois Seegers

    Hi Bhakati

    We did an installation of SmartIT and MyIT using an external install of Tomcat 8 and the directory structures do not correspond with what is documented here.  Also we did not use the default directory path specified in the install instead we replaced it with Smart_Primary making provision for future secondary server.  This page might require editing to allow for, how to brand if external Tomcat is used.

    Please correct me if I'm wrong...

    Francois

    Jan 30, 2017 12:04
    1. Bhakti Paranjpe

      Hello Francois,

      I'll investigate and get back to you.

      Regards,
      Bhakti

      Jan 30, 2017 12:41
    1. Bhakti Paranjpe

      Hello Francois,

      Rebranding requires the recommended directory structure.

      In your custom directory location and name, you can manually create a directory structure as  follows: %TOMCAT_HOME%/webapps/tenant-custom-res/<tenant_name>/ where %TOMCAT_HOME% is the directory where Tomcat is installed.

      Step 1 under 'Replacing the graphic files...' also suggests that you can create the folder structure, if it does not exist.

      Hope this helps.

      Thanks,
      Bhakti

      Feb 06, 2017 04:26
  6. Pedro Cardoso

    Hi, How I can change the color for the link under the Login screen (Log in Help), and for the Requested Services Name in My Stuff, and for the Header in My Post

    I attach the image for reference in the follow url, thanks

     

    thanks.

     

    http://imgur.com/a/7qouH

    Apr 17, 2017 10:38
    1. Olga Kutetska

      Hello!

      I'll get back to you with the reply asap. 

      Apr 20, 2017 10:09
    1. Olga Kutetska

      Hello, Pedro!

      Here are the answers to your questions:

      1) Link under the Login screen:

      .login-form__help-btn {
       color: #00a79d;
      }

      2) Requested Services Name in My Stuff:

      .activity-item__request-name {
      color: #00a79d;
      word-break: break-all;
      }

      3)

      .activity-item-header__profile-link, 
      .activity-item-header__profile-link:hover {
      font-family: OpenSansSemibold,Helvetica,Arial,sans-serif;
      text-decoration: none;
      color: #00a79d;
      }
      Apr 21, 2017 04:32
  7. Jean-elie Jean-gilles

    Is there a way to change the "Contact IT" button color in the support tab? I can't seem to find a preset in the CSS file.

    Nov 17, 2017 02:24
    1. Olga Kutetska

      Hello!

      Sorry for the late reply. 

      To change the Contact IT button style, modify the .support-internal-padding__contact-it-button class as required.

      Nov 28, 2017 09:01