Custom style definitions

📘

Deployment Feature Availability

Available in on-premise and private instance cloud deployments only.

In addition to instance-wide themes, custom styling can be applied at the level of individual questions or layout elements (such as Pages or Sections). In Design, this is exposed via the "Style" drop-down list on the settings for Layout elements and most Questions, and the "Button Style" drop down list on Button questions which have their display set to "Button" instead of "Tile".

The styles available for selection in this list are sourced from the Manage appsettings.json file. The entries can be restricted to apply to a combination of questions, layout items, or the button question, and can be restricted by business unit (i.e. tenancy).

Style entry format

The "Styles" object is in the Manage appsettings.json file, at the top level. Its properties are themselves objects, each containing the properties "appliesto", "businessunitguid", and "class". The name of each style object is what is displayed in Design; style objects must be named uniquely within the file.

Style entry sample

The following snippet shows a Styles block which defines two styles. The first, named "Red", is available for selection on Layout or Question elements, by designers in any tenancy, and will add the class "red-background" to the relevant items in Produce. The second, named "Green", is available for selection only on Question elements, by designers in a single particular tenancy, and will add the class "green-outline" to the relevant items in Produce.

Note that in order to have any effect, the class names must match a class definition in the custom or default CSS, or in Bootstrap.

{
  "Styles": {
    "Red": {
      "appliesto": "layout, question",
      "businessunitguid": "",
      "class": "red-background"
    },
    "Green": {
      "appliesto": "question",
      "businessunitguid": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
      "class": "green-outline"
    }
}