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.
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.
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.
Height in pixels)
|Login screen background header image||custom_login.jpg|
|Login screen background body images|| |
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 logo||custom_logo.png||None|
|Login screen product name||custom_product_name.png||None|
|Application header image||custom_header.jpg||128||You can change the background image for the entire header.|
|Application header company name||custom_company_name_app.png||The background must be either transparent or the same color as the application header.|
|Application header product name||custom_product_name_app.png||The background must be either transparent or the same color as the application header.|
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
You must have general knowledge of CSS to perform the following procedure.
- If %TOMCAT_HOME%/webapps/tenant-custom-res/ does not yet exist on your BMC MyIT server, create the tenant-custom-res directory.
- 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.
- If you created directories in steps 1 and 2, restart the Apache Tomcat service on the Smart IT server.
- Create the style-smart-it.css file in the tenant folder. The CSS declarations in this file override the default Smart IT styling.
- If your style sheet references new images (such as custom_logo.png and custom_header.jpg), copy these graphic files into the tenant folder.
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.
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.
- 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).
The examples provided in this section are general recommendations and might not fit your environment.
|Login screen rebranding||Example|
Login background image — To use a new background image for the login screen:
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 company logo — To change the company logo on the login screen:
Login product name — To change the product name on the login screen:
Login background images — To change the background images for login page:
Header image — To use a new application header image:
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.
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 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 company name — To change the company name in the application header:
Header product name — To change the product name in the application header:
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.
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.
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.