Customizing the look and feel of BMC Helix ITSM
From version 25.4 onwards, the Progressive Web Application, Classic, and Innovation Studio-based interfaces of BMC Helix ITSM display an updated color theme. When you upgrade to version 25.4 or later, the color updates do not apply to the user interface elements that you have customized in the previous versions. The updated color theme does not apply to the BMC Helix ITSM mobile application.
You can customize the color of the following attributes in Developer Studio:
- Risk level
- Priority
- Type of change
- Approval
- Severity
- Status
- Major incident backdrop color
To learn more about customizing in Developer Studio, see Creating button fields and Customizing the skins and logo for BMC Helix Innovation Studio applications.
The interface appearance in BMC Helix is driven through CSS files.
| Old CSS code | New CSS code |
| old-custom-variables.css | new-custom-variables.css |
To revert to the previous color theme
You can revert to the old color theme if your existing color customizations do not align with the updated color theme.
To revert to the older color theme, copy the CSS code from old-custom-variables.css and append it to your Custom.CSS file.
For more details about customizations, see Rebranding BMC Helix ITSM on the Universal Client.
To update priority colors in Shared Ticket Console
When you upgrade to version 25.4 or later, the priority colors in Shared Ticket Console may get updated.
Perform this procedure to align the priority colors with the updated color theme.
- Log in to BMC Helix Innovation Studio Best Practice mode and navigate to the Workspace tab.
- Click Applications, and then click ITSM Application.
- On the Views tab, search for the view that you have copied from the default view, and click it.
For example, Petramco ticket console is a copied view.
- Click Record grid.
- In the Component properties panel, in the Edit grid columns section, edit the priority.
- In the Edit grid columns window, click Edit cell display properties.
- In the Edit cell display properties for Priority window, perform the following steps:
- Expand Cell display properties 1.
- From the Badge color list, select P1.
- Expand Cell display properties 2.
- From the Badge color list, select P2.
- Expand Cell display properties 3.
- From the Badge color list, select P3.
- Expand Cell display properties 4.
- From the Badge color list, select P4.
- Click Save, and then click Save.
Customizing the navigation bar by using application shell
As a system administrator, you can tailor the BMC Helix ITSM navigation bar based on BMC Helix Innovation Studio to your specific roles and preferences. You can apply skinning and branding according to your organization's requirements, add custom application modules, and rename, add, or delete navigation menu items by using BMC Helix Innovation Studio.
To customize the navigation bar by using application shell
The BMC Helix ITSM navigation bar based on BMC Helix Innovation Studio is similar to the classic Smart IT navigation bar. It is built by using the application Shell in BMC Helix Innovation Studio. An application Shell is a built-in landing page and default menu system configured for every application. For more information, see Creating and customizing application views by using Shell. You can add custom application modules, and rename, add, or delete navigation menu items to the application Shell, and change permissions for user access.
Perform the following steps to access the application Shell:
- Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
- Click Applications.
- Click ITSM Application.
- Click on the Navigation button at the top.
The Application shell is displayed.
In the application shell, from Shell navigation in Palette, you can drag and drop a menu, menu item, or an action to the Navigation bar and customize them to your needs. For more information, see Adding navigation components to header.
All the menu items are configured to either embed the Innovation Studio (IS) views, or classic Smart IT views, or Progressive Web Application (PWA) screens in an IS view inside an iFrame component. The following table lists the views embedded in BMC Helix ITSM navigation bar.
IS Views | PWA views | Classic Smart IT view |
|---|---|---|
|
|
|
The access to menu elements are controlled and only the users with appropriate roles and permissions can view and access the application's Shell menu elements. For example, Create > Release menu is visible only if the user has either Release User or Release Master permission. You can control the access to the custom application Shell menu elements of view components by assigning appropriate permissions to elements in the application Shell. For more information, see Controlling user access by assigning permissions to menu elements.
To apply skinning and branding to the ITSM application
As an administrator, you can rebrand the ITSM application according to your company standards and requirements by changing the colors, banners, logos, and icons.
Perform the following steps to access the styling and rebranding settings:
- Log in to BMC Helix Innovation Studio and navigate to the Administration tab.
- In the Settings pane, click Application management > Skinning and branding.
In the right pane, configure the parameters for colors and logo images and save your changes.
You can customize the application UI colors and logo to match with your company's brand colors and theme. For more information, see Customizing the skins and logo for BMC Helix Innovation Studio applications.
To setup the home page for ITSM application
In BMC Helix Innovation Studio, you can set the landing page for your ITSM application.
Perform the following steps to update the home page path:
- Log in to BMC Helix Innovation Studio and navigate to the Administration tab.
- In the Settings pane, click Application management > Application settings.
- Click the Application ID of the application that you want to customize.
- In the Edit application settings screen, update Home page path.
You can also add localized values for the display names of your custom application. In the Edit application settings screen, add a display name for your application and click Localize to add localized values.
To customize the view definitions
In BMC Helix Innovation Studio, a view definition is a graphical representation of an application. The BMC Helix Innovation Studio based consoles and calendar, use these view definitions or views that define the console's user interface. You can customize a view by arranging the data items in a specific order or showing only specific items.
When Advanced Responsive Navigation is enabled, all the configurations specific to the ITSM application are available under the settings menu. You can access the views from the Manage Views section under Screen Configuration. The default out-of-the-box views are displayed inside the placeholder views in the Manage Views section. To customize the out-of-the-box views, you must create a new view by copying a default view. For more information, see Customizing Shared Ticket Console.
The following configurations specific to Knowledge are displayed under the Configuration menu in the navigation bar:
- Knowledge Template styles
- AQI Question set
When you click these, the classic Smart IT configuration screens are launched.
Instructions for classic interfaces
View the color theme in classic Smart IT
From version 25.4 onwards, the Progressive Web Application, Classic, and Innovation Studio-based interfaces of BMC Helix ITSM display an updated color theme. When you upgrade to version 25.4 or later, the color updates do not apply to the user interface elements that you have customized in the previous versions. The updated color theme does not apply to the BMC Helix ITSM mobile application.
The interface appearance in BMC Helix is driven through CSS files.
| Old CSS code | New CSS code |
| old-custom-variables.css | new-custom-variables.css |
To revert to the previous color theme
If you have customized BMC Helix ITSM in previous releases, when you upgrade to version 25.4.00 or later, some elements may not display your custom color scheme because the new light color theme may override the previous dark-themed customizations. Append the following CSS code at the beginning of your style-smart-it.css file to restore the intended appearance, especially for text and background colors based on the earlier dark theme.
--nav-background: #414042;
--nav-links-color: #ffffff;
--nav-links-hover-color: #f86e00;
--color-primary:#f86e00;
--color-secondary:#ffffff;
--color-secondary-text:#333333;
--color-info:#3cb6ce;
--color-danger:#f83200;
--color-warning:#f98700;
--header__navigation-links-color:#f86e00;
--header__navigation-bar_text-color: #fff;
--header__navigation-bar_background-color: #333;
--button-primary-bg-color: #f86e00;
--button-primary-bg-color-hovered: #eb6800;
--button-primary-bg-color-hovered-dark: #df6300;
--button-secondary-bg-color:#ffffff;
--button-secondary-bg-color-hovered:#f2f2f2;
--button-secondary-hovered-bg-color-dark: #e5e5e5;
--btn-primary-text-color: #333;
--dropdown-item-background-focus: #e5f6f5;
--dropdown-item-focus-border: 2px solid rgba(0, 167, 157, .65);
--link-default-color: #00a79d;
--link-hover: #009188;
--nav-menu-item-hover-color: #00a79d;
--nav-menu-item-hover-text-color: #ffffff;
--nav-menu-background: #333333;
--nav-menu-border-bottom: #fff;
--nav-bar-text-color: #fff;
--nav-bar-bottom-highlight: #f86e00;
--nav-bar-separator: #666;
--nav-bar-app-name: #d9d9d9;
--nav-menu-item-focus: #666666;
--dropdown-item-hover: #00a79d;
--nav-search-bar-border: #ffffff;
--nav-search-bar-filter: #f2f2f2;
--dropdown-item-focus-border: rgba(0, 167, 157, .65);
--needs-attention-flag: #E3A50E;
}
.navigation-bar__helix-global-search {
&:after {
filter: invert(98%) sepia(3%) saturate(118%) hue-rotate(35deg) brightness(115%) contrast(100%);
}
&:hover, &:focus {
&:after {
filter: invert(40%) sepia(96%) saturate(2317%) hue-rotate(13deg) brightness(106%) contrast(110%);
}
}
}
To revert icon colors
You can revert icons to the old color theme if your existing color customizations do not align with the updated color theme.
| Template name | Icon name | Action |
|---|---|---|
| Generic Activity Template | Show more icons | In the template's HTML file, replace the string '../sharedresources/image/Activity_Notes_Icon_Show_More.png?server=' + server;` with `"../sharedresources/image/Activity_Notes_Icon_Show_More.png?server=" + server;` |
| Show less icons | In the template's HTML file, replace the string `'../sharedresources/image/Activity_Notes_Icon_Show_Less.png?server=' + server;` with `"../sharedresources/image/Activity_Notes_Icon_Show_Less.png?server=" + server;` | |
| ARTF Template | Show more or Show less icons | In the template's HTML file, replace the string `getImagePath('Activity_Notes_Icon_Show_' + icon + '.png');` with `getImagePath("Activity_Notes_Icon_Show_" + icon + '.png');` |
| Outage, Recommended Tickets and Recommended Knowledge Templates | Mark as duplicate icons and pin/unpin button icons | In the template's HTML file. replace the following strings for all occurrences:
|
For more details about customizations, see Rebranding BMC Helix ITSM on the Universal Client.