UI Panel Settings Area

InstallAnywhere 2024 R2 » Advanced Designer » Installer UI » Look & Feel Settings

Use the UI Panel Settings area in the Look & Feel Settings view to specify customizable advanced runtime UI themes in order to improve the runtime user experience of the installer.

A theme is a set of runtime UI settings that are used to customize the installer panels and frames. For example, you can specify fonts, font attributes, and even import your own fonts. You can customize the colors of windows and buttons, choose to use frameless windows, display your company’s own logo in the installer steps panels, and many other settings.

To customize advanced runtime UI themes

Click the Installer UI page and then click the Look & Feel Settings view.

In the UI Panel Settings area, click the Custom UI Designer button. When you click the Custom UI Designer button, a new window appears that contains all of your saved themes containing runtime UI design settings

Note:The Custom UI Designer button is disabled if the GUI check box in the Allowable UI Modes setting under the General UI Settings is not checked.

When you click the Custom UI Designer button, a new window appears that contains all of your saved themes containing runtime UI design settings. The individual UI settings are grouped into the following three areas that are selectable in the Installer Area drop-down list:

•

Inner Install Frame

•

Installer Steps

•

Outer Installer Frame

When you make changes to any of the settings on the Inner Install Frame, Installer Steps, or Outer Installer Frame, your changes are stored to a theme named unsavedTheme. To save your changes to a new theme name, click the Save Theme button and a Save Theme dialog box appears that lets you save the current customization under a new or existing theme name.

The default for most of the theme settings is to Use default. To customize a setting that includes a Use default setting, deselect the Use default option (or else click the Customize radio button, where applicable) and then click the corresponding ellipsis button (...) to specify a new setting such as a new color or font.

For any customizations that you make, a preview section shows the effect of the change and a Panel to Preview drop-down list is available so that you can view the effects of your customizations on any of the installation panels.

Each of the runtime UI design customization settings are described in the following subsections.

Inner Install Frame

Choosing Inner Install Frame from the Installer Area drop-down list lets you customize the look and feel of the inner install frame section of the installer UI panels.

Inner Install Frame Control

Description

Background Color

Specify the background color for the main body part of each panel in your UI. To make the main body part of each panel transparent, select the No Color option.

Font Settings

Specify the font settings (font family, style, and color) of the inner install frame text. When you click the ellipsis button (...), a Choose Font dialog box appears. Here, you can also click Import Font to import a true type font to use. The imported font will also be shipped with your installer.

Show Status Message

Specify whether actions should display status messages in Install and Uninstall progress panels. By default, this option is set to Yes. If this option is set to No, status messages will not be displayed above the progress bar on the Progress Panel during Install and Uninstall.

Show Progress Bar

Specify whether actions should display a progress bar in Install and Uninstall progress panels. When this option is set to Yes, a standard progress bar that shows the progress of the entire installer by percentage complete, from 0% to 100%, is displayed. By default this option is set to Yes.

If this option is set to No, the Show Indeterminate Progress Bar will be enabled. If this option is set to Yes, the Show Indeterminate Progress Bar will be disabled.

Show Indeterminate Progress Bar

Specify whether actions should display an indeterminate progress bar in Install and Uninstall progress panels. When this option is set to Yes, a bar is displayed that indicates that the installer is running, but it does not show the percentage of progress. By default, this option is set to Yes when Show Progress Bar is set to No.

If this option is set to No, progress bar in Install and Uninstall progress panels will not be displayed at all.

Button Color

Use this setting to customize the colors used for the UI panel buttons.

To override the default colors, choose the Customize radio button (which will clear the Use Default radio button setting), and then click the ellipsis button (...) and choose the appropriate color.

To restore the default colors, select the Use Default radio button in this setting.

You can specify colors for each of the following button characteristics:

•

Display Color—Specify the color of the button.

•

Hover Color—Specify the color to be used for the button to indicate that the mouse is hovering over the button.

•

Select Color—Specify the color to be used for the button to indicate that the button has been clicked.

•

Disable Color—Specify the button color to be used to indicate that the button is disabled.

Progress Bar Color

Use this setting to customize the color used for the installer progress bar.

To override the default colors, choose the Customize radio button (which will clear the Use Default radio button setting), and then click the ellipsis button (...) and choose the appropriate color.

To restore the default colors, select the Use Default radio button in this setting.

Border Settings

Use to specify panel and component border settings:

•

Panel Border—Specify whether you want to include a border around the main body area of your UI panels.

•

Component Border—Specify whether you want to include a border around components like description area, list boxes, text area, etc. in inner installer frame. This setting is disabled if the GUI check box in the Allowable UI Modes setting is cleared.

Installer Steps

Choosing Installer Steps from the Installer Area drop-down list lets you customize the look and feel of the inner installer steps section of the installer UI panels.

The Installer Steps controls are broken up into two sections:

