Rebranding BMC Helix Digital Workplace

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

1. 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. 
    
2. Click the Use new application styles toggle to preview the latest brand styles and updated colors, including buttons, default colors, and link styling.
   
   Note: Existing customizations remain unchanged. By default, the Use new application styles toggle is disabled.
    

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

4. To save your changes, click Apply changes.
5. (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: 
   
6. (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.