Vizlib Home
Welcome
Login

Vizlib Input Form - Custom Styling

Custom Styling


Vizlib Input Form contains a Custom Styling panel 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


Default Setting

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).

  1. Custom Color highlights the field the cursor has selected, Areas to improve in this example. 
  2. Input Size changes the width of the input field and can impact on the layout. 
  3. Validation Label Color changes the color of the validation label text. 
  4. Validation Error Color changes the color of the validation error text. 


Figure 2: Default Setting


Custom Color

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 



Input Size, Validation Label Color and Validation Error Color

We're going to use Review Date to demonstrate the other custom styling features (Figure 4). 


  1. 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.
  2. Changing the Validation Label Color will change the color of the validation label text. 
  3. 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



Related Articles 

You can find a list of related articles in the Vizlib Input Form Overview. 

K
Kenneth is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.