Rebranding BMC Helix Digital Workplace
You can rebrand BMC Helix Digital Workplace for your end users to suit your company's branding. Rebranding elements include the default logo, background color, and colors for the primary, secondary, and active elements. You can also rebrand the login page for the external user portal. If you have configured multitenancy to restrict access for users to a specific company, you can apply rebranding that is unique to each individual tenant.
Important
If you are using a login mechanism that bypasses the standard login page (for example,
Before you begin
- If you have a multitenant environment, make sure you have created the subtenants. For more information, see configure 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.
Customizable properties for the login page
For each tenant or external user portal, you can customize the following images:
- Product logo—A company's logo displayed in a legal statement on a login page and in the application's navigation bar.
- Mobile home screen logo—A company's logo displayed on a mobile device after a user adds an application page to the home screen.
- Favicon—An icon displayed in the browser's address bar, next to the page's name in a list of bookmarks, or in a tab.
- Background image—An image displayed on a login page background.
Best practices for customizing the images
Graphic | Description and requirements |
|---|---|
Product logo | Requirements:
Recommendation: Transparent PNG, 48H x 80W pixels. Example:
|
| Mobile home screen logo | Requirements:
Recommendation: Transparent PNG, 512H x 512W pixels. Example:
|
| Favicon | Requirements:
Recommendation: Transparent PNG, 32H x 32W pixels. Example:
|
| Background image | Requirement: Insert a URL to only one login page image. Example:
|
To rebrand the login page
You can upload the logo and background images, and choose colors for various elements in the user interface. According to your selections, the rebranding automatically applies changes to the user interface.
In addition to the steps below, the following video (6:43) describes how to rebrand the application:
Log in to the Admin console, and select Configuration > Branding.
Important
If you are rebranding the external user portal login page, log in to the Admin console as an external administrator.
Rebrand the required elements as described in the table following the preview image.
Tips
To view your changes as they are updated dynamically, use the UI Preview icon.
Rebranding area Action Global Navigation To change the global navigation style, select Dark (default), Light, or Gray. (Optional) To update the product name, type your product name in the Product name field.
The maximum length for a product name is 56 characters.
(Optional) To add JAWS text so that users hear the product name pronunciation when they hover over the product logo, type the corresponding text in the Logo alt text field.
To update the Product logo, click Attach file, or drag and drop the image file.
Web Application Icons The mobile home screen icon is an icon added to the mobile home screen that opens an application page in the browser. To update the Mobile home screen icon, click Attach file, or drag and drop the image file. The administrator can add a custom mobile home screen icon only for Android devices.
The favicon is an icon associated with the application. The favicon is displayed next to the page's title on the tab, as a bookmark icon, or as a website icon. To update the Favicon, click Attach File, or drag and drop the image file. The administrator can add a favicon for Android devices and desktop browsers except for Safari and Microsoft Edge. For these browsers, the first letter of the product name is shown instead of the favicon.
Colors Tip
To view the hexadecimal code for colors of the approved BMC palette, use the Computed colors icon.
To update the Primary state color, use the color picker tool, enter a hexadecimal code, or enter the RGB values.
The application automatically adjusts the text color to maintain the contrast between the background and the text and the readability of the text.
To update the Secondary state color, use the color picker tool, enter a hexadecimal code, or enter the RGB values.
The application automatically adjusts the text color to maintain the contrast between the background and the text and the readability of the text.
To update the Active state color, use the color picker tool, and enter a hexadecimal code, or enter the RGB values. Login page
Use Background color to specify the background color for the login page.
The gradients (if selected) are applied to this color.
Note: You cannot delete or modify the Powered by BMC inscription at the bottom of the login page.
(Optional) Use Background: image to select a background image for the login page. Provide the image URL to be used in the background, and select the options to customize the look and feel.
(Optional) Use Background: linear gradient to configure the linear gradient by specifying one or more of the available settings.
(Optional) Use Background: radial gradient to configure the radial gradient by specifying one or more of the available settings.
- To save your changes, click Apply changes.
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.