Unsupported content

 

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. Click here to view the documentation for the current version.

Rebranding the MyIT Universal Client

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

You can rebrand the 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 set of procedures 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.

Perform the following steps to rebrand the MyIT Universal Client. These procedures assume a basic knowledge of how to edit CSS.

Note

If you need to rebrand MyIT 3.3 SP2, see Rebranding BMC Digital Workplace 3.3 Universal Client.

Create graphics for the rebranding

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

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 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 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 MyIT by using CSS

The following video (4:42) demonstrates how to use Cascaded Style Sheets (CSS) to customize MyIT:https://youtu.be/EqeTIB3yRP4


To replace the graphic files in the MyIT Universal Client

  1. If %TOMCAT_HOME%/webapps/tenant-custom-res/ does not yet exist on your 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 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 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 To modify the 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.

To modify the MyIT CSS file

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

Important

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

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

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 {
  color: #E4DFDF;
}
/* For hovered items */
.connections-list-item: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:

.my-products-toolbar-menu { color: red; }
.my-products-toolbar-menu__dropdown-arrow { color: red; }

/* Color of dropdown items */
.my-products-toolbar-menu__dropdown .dropdown-menu__item { color: blue; }
}

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

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

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

Example:

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

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

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

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

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

Remote the Rating & Timelines tab from the preview of MyIT Service Broker 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:

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

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

Change the overall body text color.


body {
  color: #FE5000;
}

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

Before you begin

  1. Configure multitenancy for MyIT.
  2. Determine the tenant ID for each tenant.
    On the 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 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. Gordon Yeh

    Hi BMC,

    Is there anyway to hide the price in MyIT when its pulling the data from SBE?

    Currently we have not costed our services yet and do not want to show a bogus figure and if we do not put anything in the price field, it shows up as "free". Naturally we do not want to display this at the current moment and would like to hide it/change the background color to 'white' so its not visible.

    Thank you

    Jan 06, 2017 02:30
    1. Bhakti Paranjpe

      Hello Gordon,

      You can hide the price from catalog items by using the following CSS code:

      .catalog-item__payment,
      .catalog-item-payment,
      .sb-shopping-summary__cost-title {
          display: none;
      }

      Hope this helps.

      Thanks,
      Bhakti

      Jan 12, 2017 09:55
  2. Gordon Yeh

    Thank you Bhakti!

    Another question for you please:

    Anyway to have another default response other than "Free"? It's not really free, there's just "No Charge" to the customer. 

    We are the process of costing out all of our services but some of them we had not gotten alignment and would rather change the default response of "free" to something else (e.g. "No Charge".

    Thank you!

    Jan 13, 2017 10:37
    1. Bhakti Paranjpe

      Hello Gordon,

      I confirmed with the SMEs that currently there is no easy way to configure this wording. However, for further assistance, you can raise a ticket with BMC Support or post an idea on BMC Communities.

      Thanks,
      Bhakti

      Jan 18, 2017 12:09
  3. Sanket Mhatre

    Hi Team,

    As of today, End user searches Catalog services or KCS articles in MyIT Search box. However the text in the seachbox is very misleading. Is there any way to change the text from  “Search catalog” to “Search catalog and Knowledge Articles” ?

     

    Thanks,

    Sanket

     

     

    Mar 13, 2017 12:39
    1. Michele Marques

      You can configure the text in the superbox. See Changing terminology used in the application

      Mar 15, 2017 03:37
      1. Sanket Mhatre

        Hello Michele,

        Thanks for responding. However I am looking for changing the text in the textbox, where end user can search Service Requests, Knowledge articles.

        Current text in search box : Search catalog

        Expected text in search box : Search catalog and Knowledge Articles

        I am not looking for superbox as you referred. Just FYI.. I got a solution in https://communities.bmc.com/thread/161856 , however looking something more configurable.


        Thanks,

        Sanket

        Mar 15, 2017 05:46
        1. Michele Marques

          You might post as an idea in the community.

           

          Mar 17, 2017 04:43
  4. Veeral Oza

    Is the css file attached on this page, latest for version 3.3? Please confirm.

     

    Regards,

    Veeral Oza

    Apr 13, 2017 09:30
    1. Philomena Dolla vizayam

      Yes, this file is for version 3.3. Do let me know if you have any specific issues with the file.

      Apr 17, 2017 03:55
  5. Scott Parrish

    I have successfully rebranded Smart IT by creating the style-smart-it.css file; however, my rebranding of MyIT is unsuccessful. I have followed the instructions in the video but it appears, for whatever reason, that the style-myit.css file is not overriding the default CSS.

    Jun 14, 2017 10:49
    1. Philomena Dolla vizayam

      Scott, I'll check with the team about the issue and get back to you.

      Jun 16, 2017 04:59
      1. Scott Parrish

        I also attempted to use the "Rebranding Tool" found in the MyIT Administrator. The preview showed the necessary changes that I made, but when I clicked the "upload compiled style-myit.css" button but it did not do anything. I then selected the "Show complied CSS" button and tried to cut and paste the css but that also did not work.

        Jun 16, 2017 05:26
        1. Philomena Dolla vizayam

          Scott, we'll need more details about your setup in order to identify the problem. Please do contact Support for further assistance.

          Jun 22, 2017 04:16
        1. Jan Sierens

          In SP2 style-myit.css was renamed to style-dwp.css.

          Jul 13, 2017 08:08
  6. Jan Sierens

    In SP2 style-myit.css was renamed to style-dwp.css. But also with SP2 MyIT was re-branded to digital workplace. Both share the same version number 3.3. Quite confusing to introduce a name change with a service pack. 

    Would it be possible to add a warning that users should look here when it comes to 3.3 SP2:

    https://docs.bmc.com/docs/digitalworkplacebasic/33/rebranding-the-universal-client-724773520.html

     

    Jul 13, 2017 08:07
    1. Philomena Dolla vizayam

      Thanks for your feedback, Jan. We'll work on making that distinction more clear to the users.

      Jul 14, 2017 12:59
  7. Amit Shende

    For Service Request Icons under catalog, can we add description to it. Thanks

    Sep 11, 2017 04:02
  8. Sameer Alomari

    Hi 


    how can we change login page footer text ?


    appreciate your help

    Apr 02, 2018 04:36
    1. Ievgeniia Afinogenova

      Hello, Sameer!

      Unfortunately you cannot change the login page footer text, you can only rebrand it by changing the color of the column header and the color of the bullet text. Thanks.

      Apr 02, 2018 09:13
  9. Mohamed Atta

    Hi

    How to change the background of homepage (Body) "Not login page" with an image?


    Thanks

    Atta

    Apr 04, 2018 08:25
  10. Ievgeniia Afinogenova

    Hello Mohamed,

    you can only change the background with an image on the login page. 


    Regards,

    Ievgeniia.

    Apr 10, 2018 06:21
    1. Mohamed Atta

      This is not correct as i already changed the background with image on the main page (smile)

      Apr 24, 2018 03:48
      1. Ievgeniia Afinogenova

        wow:) thank you for sharing!

        Apr 24, 2018 05:43
  11. Francis Thibault

    Hello, I am trying to figure out how to change the landing page footer text (not in bullet form but a text) and to include a hyperlink?

    Thank you

    Dec 18, 2018 02:17
  12. Ievgeniia Afinogenova

    Hello Francis,

    Unfortunately such an option is unavailable. Within the rebranding process, you can only apply the modifications that are described in this topic.

    Regards, Ievgenia.

    Dec 20, 2018 05:08