This documentation supports the 21.05 version of BMC Helix ITSM: Smart IT.To view an earlier version, select the version from the Product version menu.

Rebranding Smart IT on the Universal Client

If you have installed BMC Helix ITSM: Smart IT, you can rebrand Smart IT on the Universal Client (UC) desktop web interface according to your company standards and requirements. 

To apply custom cascading style sheet (CSS) files and images to your application, use the DBFileSync utility. You can use the utility to apply CSS and images to Smart IT and Smart Reporting applications.

The DBFileSync Smart IT utility provides the branding information required for an application in a ZIP file. The utility is embedded in the application container and checks for any updates based on the database sync interval, fetches the updated file, and unzips the file in the folder for branding in your application.

Related topics

Rebranding BMC Helix Digital Workplace (BMC Helix Digital Workplace documentation)

Applying custom CSS and images to your application (BMC Helix Innovation Suite Deployment documentation)

Before you begin

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

  • Make sure that you download the DBFileSync Smart IT utility. 

  • You must have basic knowledge of using the Cascading Style Sheet (.css) file.
  • You do not need any specific Smart IT permission to rebrand Smart IT on UC.
  • 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. In the style-smart-it.css file, add the styles that you want to apply to your Smart IT instance, and save the file.
  2. Restart the Apache Tomcat service on the Smart IT server.
    The newly created styles override the default Smart IT style.
  3. Refresh the browser to verify the result.

Notes

  • 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.
  • To add the rebranding for a new tenant, create a new folder with a .css file for another tenant.

Rebranding examples

The following examples demonstrate how to rebrand Smart IT on Universal Client.

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. Use the DBFileSync Smart IT utility to copy the image file to the relevant folder.
  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. Use the DBFileSync Smart IT utility to copy the image file to the relevant folder.
  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, 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.

 

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