Style plugins with CSS

Form plugins provide themeable CSS variables to control the appearance of your plugins in the form canvas. You can use these variables to make your plugin fit seamlessly with out-of-the-box form controls.

You can also use the custom CSS feature available in Nintex Forms to style your plugins. See Style your plugin with custom CSS, below.

Style your plugin with CSS variables

Support for CSS variables to style your plugins is coming soon.

Use the following CSS variables in your plugin's CSS to style your Form plugins so they fit naturally with the rest of your form controls.

There are CSS variables available for:

See Add CSS variables, or an example TypeScript plugin using CSS variables in the plugin repository.

export class CustomInput extends LitElement {
  static styles = css`
    .form-control {
      color: var(--ntx-form-theme-color-text-input);
      background-color: var(--ntx-form-theme-color-field-and-modal, transparent);
    }
  `;

Font family and text size

Also see Colors for font colors.

Variable Description

--ntx-form-theme-font-family

Font family used for all forms text.

--ntx-form-theme-text-input-size

Text size for form input fields.

--ntx-form-theme-text-label-size

Text size for non-input form text, such as labels and descriptions.

Colors

Variable Description

--ntx-form-theme-color-page-background

Background color surrounding the form.

--ntx-form-theme-color-form-background

Background color of the form.

--ntx-form-theme-color-input-background

Background color of the input area of controls.

--ntx-form-theme-color-border

Color of form control borders.

--ntx-form-theme-color-input-text

Color of font in text input fields.

--ntx-form-theme-color-primary

Primary accent color used to highlight elements.

--ntx-form-theme-color-secondary

Secondary accent color used to highlight elements.

--ntx-form-theme-color-error

Background color used for error messages.

Borders and height

Also see Colors for border color variables.

Variable Description

--ntx-form-theme-border-radius

Radius of borders.

--ntx-form-theme-control-height

Height of form controls.

Style your plugin with custom CSS

You can add themeable CSS to your plugins using the ::part() CSS selector and Forms custom CSS. The CSS can then be defined specifically for a form, or in a separate CSS file you can link to multiple forms.

In your plugin's render() function, add a part property to each element you want to select and style.

Once you have registered your plugin and added it to a form:

  1. Click the Styles tab.
  2. Scroll down and expand Advanced Styles.
  3. Enable Customize your form styling using CSS.
  4. Click Open CSS editor.
  5. Add a ::part() selector with the custom CSS.
  6. Click Apply changes.

You can also link to an externally-hosted CSS file.

Add the part property to the element:

render() {
  return html` <input class="form-control"
    id="customInput"
    part="myCustomInput"
    .label="${this.label}"
    .helper="${this.description}"
    @change="${() => this.onChange()}"
    />`;
}

In the Forms custom CSS editor:

::part(myCustomInput) {
  background-color: yellow;
}

For more information on using Forms custom CSS, see:

For more information on the ::part() CSS selector, see the MDN reference.