How do I change this color?

[sminkle]

I have been able to edit the themes pretty easily up until now, but I just canNOT find out where this color is or how to change it. Any ideas? How do I change that green? For the record, it is a "Path Edit" field.

[Daniel]

Hello and welcome to Advanced Installer forums,

Thank you for your interest in Advanced Installer.

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: 251115;427655;677679;1617031

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.

Also, if you want you can propose us your custom "Surface" theme variation to be implemented in a future Advanced Installer version.

All the best,
Daniel

[sminkle]

Daniel,

That did it. Thanks!

[Daniel]

You're welcome. Glad to help.

All the best,
Daniel

[sfaust]

I know this is an old topic but has this changed? I'm in 12.7 and would like to change the background color for the surface theme but this method doesn't seem to be working... For one when I go to set the property on the 'Set Installer Property' action and press the ellipsis button to select a property, the AI_CONTROL_VISUAL_STYLE is not listed, though it is in the table editor. I can manually type in the property name but it doesn't seem to have any effect.

I was able to get the color decimal value by the method suggested, and I can replace that as needed in the table editor directly and I can make the border color change, but that's all, everything stays the same even if I replace the color. Is there a new method to do this?

[Daniel]

Hello,

To change the background color for the "Surface" theme you should go to "Themes page -> Preview tab -> More Options section" and edit the "Background" image.

If you have any questions just let us know.

All the best,
Daniel

[Hendrik]

Hi,

I am using AI v11.9. I want to change the color style of the surface theme. I already found necessary pictures to be changed,
but other colors like text colors or the previously mentioned fields I cannot change because I have no text style dialog in the themes section.
How can I change this anyway for each dialog?

Thanks,
Hendrik

[Daniel]

Hello Hendrik,

Using our latest version of Advanced Installer (i.e. 14.5.2) you can define new text styles from "Themes" page -> "Text Styles" tab to be used by your project. Then you can go in "Dialogs" page and select the controls you need to use a custom text style. From its "Properties" right pane configure it under the "Text Style" section.

Unfortunately, this support was not available in AI 11.9 version.

All the best,
Daniel

[fede071]

Hi,

I was following the instructions as above and changed the value of the property AI_CONTROL_VISUAL_STYLE

As I wanted the Control to be white with a gray border by default and light blue with a blu border when hovered, I changed the property to this:

property.png (6.65 KiB) Viewed 3910 times

but when I build it the control looks as in this picture:

colors.png (44.95 KiB) Viewed 3910 times

Why is it so?

Thanks in advance
Federica

[Liviu]

Hello Federica and welcome to our forums,

First, you need to make sure that the Enhanced User Interface is enabled. Just go to the "Themes" page --> "Settings" tab and enable the Enhanced User Interface to "Only on install" or "Always".

Now, you need to set the AI_CONTROL_VISUAL_STYLE property using a "Set installer property" custom action like this:

• decimalBackgroundColor;decimalOverBackgroundColor;decimalBorderColor;decimalOverBorderColor

Just follow the above steps in this thread to see how to find the color code.

I've tested this and everything worked as expected:

• Property: AI_CONTROL_VISUAL_STYLE
  Value: 16777215;16744448;8421504;1617031

The result is: white EditBox with gray border on normal and blue color on hover.

Also, you can test the attached project.

Please let me know if you have any questions.

Best regards,
Liviu

[fede071]

Hi Liviu,

thank you so much. I had not realised the decimal code of a color should be found out from advanced installer itself and was using an online converter hex to decimal value.

Everything works as expected now!

[Liviu]

Hi,

I'm glad to hear that.

If you have any other questions, please let us know.

Best regards,
Liviu