Best Practices for Customizing the Appearance of Controls in a WebVI

Use a combination of configuration options in NXG, NI-defined custom properties, and browser-defined Cascading Style Sheet (CSS) properties to customize the controls in your WebVI. By following these best practices, you can create, edit, and maintain the appearance of your controls more easily.

Note If you modify the CSS to customize the appearance of controls, these modifications may not persist from release to release. If you modify the CSS from NI defaults, plan to test your code each time you upgrade to a new version of the G Web Development Software and make manual updates to your CSS styles if necessary.

When to Use CSS Properties

Always use configuration options within LabVIEW NXG instead of NI-defined custom properties or browser-defined CSS properties when configuration options are available. Refer to the following examples of control configurations with LabVIEW NXG Web Module:
  • If the control supports the Configuration Pane UI to accomplish the same effect.
  • If the control supports Property Node configuration to accomplish the same effect.

When Web Module defines custom CSS properties, such as --ni-fill-background, you should use these over other browser-defined CSS properties whenever possible. You can use browser-defined CSS properties, such as font or margin, to format your controls if NXG configuration options are not available.

Styling Guidelines

Use the following guidelines to style your WebVI controls.

Goal How to implement
Style the entire page. Select body
Style the panel canvas. Select ni-front-panel
Style a specific control in my WebVI. Set an HTML class attribute in the IDE and use that class selector in the CSS:
.your_class_selector {
--ni-true-background: yellow;
--ni-true-foreground-color: #067bc2;
}
Note To use an HTML class attribute as a CSS class selector, you must prefix the class attribute with a period in the CSS. In the example above, the HTML class attribute referenced is your_class_selector. See W3schools CSS Selectors for more information.
Style a group of controls in my WebVI. Set multiple HTML class attributes in the IDE and apply the styles to those classes in the CSS:
.activation-progress {
font-weight: bold; 
}
.activation-progress.warning {
--ni-fill-background: yellow;
}
.activation-progress.danger {
--ni-fill-background: red;
}
Note When specifying multiple HTML class attributes in the IDE, the list of classes must be space-delimited. In the example above, the HTML class attribute for the control is activation-progress. To make the control bold and yellow, you would use the HTML class attribute of activation-progress warning. Notice the class is not prefixed with a period and the class names are separated with a space.

For recommendations on how to style specific controls, such as setting border styles on a button or configuring font styles in text boxes, see the How do I customize a specific control on my WebVI Panel? section of CSS Frequently Asked Questions.