Customizing the Appearance of Controls in a WebVI

Use Cascading Style Sheets (CSS) to customize the appearance of controls in a WebVI. You can modify properties such as the font, color, shape, or layout of a control.

Before you begin, complete the following:

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.
  1. Open the panel of a WebVI and click Edit HTML Source (1378).
  2. In the <head></head> tags, add the following lines of code after the <style ni-autogenerated-style-id=""></style> tags. 
    <style>
    selector {
        property 1: value 1;
        property 2: value 2;
        ...
        property n: value n;
    }
</style>
    CSS Item Description
    selector

    The element you want to customize. You can select an element by its tag name, ID, class, or attribute. Example: ni-string-control
    property: value The property of the element that you want to customize and the value you want to change it to. Example: --ni-control-background-color: orange;

    For example, you can use the following code to change the background color of a string control from the default white to orange.


    1378

    <style>
    ni-string-control {
        --ni-control-background-color: orange;
    }
</style>
    CSS Item Description
    ni-string-control This selector targets every string control in a WebVI.
    --ni-control-background-color: orange; This sets the CSS Custom Property named --ni-control-background-color to the color orange. The --ni-control-background-color CSS Custom Property targets the background color of string controls.
  3. Click OK and verify your changes.

Search within the programming environment to access the following installed example:

Customize with CSS