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 BMC MyIT Universal Client

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.

DescriptionFile 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's logocustom_header_logo.png720 x 75

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 #F5F4F4. The following image shows the BMC MyIT logo:

Main page header's background imagecustom_header.png

1280 x 75

You can change the background image for the entire header.

Example:

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.

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 BMC MyIT logo in the main header.

Maximum width: 720 px; maximum height: 75 px

Example:


.page-header__logo-layout {
  background: url("custom_header_logo.png") no-repeat;
  width: 720px; /* put actual width of the image */
}
.myit-logo__link {
  width: 720px; /* put actual width of the image */
  background: 100%;
}
.rtl .myit-logo__link {
  background: 100% !important;
}

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

Example:


.page-header {
  background-color: #A3C6E0;
}

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

Recommended image size—Width: 1280 px; height: 75 px (maximum height: 126 px)

Example:


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

Change the background color of the main navigation pane and the orange top border.

Example:


.page-header__nav-wrapper {
  background-color: #1E4A78;
  border-top: 1px solid #FFFFFF;
}

Remove the background color of the main navigation pane and the orange top border.

Example:


.page-header__nav-wrapper {
  background: none;
  border-top: none;
  border-bottom: 1px solid #ffffff;
}

Remove the BMC MyIT logo from the main header.

Example:


.myit-logo__link {
  display: none;
}

Change the text color of the user name link in the main header.

Example:


.user-nav__user-link,
.user-nav_user-link:hover {
  color: #42103A;
}

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

Example:


.modules-nav__item-link {
  color: black;
}
.modules-nav__item-link:hover {
  color: lightgrey;
}
.modules-nav__item-link:active {
  color: lightgrey;
}
.modules-nav__item-link:focus {
  color: lightgrey;
}
.modules-nav__item_selected .modules-nav__item-link {
 color: white;
}

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

Example:


.user-nav-menu__item {
  color: red;
}
.user-nav-menu__item:hover,
.user-nav-menu__item:focus {
  color: green;
}

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

Example:


.user-nav-menu__item .icon-calendar {
  color: green;
}
.user-nav-menu__item .icon-exclamation_bubble_o {
  color: yellow;
}
.user-nav-menu__item .icon-user_clock_o {
  color: orange;
}
.user-nav-menu__item .icon-file_check_o {
  color: red;
}
.user-nav-menu__item .icon-calendar:hover,
.user-nav-menu__item .icon-calendar:focus,
.user-nav-menu__item .icon-exclamation_bubble_o:hover,
.user-nav-menu__item .icon-exclamation_bubble_o:focus,
.user-nav-menu__item .icon-user_clock_o:hover,
.user-nav-menu__item .icon-user_clock_o:focus,
.user-nav-menu__item .icon-file_check_o:hover,
.user-nav-menu__item .icon-file_check_o:focus {
  color: blue;
}

Change the color of the shopping cart icon on the main menu.

Example:


.sb-shopping-list__icon.user-nav-menu__item .icon-cart {
  color: red;
}
.sb-shopping-list__icon.user-nav-menu__item .sb-shopping-list__count {
  background-color: blue;
}

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

Example:


.user-nav-dropdown-item {
  color: blue;
}

Change the left column background color on the Support tab.

Example:


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

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

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

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

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-activity-stream {
	background-color: 	#DBCDCD;
}

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;
}
.entity-status-dropdown-filter-item .icon-check.entity-status-dropdown-filter-item__checkbox {
  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;
}

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

Example:


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

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

Example:

.profile-activity-stream .timeline-toolbar__action-icon {
  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 bell icon.

Example:


.notifications__bell .notifications__bell-icon.icon-bell_o {
  color: red;
}
.notifications__bell .notifications__bell-label {
  background-color: blue;
}

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 {
  background-color: #303BCE;
  border-color: #303BCE;
}
.btn-primary[disabled],
.btn-primary.disabled {
  background-color: blue;
  border-color: blue;
} 

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; 
}
Change the overall body text color.
body {
  color: #FE5000;
}

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

Example:

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

Note

For BMC MyIT 3.0.01, .sbe-profile was changed to .sb-profile.

For items in the Unified 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;
}

For items in the Unified Catalog, hide the Instant Request label.

Example:

.catalog-item__provisioning-time_instant-request {
 display: none;
}

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. Because the user is not identified until logging in, the same login screen is shown to all users. 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