Properties - Custom Styling

If you'd like to apply your own styling to your data, Vizlib Input Form has a Custom Styling section in the property panel, with functions to help modify and control presentation and color branding. Vizlib Input Form now uses the Color Picker to apply color settings, you can read full instructions here.

This topic contains the following sections:

Example

Figure 1 shows changes being made to the field Has Contact Information. The Custom Styling settings are used to add a Suffix, set the Custom Color, to move the field to the center of the form with Align Input, and change the Suffix Position from right to left.

Figure 1: Custom Styling Example

Custom Styling

To start using custom styling, toggle the Custom Theme slider to the right to allow you to edit the Custom properties (Figure 2). This example shows the properties for a Toggle/Checkbox data type.

Figure 2: Custom Theme

There are 2 ways you can select a color in Custom Styling. You can open the color palette and select a color using the slider or the matrix, or enter the color hex code in the expression editor e.g. entering #000000 will set the color to black.

The color settings you can select and adapt for custom styling are listed here:

  • Custom Color - used for table components such as highlights and inputs (e.g. when a check box is selected).

  • Input Title Color - used for text inputs for input fields.

  • Suffix Color - used for the suffix in a field title.

  • Checkbox Border Color - used for the border of the check box (multiple choice and radio button data types also have this setting).

  • Required Label Color - used for the label text in a column where an input is required.

  • Validation Error Color - used for the error message in a column using validation.

There are also settings where you can choose the Input Size, position the input field using Align Input, set the field Label Position, and choose the field Suffix Position.

If you'd like to use tooltip with the input field, you can enable the Custom Field Tooltip settings (Figure 3), where you can display a Field Tooltip Icon, choose an icon type with the icon picker (or by adding an expression) and also use the color picker to select a color.

Figure 3: Tooltip

You can see an example of a custom tooltip icon in Figure 4.

Figure 4: Tooltip Example