•

Installer Steps Controls

•

Install Progress Panel

Installer Steps Controls

The following settings are available under Installer Steps.

Installer Steps Controls

Installer Steps Control

Description

Show Installer Steps

Specify whether you want the left side of the installer panels to show the progress steps of the installation.

If you select Yes in this setting, InstallAnywhere enables settings in the Installer Steps area, as well settings in the Install Progress area. If you select No, InstallAnywhere disables the majority of these settings.

Installer Steps Type

Select the type of UI control that you want to be displayed on the left side of the installer panels to show the progress of the installation. The Show Installer Steps setting must be set to Yes for the Installer Steps Type settings to be enabled.

Available options of Installer Steps Type are:

•

Images—The left side of the progress installer panels use images to show progress.

•

List of installer steps—The left side of the progress installer panels use text-based steps to show progress.

Enable Uninstall Label settings

Specify whether you want to configure the uninstaller step labels.

By default, this setting is set to No.

This setting is enabled, if the List of installer steps is selected in the Installer Steps Type setting and disabled, if the images is selected in the Installer Steps Type setting.

Installer Steps Panel

This setting contains the following subsettings that let configure the appearance of the panel area that shows the installer steps.

•

Beveled Border—Specify whether you want to add a beveled border around the images or installer steps that are displayed on the left side of the installer panels.

•

Scale Width—Specify whether you want the size of the pane that contains the list of installer steps or image to dynamically resize to fit the size of the installer panel.

•

Background Color—Specify whether you want to use the background color behind the image or list of installer steps. If you select Yes, InstallAnywhere enables you to choose following drop-down options in this setting:

•

Use window default—Use the default window color of the machine running the installer as the background color for the are of the panels that shows the installer progress.

•

Use dialog default—Use the default dialog box color of the machine running the installer as the background color for the area of the panels that shows the installer progress.

•

Customize—Customize the color that shows the installer progress. To specify the color, click the ellipsis button (...) in this setting.

Panel Image

This setting changes, depending on which option you select in the Installer Steps Type setting. Possible check boxes in this setting are:

•

Use this image when no alternate image is specified for an installer step—This check box is available if Images is selected in the Installer Steps Type setting. This check box is always enabled. Use the File subsetting to specify the image to use for the installer steps.

•

Use this image as the background behind the list of installer steps—This check box is available if List of installer steps is selected in the Installer Steps Type setting. To specify an image that you want to use behind the list of installer steps, use the File setting to identify the image. The recommended image dimensions are 174x308 pixels.

The following Panel Image subheadings are also available:

•

File—Select the appropriate file, depending on what is selected in other settings of this view:

•

If Images is selected in the Installer Steps Type setting, click the ellipsis button (...) in this setting to select the image file that you want to use for installer steps.

•

If List of Installer steps is selected in the Installer Steps Type setting, click the ellipsis button (...) in this setting to select the background image for the area behind the list of installer steps. This setting is disabled if the Use this image as the background behind the list of installer steps check box in the Panel Image setting is cleared.

•

Configure Install Labels—To configure the text and icons for the installer steps that the installer UI shows for the installer progress, click the Installer Steps Labels settings button in this setting. The Installer Steps dialog box opens, enabling to you to configure settings as needed. To learn more, see Installer Steps Dialog Box.

This setting is enabled, if the List of installer steps is selected in the Installer Steps Type setting and disabled, if the Images is selected in the Installer Steps Type setting.

•

Configure Uninstall Labels—To configure the text for the uninstaller steps that the uninstaller UI shows for the uninstaller progress, click the Uninstaller Steps Labels settings button in this setting. The Uninstaller Steps dialog box opens, enabling to you to configure settings as needed. To learn more, see Uninstaller Steps Dialog Box .

Refer the following to enable/disable this setting:

•

Selecting the List of installer steps in the Installer Steps Type setting and selecting Yes in the Enable Uninstall Label Settings setting, enable this setting.

•

Either selecting the images in the Installer Steps Type setting or selecting No in the Enable Uninstall Label Settings setting, disable this setting.

Install Progress Panel

Use the Install Progress Panel control settings to configure settings for the image or labels on the left side of the installer panels that show the progress of the installation. The following settings are available under Install Progress Panel.

Install Progress Panel Controls

Install Progress Panel Control

Description

Image

Specify which image you want your installers to show on the left side of the installer panels that show the progress of the installation. Available options are:

•

User the Installer’s Default Image—To use the image that is specified in the File setting (under the Panel Image setting), select this option.

•

User the Same Image as the Previous Panel—To use the image that is specified for the previous panel, select this option.

•

Do not Display an Image—To show no additional image in this panel, select this option.

•

Specify an Image (170x305)—To specify the image that you want to use for the installer step images, select this option, and then use the File setting to select the image file. The size of the install progress panel is 170 pixels wide by 305 pixels tall. installer dimensions may change slightly, depending on the platform, to better display text and different fonts.

