This tool is used to customize the layout, colors, and other styles of the BMC WebUI.

Overview ​

During the customization, you can preview the customized content in real time to intuitively experience the customized WebUI. After the customization is complete, you can export the plan as a configuration file for use in the software.

Brand Information Customization ​

This function allows you to virtually set and preview the customized brand information, such as the software logo, software name, copyright information, and background image. The procedure is as follows:

1. On the BMC WebUI home page, click Custom Tool. The BMC WebUI customization tool page is displayed.

2. Click Brand Info Custom Tool. The customization page is displayed.

3. Select the content to be customized as required.

   • The following table lists the parameters for customizing basic information.

   Parameter	Description
   Software logo: logo	Imports a local image. The image must be in .png format, and the size cannot exceed 178 × 32 pixels and 1 MB.
   Software Name	Sets the software name. The value is a string of 0 to 8 characters, including digits and letters. Spaces are not allowed.
   Homepage Model Image	Displays server models on the home page. The image must be in .png format. The recommended size is 588 × 332 pixels and cannot exceed 1 MB. Preserve the transparent margins around the images for better display on the GUI.
   ICO Icon	Displays icons on the browser tab page. The image must be in the .ico format. The recommended size is 16 × 16 pixels and cannot exceed 1 MB.

   • The following table lists the parameters for customizing the login page.

   Parameter	Description
   Background Image	Background image of the login page. You can upload a local file to replace the original one. The image must be in .jpg format. The recommended size is 1920 × 1920 pixels and cannot exceed 1 MB.
   Card Size	Size of the login window displayed on the login page. Two options are available.
   Card Position	Position of the login window on the login page. Two options are available.
   QR Code	After this function is enabled, you can scan the QR code to view the help information.
   Default Security Bulletin	Once set, it will be displayed on the login page.

4. Click Save to complete the customization.

   NOTE
   

   • You can click Preview to preview the customized content in real time.
     
   • Clicking Default Restore will clear the current customization plan and restore the default brand information before customization.
     
   • Clicking Cancel will return to the BMC WebUI customization tool page.

Brand Style Customization ​

With this function, you can customize the colors of themes and buttons, and adjust the layout controls and text box shapes on the page. The procedure is as follows:

1. On the BMC WebUI home page, click Custom Tool. The BMC WebUI customization tool page is displayed.

2. Click Brand Style Custom Tool. The customization page is displayed.

3. Select the content to be customized.

   • The following table lists the color customization parameters.

   Parameter	Description
   Theme Mode	Theme color of the BMC WebUI. You are advised to select a theme based on the background color of the login page. Theme modes are classified into the bright mode and dark mode.
   Brand Color	Used for key action points, operation status, important information highlighting, graphics, and more. For example, navigation bars, save buttons, and checkboxes.
   Background Color	Used for the background at the bottom of the global page.
   Alarm Color	Used for alarm notification.
   Status Color	Used for global notifications, information notifications, status labels, loading, and more.

   • The following table lists the layout and control customization parameters.

   Parameter	Description
   Layout Navigation	Adjusts the position of the navigation bar on the tool page. You can select a proper layout based on site requirements.
   Components	Defines styles for global buttons, notifications, selectors, text boxes, cards, and other components. Rounded corners are used to display elements like buttons and menus. Shadow is used for the border shadow of the dialog box.

4. Click Save to complete the customization.

Homepage Card Customization ​

With this function, you can customize the layout of the BMC WebUI home page by using the provided template. The procedure is as follows:

1. On the BMC WebUI home page, click Custom Tool. The BMC WebUI customization tool page is displayed.

2. Click Homepage Card Custom Tool. The home page of the BMC WebUI is displayed.

3. Choose a template from the drop-down list on the top of the home page.

4. Click Save to complete the customization.

   NOTE
   

   • Clicking Cancel in the lower part of the home page will cancel the current customization and return to the BMC WebUI customization tool page.
     
   • Clicking Restore Default Homepage in the lower part of the home page will restore the default layout before customization.

Tool for Exporting Customized Files ​

With this function, you can export the current customized plan to the local PC in .json format and integrate it into the BMC firmware package. The procedure is as follows:

1. On the BMC WebUI home page, click Custom Tool. The BMC WebUI customization tool page is displayed.

2. Click Customized File Export Tool. The export tool page is displayed.

3. Click Generate to download the customized plan to the local PC.

   NOTE
   

   You can click the tab in the lower right corner to preview the customized login page and BMC WebUI home page.

Customization Validation Guide ​

The following describes how to make a customized file take effect in the software. The procedure is as follows:

1. Use the white-box package building capability to pack the exported .json file into a white-box package.

2. On the BMC WebUI of the corresponding environment, choose BMC Settings > Firmware Upgrade > Firmware Update, and import the white-box package for upgrade.

3. After the upgrade is complete, the BMC automatically restarts. After the restart is successful, the customized style is displayed on the BMC WebUI.