This documentation supports the 21.3 version of BMC Helix ITSM.To view an earlier version, select the version from the Product version menu.

Rebranding BMC Helix ITSM 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 Rebranding_Utility. You can use this utility to apply CSS and images to Smart IT and 

Some content is unavailable due to permissions.

 applications.

Related topics

Failed to execute the [excerpt-include] macro.
(BMC Helix Digital Workplace documentation)


Before you begin

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

  • Download Rebranding_Utility in your system from where the database server is accessible.

  • 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.

To run the utility

  1. Copy the Rebranding_Utility utility in your system from where the database server is accessible.
    While copying the utility, specify the utility name as DBFileSync_utility.
  2. Navigate to the location where you copied the utility and run the following command:
    run DBFileSync-cmd.sh
  1. After you run the command, the system prompts to specify an option from the following list. Enter the option number.
    1. Upload Rebranding
    2. Download Rebranding Files from Date (This option is for internal use only)
    3. Download Rebranding File By FILE_NAME/KEY_NAME Name
    4. Delete Rebranding File By FILE_NAME/KEY_NAME Name

To upload the rebranding changes

  1. In the config.properties file, update the following parameters:

    Parameter

    Description

    DB_TYPE

    Specify any of the following values based on the type of your database:

    • For PostgreSQL database, specify the value as postgres
    • For Microsoft SQL Server database, specify the value as mssql
    • For Oracle database, specify the value as oracle

    DB_URL

    Specify the database URL based on the database type:

    • For PostgreSQL database, specify the URL as jdbc:postgresql://<DB host name>:<DB port>/<DB name>
    • For Microsoft SQL Server database, specify the URL as jdbc:sqlserver://<DB host name>:<DB port>;database=<DB name>
    • For Oracle database, specify the URL as jdbc:oracle:thin:@//<DB host name>:<DB port>/<DB name>

    DB_User

    Database username for login.

    DB_PWD

    Database password for login.

    <File Name> (Can be any logical file name)

    Specify the the rebranding folder to be uploaded in the following syntax:

    SmartIT,<Path of the tenant-custom-res.zip file>,/opt/apache/tomcat/webapps/

    In the config.properties file, do not add a space between the key and value.

  2. Navigate to the location where you copied the utility and run the following command:
    run DBFileSync-cmd.sh
  3. Enter 1 when you are prompted to type the input.
  4. Specify the path of config.properties file.

The database sync interval for BMC Helix ITSM: Smart IT is 12 minutes by default. After you apply the branding updates, they are reflected after 12 minutes.

To download the rebranding changes by file name

  1. Navigate to the location where you copied the utility and run the following command:
    run DBFileSync-cmd.sh
  2. Enter 3 when you are prompted to type the input.

  3. Enter the following parameters when you are prompted:

    Parameter

    Description

    DB_TYPE

    Specify any of the following values based on the type of your database:

    • For PostgreSQL database, specify the value as postgres
    • For Microsoft SQL Server database, specify the value as mssql
    • For Oracle database, specify the value as oracle

    DB_HOST

    Database host name

    DB_PORT

    Database port 

    DB_NAME

    Database name or identifier

    DB_USER

    Database username for login

    DB_PWD

    Database password for login

    FILE_NAME/KEY_NAME

    File name could be any file you choose to upload. For example, if you add this line in the config.properties file while uploading:

    AdminConsoleIssueFile= SmartIT,C:\\AdminConsoleIssue.zip, /opt/bmc/Smart_IT/Smart_IT/smartit/download 

    While downloading, use AdminConsoleIssueFile.

    This parameter must be unique for each record in the table. If it is not unique, records are overwritten.

    PRODUCT_NAME

    Specify SmartIT

    DOWNLOAD_FOLDER_PATH

    Specify the file path where you want to download the rebranding folder

    ALWAYS_ON

    No (MS SQL, Postgres and Oracle), Yes (Multiple cluster MS SQL)

To delete the rebranding changes by file name

  1. Navigate to the location where you copied the utility and run the following command:
    run DBFileSync-cmd.sh
  2. Enter 4 when you are prompted to type the input.

  3. Enter the database details when you are prompted:

    Parameter

    Description

    DB_TYPE

    Specify any of the following values based on the type of your database:

    • For PostgreSQL database, specify the value as postgres
    • For Microsoft SQL Server database, specify the value as mssql
    • For Oracle database, specify the value as oracle

    DB_HOST

    Database host name

    DB_PORT

    Database port 

    DB_NAME

    Database name or identifier

    DB_USER

    Database username for login

    DB_PWD

    Database password for login

    FILE_NAME/KEY_NAME

    File name could be any file you choose to upload.

    For example, if you add this line in the config.properties file while uploading:

    AdminConsoleIssueFile = SmartIT,C:\\AdminConsoleIssue.zip, /opt/bmc/Smart_IT/Smart_IT/smartit/download 

    While downloading, use AdminConsoleIssueFile.

    This parameter must be unique for each record in the table. If it is not unique, records are overwritten.

    PRODUCT_NAME

    Specify SmartIT

    ALWAYS_ON

    No (MS SQL, Postgres and Oracle), Yes (Multiple cluster MS SQL)

To create 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.

Add the custom files and images that you want to apply in the style-smart-it.css file. This CSS file is present in the tenant-custom-res\000000000000001 folder.

Note

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

To create 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


To create 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


To replace 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.

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 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 DBFileSync_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 DBFileSync_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 Failed to execute the [excerpt-include] macro.
.

Hiding it as it is related to onprem.

Failed to execute the [excerpt-include] macro.
(BMC Helix IT Service Management Deployment documentation)

 

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