HomeGuidesRecipesAPI
HomeGuidesAPILog In

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 object property

Function

appliesto

A comma-separated list of which Design elements should display the style for selection. Options are "question" for non-Button questions, "layout" for Pages, Sections, and Tab Groups, and "button" for Button questions (with the "button" display type selected). If left blank, the style will display for all the categories.

businessunitguid

A comma-separated list of business unit IDs for which the style should be displayed in Design. If left blank, the style will display for all business units.

class

The CSS class which should be added to the element in Produce. This may be a class from Bootstrap (which Produce includes by default) or from the site's default or custom CSS files.

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"
    }
}