This documentation supports the 1.4 version of Remedy with Smart IT.

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

Rebranding Smart IT for the universal client

You can rebrand the BMC Remedy with Smart IT (Smart IT) universal client (desktop web interface) for your IT staff. You modify the style-smart-it.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 Smart IT universal client. Basic CSS editing knowledge is required. For information, see the CSS Tutorial at the W3Schools website.

Important

BMC MyIT and Smart IT cannot share the same CSS design. To rebrand the BMC MyIT Universal Client, modify the style sheet style-myit.css, which is located in the same directory as style-smart-it.css, as described in Rebranding the BMC MyIT universal client. If the file is not present, you can create it manually. 

For 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 graphic files with the names listed in the following table. Put the customer name or logo in the center of the image so that if the image is too wide to accommodate large displays, the edges will crop toward the center.

DescriptionFile name

Height in pixels)

Notes
Login screen background header imagecustom_login.jpg

260

None

 

Login screen background body images
  • login_bg_1. jpg
  • login_bg_2. jpg
  • login_bg_3. jpg
  • login_bg_4. jpg
  

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.

Login screen company logocustom_logo.png None
Login screen product namecustom_product_name.png None
Application header imagecustom_header.jpg128You can change the background image for the entire header.
Application header company namecustom_company_name_app.png The background must be either transparent or the same color as the application header.
Application header product namecustom_product_name_app.png The background must be either transparent or the same color as the application header.

Note

The appropriate size of the graphics may vary depending on the requirements of your environment.

To replace the graphic files and customize styling in the universal client

Note

You must have general knowledge of CSS to perform the following procedure.

  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 Smart IT server.
  4. Create the style-smart-it.css file in the tenant folder. The CSS declarations in this file override the default Smart IT styling.
  5. If your style sheet references new images (such as custom_logo.png and custom_header.jpg), copy these graphic files into the tenant folder.
  6. In the style-smart-it.css file, add the styles that you want to apply to your Smart IT instance.
    The newly created styles will override the default Smart IT styling after the Tomcat service is restarted.

    Tips

    Modern browsers offer the ability to inspect HTML elements and preview CSS modifications while viewing web pages onscreen. 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 add the rebranding for a new tenant, repeat the steps 2 and 3 (create a new folder with the CSS file for another tenant).

Rebranding examples 

Note

The examples provided in this section are general recommendations and might not fit your environment.

Login screen rebrandingExample

Login background image — To use a new background image for the login screen:

  1. Copy an updated custom_login.jpg file to the %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000xxx folder.
  2. Add the content inside the class names shown in the example, modifying the styles according to your needs.
.login-header {
                background-color: transparent;
                background-image: url('custom_login.jpg');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
}

Login project name color — To change the text color of the project name on the login screen, add the content inside the class name shown in the example, and set the color.

.login-header__logo {
                color: #ffffff
}

Login company logo — To change the company logo on the login screen:

  1. Copy an updated custom_logo.png file to the %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000xxx folder.
  2. Change the content of the CSS classes shown in the example, modifying the styles according to your needs.
.login-form__logo-bmc {
  background: url("custom_logo.png") no-repeat;
  width: auto;
}

Login product name — To change the product name on the login screen:

  1. Copy an updated custom_product_name.png file to the %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000xxx folder.
  2. Add the content inside the class name as shown in the example, modifying the styles according to your needs.
.login-form__logo-product {
  background: url("custom_product_name.png") no-repeat;
}

Login background images — To change the background images for login page:

  1. Copy four updated image files (login_bg_1. jpg, login_bg_2. jpg, login_bg_3. jpg, and login_bg_4. jpg) to the %TOMCAT_HOME%/webapps/tenant-custom-res/0000000000xxx folder.
  2. Add the content inside the class name as shown in the example, modifying the styles according to your needs.
.login-body.bgr-1 {
  background-image: url("login_bg_1.jpg");
}
.login-body.bgr-2 {
  background-image: url("login_bg_2.jpg");
}
.login-body.bgr-3 {
  background-image: url("login_bg_3.jpg");
}
.login-body.bgr-4 {
  background-image: url("login_bg_4.jpg");
}
Application rebrandingExample

Header image — To use a new application header image:

  1. Copy an updated custom_header.jpg file to the %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000xxx folder.
  2. Add the content inside the class name shown in the example, modifying the styles according to your needs.
.app__header {
                background-color: transparent;
                background-image: url('custom_header.jpg');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
}

Header text color — To change the text color of the application header, add the content inside the class name shown in the example and set the color.

.app__header {
             color: #ffffff
}

Header line color — To change the color of the header separator line, add the content inside the class name shown in the example and set the color.

  .header__main-bar {
                border-bottom: 1px solid #d9d9d9
}

Header branding removal — To completely remove the logo and product name from application header, add the content inside the class name as shown in the example.

Note: If you apply this rebranding option, the next two rebranding options do not apply.

.header__logo {
  display: none;
}
.header__app-name {
  display: none;
}

Header company name — To change the company name in the application header:

  1. Copy an updated custom_company_name_app.png file to the %TOMCAT_HOME%/webapps/tenant-custom-res/0000000000xxx folder.
    Note: You can use a copy of the file from the Login company logo rebranding example.
  2.  Add the content inside the class name as shown in the example, modifying the styles according to your needs.
.header__logo {
  background: url("custom_company_name_app.png") no-repeat;
  width: 0px; //important set desired width in pixels
}

Header product name — To change the product name in the application header:

  1. Copy an updated custom_product_name_app.png file to the %TOMCAT_HOME%/webapps/tenant-custom-res/0000000000xxx folder.
    Note: You can use a copy of the file from the Login product name rebranding example.
  2. Add the content inside the class name as shown in the example, modifying the styles according to your needs.
.header__app-name {
  background: url("custom_product_name_app.png") no-repeat;
}

Header link colors — To change the text color of application header links, such as the user name, chat, and history links, add the content inside the class name shown in the example and set the color.

.header__main-bar a.dropdown-toggle {
  color: #ffffff;
}
.navigation-bar__item-drop-pin_big {
  border-top-color: #ffffff;
}

Navigation bar background color — To change the color of the background for navigation bar, add the content inside the class name shown in the example and set the color.

.header__navigation-bar {
  background-color: #ffffff;
}

Navigation bar text color — To change the text color for navigation bar items, add the content inside the class name shown in the example and set the color.

.navigation-bar__item-label {
  color: #000000;
}

 

 

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.

Comments