Dan
Posts: 4524
Joined: Wed Apr 24, 2013 3:51 pm

How-to create new variations for an Advanced Installer theme

Hi,

If you want to edit an existing variation for a theme in Advanced Installer, here's the correct approach.

Let's try to implement a blue variation for the Vivid theme:

variation_VividBlueSky.png
variation_VividBlueSky.png (220.02 KiB) Viewed 248444 times



Select theme and variation

Select the theme and variation that you want to be used as a starting point for your custom theme. In this case, we'll start a new variation (blue) variation for the Vivid theme:
Select variation.PNG
Select variation.PNG (123.87 KiB) Viewed 248444 times




Add background image and logo

The next step would be to provide the logo and the background image that will be used by the theme:

Background & Logo.PNG
Background & Logo.PNG (117.65 KiB) Viewed 248444 times




Change frame images

After this step we are ready to change the frame that is used to create the dialog.

Go to the installation folder of Advanced Installer e.g. for version 18.6.1 the default install location is:

Code: Select all

C:\Program Files (x86)\Caphyon\Advanced Installer 18.6.1\

and locate the fragment folder:

Code: Select all

C:\Program Files (x86)\Caphyon\Advanced Installer 18.6.1\themes\common-res\frame\vividorange

Copy the frame folder next to your .AIP(project file) and edit the images per your design. In our case, we'll have a blue variation. Please note that you need to copy the corresponding fragments folder, depending the theme and variation that you've used for the custom theme.

Then, you need to select the custom fragments that will be used to create the full dialog in the Themes -> Images tab. Basically, each image from here should be replaced with an image from the new design.
Images tab.PNG
Images tab.PNG (235.88 KiB) Viewed 248444 times




Define custom text style to be used by controls

Create custom text style to be used by the controls:
text style.PNG
text style.PNG (229.29 KiB) Viewed 248444 times

Edit the path edit control with custom variation. The same applies for background of the ScrollableText /Eula control or QuickSelectionTree.

In order to achieve this you can set the "AI_CONTROL_VISUAL_STYLE" property to something like this:
  • decimalBackgroundColor;decimalOverBackgroundColor;decimalBorderColor;decimalOverBorderColor
where the above components value represent a decimal color value.

You can add a "Set installer property" custom action with sequence before "Wizard Dialogs Stage -> Searches" action group like this:
  • Property: AI_CONTROL_VISUAL_STYLE
    Formatted: 16754253;12615680;12615680;12870144
AI_CONTROL_VISUAL_STYLE_EX is used when the control is disabled.

In order to find the related decimal color value you can proceed like this:
- Go to "Themes -> Text Styles" tab and add a new text style with a desired color(e.g. MyStyleColor).
- Go to "Table Editor" page, select "TextStyle" table and search for the above text style decimal color value.

SetVisual_Style_Ex.PNG
SetVisual_Style_Ex.PNG (308.54 KiB) Viewed 248442 times




Change text style for controls

Now, you can go in the Dialogs view and edit the dialogs acordingly with your design, add or remove existing controls or change the text style used by a control:

Control text style.PNG
Control text style.PNG (435.74 KiB) Viewed 248444 times



If you started to create the theme first, then you can save the project as a template and use it for multiple installers. This way, you can have same theme for multiple installers. For more details about working with templates, please check the Using the "Save as template" option.


The sample project is attached to this thread, so if you are interested to take a look directly at my project, you are more than welcome to download the project file.


Best regards,
Dan
Attachments
Vivid - Create a new variation.zip
(641.49 KiB) Downloaded 2595 times
Dan Ghiorghita - Advanced Installer Team
Follow us: Twitter - Facebook - YouTube

Return to “Sample Projects”