Rebranding Smart IT on the Universal Client

If you have installed Smart IT on your premise, you can rebrand Smart IT on the Universal Client (UC) desktop web interface according to your company standards and requirements. You must modify the style-smart-it.css file in the Apache Tomcat server webapps directory for the Smart IT tenant in the default directory location:
%TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/.

Important

Digital Workplace and Smart IT do not share the same CSS design. To rebrand Digital Workplace on UC, see Rebranding BMC Digital Workplace. If the file is not present, you must create it manually.

For example:

  • %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/style-smart-it.css


Before you begin

Before you begin the rebranding process, you must ensure the following items:

  • You must have basic knowledge of using the Cascading Style Sheet (.css) file.
  • You must use the Apache Tomcat server version 8 or 9.
  • You do not need any specific Smart IT permission to rebrand Smart IT on UC.
  • Ensure that the directory %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001/style-smart-it.css exists on your Smart IT server. If it does not exist, you must create it manually.
  • You must create graphic files for the login screen and for the application header. See Creating graphics.

Creating graphics

Before you rebrand Smart IT, you must create graphic files with the names and sizes specified in this section. You must place the customer name or logo at the center of the image so that if the image is too wide to accommodate large displays, the edges crop towards the center.

Note

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

Creating graphic files for the login screen

You can create custom graphic files for the login screen. Use the file names and image sizes in the following table.

Background body images

File name: 

  • login_bg_1.png
  • login_bg_2.png
  • login_bg_3.png
  • login_bg_4.png

Recommended pixel dimensions: 1024 X 768


Four different images of the login screen rotate in the background. You can use the same image in all four files.

To load the images faster, use images of lower resolution.

Company logo

File name: custom_logo.png

Recommended pixel dimensions: 71 x 30

HomeScreen.png

Login.png

Product name

File name: custom_product_name.png

Recommended pixel dimensions: 71 x 30

Remedy.png


Creating graphic files for the application header

When you create graphic files for the application header, the background must be either transparent, or similar in color as the application header.

Company name

File name: custom_company_name_app.png

Default height: 27 pixels

Menu.png

Product name

File name: custom_product_name_app.png

Default height: 54 pixels

RemedyMenu.png


Replacing graphic files

After you create the graphic files, replace them in the directory.

  1. Restart the Apache Tomcat service on the Smart IT server.
  2. (Optional) Copy images to the 000000000000001 folder.
  3. In the style-smart-it.css file, add the styles that you want to apply to your Smart IT instance, and save the file.
  4. Restart the Apache Tomcat service on the Smart IT server.
    The newly created styles override the default Smart IT style.
  5. Refresh the browser to verify the result.


Important

When viewing the web pages, on the browser you can inspect the HTML elements, and preview the modifications made to the .css file. You can also install browser plug-ins that have additional features to assist editing.

Rebranding examples

The following examples demonstrate how to rebrand Smart IT on UC.

Login screen examples

On the login screen, you can rebrand the areas shown in this table. To rebrand, follow the steps for each code separately:

  1. Copy the updated image file to the folder %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001.
  2. Add the content to the class name as shown in the example.
  3. Modify the styles according to your requirements.

New background image

.login-body
{
background-color: transparent;
background-image: url('login-cover-11.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 }

Company logo

.login-form__logo-bmc
{
 background: url("custom_logo.png") no-repeat;
  width: auto;
 }

Product name

.login-form__logo-product:before
{
content: "Product A";
visibility: visible;
width: 500px;
height: 20px;
margin: -1px 20px 0 0;
color: #fff;
font-size: 24px;
float: left;
 }

.login-form__logo-product
{
font-size: 0px ;
 }

For example, the customized application name is Product A. If there is no company logo, add the following code:

.login-form__logo-bmc
{
display: none ;
 }

Change the background image

.login-body.bgr-1
{
background-image: url("login_bg_1.png");
 }
.login-body.bgr-2
{
background-image: url("login_bg_2.png");
 }
.login-body.bgr-3
{
background-image: url("login_bg_3.png");
 }
.login-body.bgr-4
{
background-image: url("login_bg_4.png");
}

Text color of the project name

Add the content inside the class name, and set the color.

.login-form__logo-product
{
color: #00d6f8
 }

Application header examples

You can rebrand the following areas on the application header. Follow the steps for each code separately:

  1. Copy the updated image file to the folder %TOMCAT_HOME%/webapps/tenant-custom-res/000000000000001.
  2. Add the content inside the class name as shown in the examples.
  3. Modify the styles according to your needs.

Color of the header separator line

.header__fadeline-bottom
{
background-color: red;
 }

Company name

.header__logo
{
background: url("custom_company_name_app.png") no-repeat;
width: 0px; //important set desired width in pixels
 }

Product name

.header__app-name:before
{
content: "Product A";
visibility: visible;
height: 20px;
margin: -1px 20px 0 0;
color: #fff;
font-size: 24px;
float: left;
 }

.header__app-name
{
font-size: 0px ;
width: 500px;
 }

For example, the customized application name is Product A. If there is no company logo, add the following code:

.header__logo
{
display: none;
 }

Text color of the Chat and History links

.header__user .icon-search
{
color: #00d6f8
 }
 
.history-menu .icon-book_o
{
color: #00d6f8
 }
 
.header__user .dropdown-toggle.icon-comments_o
{
color: #00d6f8
 }

Color change for Smart recorder and Dashboard text after hover and focus

a.navigation-bar__item-label:hover, a.navigation-bar__item-label:focus  
 {
color: #dc1616;
 }

Change the hover color of the navigation bar items—search, history, and chat

.header__user .icon-search:hover
{
color: blue;
 }

.header__user .dropdown-toggle.icon-comments_o:hover
{
color: blue;
 }

.history-menu .icon-book_o:hover
{
color: blue;
 }

Remove the logo and product name

Note that if you apply this rebranding option, the header company name and header product name options do not apply.

.header__logo
{
display: none;
 }

.header__app-name
{
display: none;
 }

Navigation bar examples

On the navigation bar, you can rebrand the areas shown in this table.

For each code, add the content to the class name as shown in the examples, and set the color.

Background color

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

Text color of the navigation bar items

.navigation-bar__item .navigation-bar__item-label
{
color: #75dc27;
 }

Changes in rebranding for Smart IT

In Smart IT 1.5.00 and onward versions, the navigation bar on UC uses a new slim design that allows for more vertical screen space. You must ensure that your previously rebranded application header company name and product name images (custom_company_name_app.png and custom_product_name_app.png) are of the appropriate size and color for the new UI design.

With the new slim design, the app__header class is now deprecated, and must be removed from the style-smart-it.css file. The app__header class includes the following information:

  • Header image (custom_header.jpg)
  • Header text color

Examples

app__header class

Header image

.app__header
{
background-color: transparent;
background-image: url('custom_header.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 }

Replace with:

.header__logo
{
background: url("custom_company_name_app.png") no-repeat;
width: 0px; //important set desired width in pixels
 }

Remove the header text color.

.app__header
{
color: #ffffff
 }

The login screen background header image (custom_login.png) is also deprecated. Remove the code from the style-smart-it.css file. 

Login screen background header

.login-header
{
background-color: transparent;
background-image: url('custom_login.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 }

Replace with

.login-body
{
background-color: transparent;
background-image: url('login-cover-11.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 }

Areas not affected by rebranding

You cannot rebrand the following third-party tools that are used in Smart IT:

  • The editor on the knowledge article profile
  • The Service delivery area on the Dashboard
  • The Change and Collision calendar
  • The Knowledge Console, Asset Console, and Ticket Console

BMC Helix users

If you are a BMC Helix user, you must first create stylesheets (CSS code) to define the design of your Universal Client. Attach the style-smart-it.css file(s) to your request, and then submit it to RoD support. For more information, see BMC Helix Subscriber Information.


Related topics

Rebranding BMC Digital Workplace (Digital Workplace documentation)

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*