Installation user interface frame customization

ImportantThe following article uses options that are available starting with the Enterprise edition and project type.

The frame is split into parts, and each part has a predefined property and image associated with it. To customize images go to Images tab and edit the image. The parts of a frame are:

  • AI_CF_SysCloseDown - system close button when is pressed
  • AI_CF_SysCloseHot - system close button when the mouse is over it
  • AI_CF_SysCloseNormal - system close button
  • AI_CF_SysCloseInactive - system close button when the application is inactive
  • AI_CF_SysMinDown - system minimize button when is pressed
  • AI_CF_SysMinHot - system minimize button when the mouse is over it
  • AI_CF_SysMinNormal - system minimize button
  • AI_CF_SysMinInactive - system minimize button when the application is inactive
  • AI_CF_FrameTopLeft - top left corner frame
  • AI_CF_FrameTopLeftInactive - top left corner frames when the application is inactive
  • AI_CF_FrameTopMid - top middle frame
  • AI_CF_FrameTopMidInactive - top middle when the application is inactive frame
  • AI_CF_FrameCaption - caption area frame
  • AI_CF_FrameCaptionInactive - caption area when the application is inactive frame
  • AI_CF_FrameTopRight - top right corner frame
  • AI_CF_FrameTopRightInactive - top right corner when the application is inactive frame
  • AI_CF_FrameLeft - left frame margin
  • AI_CF_FrameLeftInactive - left margin when the application is inactive frame
  • AI_CF_FrameRight - right frame margin
  • AI_CF_FrameRightInactive - right frame margin when the application is inactive
  • AI_CF_FrameBottomLeft - bottom left frame corner
  • AI_CF_FrameBottomLeftInactive - bottom left frame corner when the application is inactive
  • AI_CF_FrameBottomMid - bottom middle frame
  • AI_CF_FrameBottomMidInactive - bottom middle frame when the application is inactive
  • AI_CF_FrameBottomRight - bottom right corner frame
  • AI_CF_FrameBottomRightInactive - bottom right frame corner when the application is inactive

The image format is bitmap. RGB(255, 0, 255) color is considered as transparent color.

Customizing a dialog window

To change the text style of the dialog title go to Text Styles tab and associate the text style with "AI_CF_TITLE_TEXT_STYLE" property.

To modify the spacing between the system menu buttons set the property "AI_CF_SYS_BTNS_SPACING". The value must be a number between 0 and 25 and represents pixels.

To customize the Y-pos of the system menu buttons set the "AI_CF_SYS_BTNS_YPOS" property. The value must be a number between 0 and 30. This number is considered a percent of the frame height.

Note To set this types of properties go to Custom Actions page and sequence a "Set installer property" custom action before "Wizard Dialogs Stage > Searches".

To customize the frame of a dialog, follow these steps:

  1. Add the frame images by going to Themes > Images > New...
  2. Set the Property name to the part you want to change (e.g., AI_CF_TemplateFrameBottomMid, AI_CF_TemplateFrameBottomMidInactive). The name of the property is formed from the unique identifier "Template" and the frame part you want to change.
  3. Go to Table Editor > Property
  4. Add the name of the dialog you want to change (e.g., AI_CF_CancelDlg, AI_CF_PrepareDlg) in the Table Editor and set its value to the unique identifier we want to apply to the dialog. In our example, we used Template, meaning both the AI_CF_FrameBottomMid and AI_CF_FrameBottomMidInactive of the AI_CF_CancelDlg and AI_CF_PrepareDlg will be changed to the new images we provided.

Example

AI_CF_CancelDlg                       | Template
.......................................................................
AI_CF_PrepareDlg                      | Template
.......................................................................