Vizlib Input Form contains a Custom Styling panel, with functions to help modify and control presentation and color branding. We're going to use the Areas to Improve and Review Date fields from the Layout Wizard article as an example.
You can change the color of a feature by selecting a color from the pop-out palette (Figure 1) or typing a Hex color code into the expression field.
Figure 1: Color Palette
The default setting for Custom Styling is disabled. If you toggle the Custom Theme slider to the right, you'll see the panel (Figure 2).
- Custom Color highlights the field the cursor has selected, Areas to improve in this example.
- Input Size changes the width of the input field and can impact on the layout.
- Validation Label Color changes the color of the validation label text.
- Validation Error Color changes the color of the validation error text.
Figure 2: Default Custom Styling
The Custom Color field can be changed by selecting a color from the palette or entering a color Hex code..
Entering code #000000 in the custom color settings for Areas to improve changes the highlight color to black (Figure 3).
Figure 3: Custom Color
We're going to use the Review Date field to demonstrate some other custom styling features (Figure 4).
- You can increase or decrease the size of an input field by selecting a value from the Input Size dropdown. When you compare with Figure 3, the Review Date field has been increased to Large, and has moved the Review Completed field to a different location on the form.
- Changing the Validation Label Color will change the color of the validation label text.
- Changing the Validation Error Color will change the color of the validation error text.
Figure 4: Input Size, Validation Label Color and Validation Error Color
You can find a list of related articles in the Vizlib Input Form Overview.