Customizable Theme Pages for Unique Website Designs

Table of Contents

• Introduction
• Registration
• Using Advanced Installer
  • GUI
  • Working with Projects
  • Installer Project
    * Product Information
    * Resources
    * Package Definition
    * Requirements
    * User Interface
    * Themes
    * Theme Settings Tab
    * Images Tab
    * Text Style Tab
    * Dialogs
    * Slideshow
    * Translations
    * System Changes
    * Server
    * Custom Behavior
  • Patch Project
  • Merge Module Project
  • Updates Configuration Project
  • Windows Store App Project
  • Modification Package Project
  • Optional Package Project
  • Windows Mobile CAB Projects
  • Visual Studio Extension Project
  • Software Installer Wizards - Advanced Installer
  • Visual Studio integration
  • Alternative to AdminStudio/Wise
  • Replace Wise
  • Migrating from Visual Studio Installer
  • Keyboard Shortcuts
  • Shell Integration
  • Command Line
  • Advanced Installer PowerShell Automation Interfaces
• Features and Functionality
• Tutorials
• Samples
• How-tos
• FAQs
• Windows Installer
• Deployment Technologies
• IT Pro
• MSIX
• Video Tutorials
• Advanced Installer Blog
• Table of Contents

Disclaimer: This post includes affiliate links

If you click on a link and make a purchase, I may receive a commission at no extra cost to you.

Themes Page

In this page you can choose from Advanced Installer’s predefined themes, set the global properties of your package’s User Interface, change visual styles and customize it by setting custom images and text styles that will be displayed on the install dialogs or controls.

The current theme is displayed in the list using bold text.

To access the Themes Page, from the left pane go to User Interface and click on Themes.

Themes and Layouts

Currently Advanced Installer comes packed with more than 80 themes grouped in several layouts:

• Air
• Windows 7 Wizard style layout. These themes have Glass effects and themed buttons
• App Installer
• Windows Installer theme with MSIX installation design. Windows current theme (dark/light) is automatically detected and applied to your installation. Eula can be placed only as link on AboutDlg by setting AiLicenseAgreementLink property.
• Azure
• Windows Installer themes with this layout use large dialogs, themed background, Enhanced UI and a large and customizable application logo
• Graphite
• Windows Installer themes with graphite mineral look using large dialogs and Enhanced UI. In the left side of each dialog, an overall progress of the installation is displayed
• Light
• Windows installer theme with light look and fresh design.
• Modern
• Windows Installer themes with modern look, large dialogs with themed background and Enhanced UI. Each dialog includes the application logo, name and also the company name
• Serene
• Minimalist Windows Installer theme with clean design.
• Spring
• Segoe UI font, contiguous installation progress, themed buttons and a clean layout are used to create the Spring layout. Installation steps are reduced and most of the dialogs are displayed only when performing a customized installation. These themes use Enhanced UI and are HTML based
• Surface
• Windows 8 Wizard style layout. A lightweight setup design with optimized user interaction, all in accordance with the Windows User Experience setup interaction Guidelines
• Vivid
• Colorful Windows Intaller theme with attention-grabber design.
• Classic
• Windows Installer themes with classic look using a watermark and a banner that can be easily customized

To change the current theme, select the desired one and use the command “Set as current” option from the context menu or by pressing the [Set as current ] button. To customize the current theme use the “Customize Theme” from the context menu. This option will transfer you to Dialog Editor Page .

Some themes, by default, make use of controls available only on specific versions of Windows (e.g. Azure uses Command Link Controls which are available starting with Windows Vista). Please test accordingly.

The Spring theme is not compatible with systems having custom DPI scalling. The UI controls may not be resized correctly.

Frame

From this combobox you can select how the dialogs frame will be presented. It contains the “System” option along with predefined frames specific for the currently selected theme. The System frame is specific to the Windows Operating System the package will run on. Some themes might not support frame change.

Custom Frame

Some themes also support a Custom Frame that can help you customize specific details such as the Base Color, Close Button Base Color, Min Button Base Color Caption or Border Colors, etc.

For detailed information regarding custom frames, see this article: Custom Frame colors configuration

Frame Style

• Flat Caption
  When checked Frame, Close and Minimize are generated using only base colors (no gradients)
• Flat Border
  When checked Border is generated using only base color
• No Inactive
  When checked Inactive state color is the same as Active state color

Frame Colors

You can pick a color using the color picker by clicking on the color button or you can use the color that is automatically generated from the corresponding Base Color.

The default color (that is automatically generated from the Base Color) is displayed with an overlay on the button.

To revert to the default color use Revert to default color context menu option or the button from the color picker.

Theme Specific Options

More Options are available in the right part of the window.

The listboxes contain the images that can be changed and are being used by the current theme.

You can use regular images (e.g. .jpg, .png), but you can also pick a .SVG image resource and Advanced Installer will automatically convert it to a regular image (e.g. .jpg).

There are some Windows limitaions in the .SVG image support. You can find out more information in this article : Why my SVG image isn’t rendered properly?

The following operations are possible:

• Change the resource
• In order to use your own resource file click on the[…] button and then choose [Browse] menu option.
• Revert to default
• If you want to discard any changes and return to the default resources, click on the […] button and select the “Reset” context menu option.

The images that can be changed differ from one theme to another.

Image Sizes

The default image sizes used by Advanced Installer specific for each theme are:

Surface

Air

Azure

Modern

Spring

Classic

Options

This combobox is available only for themes that can be extra customized:

• Change between radio buttons or checkboxes for overall installation progress
• Choose if the theme uses a header image or not

Testing the installation User Interface

Use the [Test Installation UI ] toolbar button in the “Themes” page. This will create a temporary package in the Temp folder and run it without performing an actual installation. Since the package is not installed on your machine, only the installation UI sequence can be tested.

Testing the maintenance User Interface

Use the [Test Maintenance UI ] toolbar button in the “Themes” page. This will create a temporary package in the Temp folder and run it without performing an actual installation. Your product is temporarily registered with Windows Installer so the maintenance UI sequence can be tested..

These options require at least an Enterprise or Architect project.

Topics

• Theme Settings Tab
  Customize theme global settings
• Images Tab
  Set custom images or edit image settings
• Text Style Tab
  Add or edit text styles.

Did you find this page useful?

Please give it a rating:

Thanks!

Report a problem on this page

Information is incorrect or missing

Information is unclear or confusing

Something else

Can you tell us what’s wrong?

Send message

Also read: