Skip to main content

IClassicStyles interface

📖 Description​

Interface that specifies the styles for the runner. Supply it to the styles property of the runner.

📃 Type declaration​

interface IClassicStyles {
  mode?: "paginated" | "continuous" | "progressive";Optional
  color?: string;Optional
  autoFocus?: boolean;Optional
  showEnumerators?: boolean;Optional
  hideRequiredIndicator?: boolean;Optional
  showPageIndicators?: boolean;Optional
  showProgressbar?: boolean;Optional
  noBranding?: boolean;Optional
  font?: {
    family?: string;
    size?: number;
    sizeSmall?: number;
  };Optional
  background?: {
    color?: string;
    url?: string;
    opacity?: number;
    positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
  };Optional
  inputs?: {
    backgroundColor?: string;
    borderColor?: string;
    borderSize?: number;
    roundness?: number;
    textColor?: string;
    errorColor?: string;
    agreeColor?: string;
    declineColor?: string;
    selectionColor?: string;
  };Optional
  buttons?: {
    baseColor?: string;
    textColor?: string;
    roundness?: number;
    mode?: "fill" | "outline";
    finishColor?: string;
  };Optional
}
🖱ī¸ Hover with the mouse over a property name for a tooltip with the description of that property. Click it for more information.

🗃ī¸ Properties​

🏷ī¸ autoFocus​

When set to true, the runner tries to gain focus as soon as it is displayed.

Type​

string

warning

If the display mode of the runner is set to page this option is automatically used and therefore always true.

🏷ī¸ background​

Specifies the background settings for the runner.

Type​

{
  /* Background color. */
  color?: string;

  /* Background image. */
  url?: string;

  /* Background opacity (0..100%). */
  opacity?: number;

  /* Background positioning. */
  positioning?: "auto" | "100% auto" | "auto 100%" | "cover" | "contain" | "repeat";
}

🏷ī¸ buttons​

Specifies the styles for the buttons.

Type​

{
  /* Button base color. */
  baseColor?: string;

  /* Button text color. */
  textColor?: string;

  /* Button roundness in pixels. */
  roundness?: number;

  /* Button mode. */
  mode?: "fill" | "outline";

  /* Finish (or complete) button color. */
  finishColor?: string;
}

🏷ī¸ color​

Specifies the base color for the runner.

Type​

string

🏷ī¸ font​

Specifies the font to use. The font family can be a regular font name or a font from Google Fonts. You can also use a custom font by supplying an URL to a custom font stylesheet appended with a hash-sign #, followed by the name of the font (for example, https://yourdomain.com/custom-font.css#fontname). See the Using fonts guide for more information.

Type​

{
  /* Font family to use. */
  family?: string;

  /* Font size in pixels for regular devices (default is 16). */ z
  size?: number;

  /* Font size in pixels for small devices (default is 14). */
  sizeSmall?: number;
}
tip

Read the Using fonts guide for more information on changing the font.

🏷ī¸ hideRequiredIndicator​

Specifies if the required asterisk (*) should be made invisible (default is false).

Type​

boolean

🏷ī¸ inputs​

Specifies the styles for the input elements of the form.

Type​

{
  /* Input field background color. */
  backgroundColor?: string;

  /* Input field border color. */
  borderColor?: string;

  /* Input field border size in pixels. */
  borderSize?: number;

  /* Input field roundness in pixels. */
  roundness?: number;

  /* Input field text color. */
  textColor?: string;

  /* Input field error color. */
  errorColor?: string;

  /* Input field color for agree buttons. */
  agreeColor?: string;

  /* Input field color for decline buttons. */
  declineColor?: string;

  /* Input field text selection color. */
  selectionColor?: string;
}

🏷ī¸ mode​

Specifies the operation mode of the runner. It can be one of the following values:

  • progressive: Presents the whole form at once (this is the default mode);
  • continuous: Keeps answered blocks in view while working through the form;
  • paginated: Use pagination for the form and let the user navigate through the form using a next and back button.

Type​

"progressive" | "continuous" | "paginated"

🏷ī¸ noBranding​

Specifies if the Tripetto branding (a link to the Tripetto website) should be invisible (default is false).

Type​

boolean

License required!

You are only allowed to remove the Tripetto branding if you have bought a license. See the pricing page for more information about licensing and pricing. Read the Disable Tripetto branding guide for more information about this feature.

🏷ī¸ showEnumerators​

Specifies if enumerators (question numbers) should be shown (default is false).

Type​

boolean

🏷ī¸ showPageIndicators​

Specifies if a page indiciators should be shown when the mode is set to paginated (default is false).

Type​

boolean

🏷ī¸ showProgressbar​

Specifies if a progressbar should be shown when the mode is set to paginated (default is false).

Type​

boolean