Check our other helpful areas that might answer your question

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:




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:




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:





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:

and locate the fragment folder:

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.




Define custom text style to be used by controls

Create custom text style to be used by the controls:

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.





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:




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