Table Of Contents

Customizing the Appearance of Controls in a WebVI

Last Modified: November 16, 2020

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:

spd-note-note
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 LabVIEW NXG Web Module and make manual updates to your CSS styles if necessary.

  1. Open the panel of a WebVI and click Edit HTML Source ( ).
  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.

    <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


Recently Viewed Topics