Rebranding BMC Helix Digital Workplace
Use the rebranding tool, available within the product, to rebrand the BMC Helix Digital Workplace end user console without the need to know CSS or HTML code.
The rebranding options also provide the ability to make the end user console meet your company's branding policy as well as meet the AA accessibility standard of the Web Content Accessibility Guidelines (WCAG). You can modify the color scheme of the navigation bar, login page, application messages, and so on.
You can rebrand the external user portal by logging in as an external portal administrator. For more information, see Administering an external BMC Helix Digital Workplace portal.
If you have configured multitenancy to restrict access for users to a specific company, you can apply rebranding that is unique to each tenant.
Important
If you are using a login mechanism that bypasses the standard login page (for example,
Accessibility standards
BMC Helix Digital Workplace is compliant with the AA standard of WCAG. The rebranding UI indicates the AA and AAA compliance for some parameters, as shown below:
Before you begin
- If you have a multitenant environment, make sure you have created the subtenants. For more information, see Configuring multitenancy.
- For each tenant or external user portal that you want to rebrand, create and save the images according to the recommendations at a location that you can access from the server.
To rebrand the end user console
Log in to the Admin console, and select Configuration > Branding.
If you are rebranding the external user portal, log in to the Admin console as an external administrator.Modify the required properties of the end user console, as specified in the following table:
Tip
The application automatically adjusts all the color properties to maintain the contrast between the background and the text and the readability of the text.
Tab Property Description Valid values Recommended values Default values (in hexadecimal code) Framework options
Navigation style
Displays the navigation bar in the selected color and theme.
- Theme—Light and Gray
- Color—Hexadecimal color values or RGB values
Not applicable - Theme: Dark
- Color: #262626
Product name Displays the product name by using up to 56 characters. Free text up to 56 characters. Not applicable Digital Workplace Logo alt text JAWS text that help end users hear the product name pronunciation when they hover over the product logo.
Free text Not applicable Digital Workplace Font Displays text in the application in the selected font.
- Open Sans
- Work Sans
- Roboto
- Raleway
- Lora
Not applicable Open Sans Logo and icons Product logo Displays the selected logo in the left corner of the navigation bar.
- Supported file formats—JPG, JPEG, PNG, and GIF.
- Maximum file size— 200 KB.
- The width-to-height ratio should be 1:1 or wider. You can also set a custom width-to-height ratio for the product logo.
Transparent PNG, 48H x 80W pixels. Mobile home screen icon Displays the selected icon for the progressive web application that appears on its home screen.
You can add this icon for Google Android devices only.
- Supported file formats—JPG, JPEG, PNG, and GIF.
- Maximum file size—1024 KB.
Transparent PNG, 512H x 512W pixels. Favicon Displays the selected icon as the website icon, tab icon, or bookmark icon.
You can add a favicon for Android devices and desktop browsers except for Apple Safari and Microsoft Edge. For these browsers, the first letter of the product name is shown instead of the favicon.
- Supported file formats—JPG, JPEG, PNG, and GIF.
- Maximum file size—200 KB.
Transparent PNG, 32H x 32W pixels. Adjust main Colors Primary state color Sets the primary state color of buttons.
Note: This setting also applies to the color of the bottom horizontal border of the navigation bar.
Hexadecimal color values or RGB values Not applicable #F86E00
Secondary state color Sets the secondary state color for buttons.
Hexadecimal color values or RGB values Not applicable #E5E5E5
Active state color Sets the active state color of elements such hyperlinks and hover state of elements.
Hexadecimal color values or RGB values Not applicable #00A79D
Navigation active state color Sets the text color of active menu items in the navigation bar.
Note: Ensure that you set a color that is easily readable with light or dark backgrounds of the navigation bar.
Hexadecimal color values or RGB values Not applicable #F86E00
State color Sets the color for elements such as progress bars, sliders, checkboxes, and toggles to reflect their change in state.
Hexadecimal color values or RGB values Not applicable #F86E00
Adjust status colors Critical state color Sets the color for critical state messages that are displayed if the user or the system is unable to complete a task, such as when mandatory fields are not filled out.
Hexadecimal color values for hue, saturation, and lightness of colors from the provided color range. Not applicable # FF4414
Warning state color Sets the color for warning state messages that are displayed if incomplete or incorrect data prevents a function or task from being completing properly, but the task is not blocked.
Hexadecimal color values for hue, saturation, and lightness of colors from the provided color range. Not applicable # F1B521
Success state color Sets the color for success state messages that are displayed if the user or the system has successfully completed an action.
Hexadecimal color values for hue, saturation, and lightness of colors from the provided color range. Not applicable # 89C341
Info state color Sets the color for information messages that are displayed to communicate useful information to the user, such as system messages.
Hexadecimal color values for hue, saturation, and lightness of colors from the provided color range. Not applicable # 3CB6CE
Login page Login page background color Sets the background color for the end user console login page. The gradients (if selected) are applied to this color.
Notes:
- This property does not apply to the single sign-on login page.
- You cannot delete or modify the Powered by BMC inscription at the bottom of the login page.
Hexadecimal color values or RGB values Not applicable #FFFFFF
Login page background image Sets the background image for the login page.
- Supported file formats—JPG, JPEG, PNG
- Maximum file size—1024 KB.
Not applicable Background linear gradient Sets the background linear gradient color range.
In linear gradient, the color flows in a single direction: up, down, left, right, or diagonally.
Hexadecimal color values or RGB values Not applicable #00000 and #434343
Background radial gradient Sets the background radial gradient color range.
In radial gradient, the color radiates out from the center.
Hexadecimal color values or RGB values Not applicable #00000 and #FFFFFF
- To save your changes, click Apply changes.
- (Optional) To reset specific properties to default, navigate to the property and click Reset to default next to the property name, as shown in the following example:
- (Optional) To reset all properties to default, click Reset to default at the bottom of the page.
To verify rebranding
To make sure that the branding is updated, in a browser, open https://localhost:9000/dwp/app
In multitenant environments, the login screen is the same for all tenants. To confirm that the rebranding is applied for a specific tenant, log in as a user who belongs to that tenant company.
Comments
Log in or register to comment.