This setting is enabled if Images is selected in the Installer Steps Type setting. This setting is disabled if List of installer steps is selected in the Installer Steps Type setting.

File

If you select the Specify an Image (170x305) option in the Image setting (under Install Progress Panel), click the ellipsis button (...) in this setting to select the appropriate file.

Install Progress Label

Use this setting to specify which label you want your installers to show on the Install Progress panel. To specify the label, click the Install Step Label Settings button in this setting. For more information, see Install Step Label Settings Dialog Box.

This setting is enabled, if the List of installer steps is selected in the Installer Steps Type setting and disabled, if the Images is selected in the Installer Steps Type setting.

Uninstall Progress Label

Use this setting to specify which label you want your uninstallers to show on the Uninstall Progress panel. To specify the label, click the Uninstall Step Label Settings button in this setting. For more information, see Uninstall Step Label Settings Dialog Box.

Refer the following to enable/disable this setting:

•

Selecting the List of installer steps in the Installer Steps Type setting and selecting Yes in the Enable Uninstall Label Settings setting, enable this setting.

•

Either selecting the images in the Installer Steps Type setting or selecting No in the Enable Uninstall Label Settings setting, disable this setting.

For information on specifying how the progress of a merge module should be displayed, see Specifying How to Show the Progress of a Merge Module Installation.

Outer Installer Frame

Choosing Outer Installer Frame from the Installer Area drop-down list lets you customize the look and feel of the outer installer frame sections of the installer UI panels.

Outer Installer Frame settings

Outer Installer Frame Settings

Description

Background Image

To include a background image in the UI of your installer, select the Use background image check box in this setting.

The following subsettings are available under Background Image:

•

File—This setting indicates the path and file name of the image file that you want to use for the background of your installer panels. To browse to a different image, click the ellipsis button (...) in this setting. To revert back to the default image file, click the revert button in this setting.

•

Scale to Fit—This setting lets you specify whether you want the image to be scaled to fit the width of the panel, the height of the panel, or both the width and height of the panel. Select the appropriate check boxes as needed.

•

Mirror for RTL—This setting is for languages, such as Arabic and Hebrew, that are read from right to left. If your project includes support for these locales, and if you want the background image that you specify in the File setting to be mirrored on its vertical axis (flipped left-right) for those locales, select this check box.

Titles, Labels and InstallAnywhere Font

Use this setting to customize the colors for the titles, labels, and InstallAnywhere branding on your UI’s panels.

To override the default colors, clear the Use default check box in this setting, and hen click ellipsis button (...) in this setting and specify the appropriate colors. In the resulting dialog that appears, you can also click Import Font to import a true type font to use. The imported font will also be shipped with your installer.

To restore the default colors, select the Use default check box in this setting.

If you select the Gray beveled text option in the Beveled Logo setting, the InstallAnywhere branding and the horizontal line that is next to the InstallAnywhere branding are displayed in gray; this setting overrides any color choice that you specify in the Titles, Labels, and InstallAnywhere Font color settings.

Beveled Logo

Indicate how you want the InstallAnywhere branding to be displayed on your UI’s panels. Available options are:

•

Gray beveled text—The branding is shown with a gray bevel effect. If you select the Gray beveled text option in the Beveled Logo setting, the InstallAnywhere branding and the horizontal line that is next to the InstallAnywhere branding are displayed in gray; this setting overrides any color choice that you specify in the Titles, Labels, and InstallAnywhere Font color settings.

•

non-beveled text—The branding is shown without a bevel effect. The color that is configured in the Titles, Labels and InstallAnywhere Font color setting is used for the branding.

Installer Size

Specify the width and height (in pixels) that you want to use for your installer UI panels at default operating system resolution or DPI settings.

To restore the default size for panels (600 pixels for the width and 400 pixels for the height), click the undo button.

Note:The size of the Installer UI panels are scaled in accordance with the resolution/DPI settings.

Frameless Window

Specify whether to remove the frame around the installer window in order to achieve a minimalist look and feel common in Windows 10. If you specify Yes for this option, the Minimize Button and Close Button options will be enabled, allowing you to choose an image other than the default images that are used for each button.

Minmize Button

Click the ellipsis (...) button in this setting to select the appropriate file to replace the default graphic that is used for the installer Minimize button.

If you specify No for Frameless Window, this option is disabled. If you specify Yes for Frameless Window, this option is enabled, allowing you to choose an image other than the default images that are used for each button.

Close Button

Click the ellipsis (...) button in this setting to select the appropriate file to replace the default graphic that is used for the installer Close button.

If you specify No for Frameless Window, this option is disabled. If you specify Yes for Frameless Window, this option is enabled, allowing you to choose a graphic other than the default buttons that are used for each button.