Introduction to ADP and Themes

Introduction to ADP and Themes




Brief introduction on what ADP and Themes are and how to use them
Applies to Askia Design
Written for Survey Designers
Keywords ADP; Theme ; design ; screens ; colors ; ADC ; CSS ; HTML ; styling


Attention: Themes are available in 5.4.4+, whereas ADPs are available in 5.4.6+



ADP (AskiaDesignPage) is a new responsive survey layout model Askia has developed where all values (padding, font size, border, width, etc.) are set in relative units (such as rem and em). It also stores your “theme” colors, all of which can be referenced dynamically with the new Theme AskiaScript keyword (either in your ADCs or CSS templates).

Below is a .gif that demonstrates how easy it is to apply and style an entire survey using the new ADP templates:


As you can see, by simply choosing the ADP "Matter" template, my entire survey can now be dynamically styled and controlled easily through either the "Theme" or "ADP properties" tabs in the Internet Settings.

The new "Using" dropdown box contains three free-to-use ADP controls (Chroma, Matter, and One), or to continue using the legacy internet option template. See below:


When an ADP control is selected, the "Header/Footer" tab is replaced with the "ADP properties" tab:



ADP Controls and how they look:

Below are the current ADP settings available to you for the "Chroma", "Matter", and "One" controls and how each of them appears.










Theme, Theme-compatible ADCs, and Screens: 

Introduced in 5.4.4, we have a new "Theme" tab in the "Internet Settings" window:


This tab stores colors, line heights, text sizes, paddings, etc., which can all be referenced in the survey by the ADP or ADC controls.

Reminder: you can find all of our latest 5.3.5 and 5.4.4 ADCs in the following Github directory:

The "Basic" branch contains all of the latest 5.3.5 compatible ADCs, where the "Themed" branch contains all of the latest 5.4.4+ compatible ADCs.

The "Themed" ADCs are rightly named so due to their designed way of utilizing the new ADP Theme properties found in Design's Internet Options.

All of the properties shown in the "Theme" tab are being referenced dynamically in all of the new "Themed" ADCs by using our new "Theme" keyword.

e.g. {%=Theme.PrimaryColor%} or {%=Theme.LineHeight%} or {%=Theme.BorderWidth%} etc.



Let's take a look at the Themed 5.4.4+ Gender ADC in Design 5.4.6. By default, you will no longer see the advanced ADC settings, as you can see below:


In order to enable the viewing of the advanced ADC settings, you need to enable the "Show extended properties for ADC/ADP" option:


Once enabled, you should now see the advanced ADC settings some of you may be familiar with:



Can I change the theme colors? Can I change them only for a specific screen? What about changing them for a specific ADC?

The answer to all of these questions is YES.

You can easily change the survey colors globally by changing them in the "Internet Options > Theme" tab; simply double-click on one of the color options and the color template window should appear:


You can also change them per screen by navigating to the right-side settings once a screen has been opened:



Let's take a look at the 5.4.4+ Gender ADC properties:


I can see that my first selected response in this ADC is using the "Primary Color," and my second selected response is using the "Secondary Color".

If I no longer want my first selected response to use the "Primary Color", I can manually choose a different color:


In this example, instead of using the "Primary Color" as my first response's background, I want to use the "Secondary Color" instead:


You also have the option of using a color which hasn't been set in your Theme by using the {Custom} color option and choosing your own RGB value:


If I used an RGB value of a dark yellow (200, 200, 0), I can see my changes reflected in my first selected response:




Are the older 5.3.5 "adc2" ADCs compatible with 5.4.6+?

Yes; all older versions of the ADCs are forwards compatible. That said, we highly recommend using the newer 5.4.4+ theme-compatible ADCs if you're using Design 5.4.4 or above.

If you use one of the older adc2 ADCs found in the "Basic" GitHub branch, they will not be automatically compatible with the newer APD Theme settings.

For example, if I use the latest adc2-statements ADC on my gender question, it will not follow any of my ADP Theme settings, as it is following its own {Custom} RGB theme settings, found in the normal ADC properties window:


However, because we're using 5.4.6 Design, we now have the option of using one of the newer "Theme" colors from the dropdown list, or using a "script code" color:


 Here I can use the new "Theme" keyword in a script, like so:



Reminder to all developers:

We highly encourage the use of our ADX Studio to manually modify, test, validate, and build any existing ADC or ADP files.

If you extract the contents of a .adc or .adp file into its own folder, you can open that folder as a "Project" in ADX Studio and start modifying these to your own needs:


Above is the folder structure of the new "Chroma" ADP template.

The latest ADX Studio can be found here:


If there are any questions using ADPs, Themes, or ADCs, please email us at

Have more questions? Submit a request