Theming

Configuration

Types of customization

To configure the theme of your widgets, there are two levels of customization:

1. Global theming in admin console
   This defines a global theme, including brand colors and fonts, which is applied across all widgets by default.
2. Component-level styling
   For more granular control, individual web components can be styled directly by targeting their HTML tags.

Looking for additional customization options? Contact us.

Global CSS selectors conflicts

Global CSS reset rules can unintentionally affect IntelliProve web components. This commonly happens when a project includes a reset or normalization stylesheet (such as a custom CSS reset or Tailwind’s Preflight), which applies baseline styles to all HTML elements using broad selectors (for example the * selector).

To prevent conflicts, global reset styles should be reverted for IntelliProve components. Make sure this reset override is applied after any global reset or Preflight styles, so it properly restores the component’s intended styling.

Simple example:

ip-session,
ip-session * {
  all: revert-layer;
}

Tailwind example:

@import "tailwindcss";

@layer base {
  ip-session,
  ip-session * {
    all: revert-layer;
  }
}

Setting your theme

Ensure you global theming is set up, as it provides the foundation for your theme. Additional component-level styling is optional.

Global theming in admin console

IntelliProve Widgets follow the global styling settings you configure via the IntelliProve admin console. The layout of each widget remains consistent, but you can modify colors and fonts. For more information on how the customer theming is configured, refer to the web plug-in documentation.

Importing fonts

IntelliProve web components render using the font families configured in your admin console. The components reference those fonts by name, they don’t load the font files themselves.

This means the fonts need to already be loaded on the page where you embed the components (through your own @font-face rules or a font provider). We deliberately don’t import fonts from inside the components, so we never inject anything into your page or cause font conflicts or duplicate imports. The face scan works differently: it runs inside an iframe on a page we build, so there we load the fonts ourselves.

You can override the fonts set in the admin console with two CSS variables. Set them on :root or any element that wraps the components, and they’ll cascade into every component:

CSS variable
--ip-font-heading
--ip-font-body

Component-level styling

In addition to configuring theming through the global settings in the admin console, you can style individual web components when importing them directly.

Component-level overrides are not supported when using the plug-and-play Health Dashboard. This uses your global theming configuration.

Shared widget styling

Widgets are self-contained components that are designed to function as standalone building blocks. They are visually recognizable by their card-like appearance and can be styled to fit your design.

To maintain design consistency, widgets use a shared set of CSS variables. By adjusting these variables, you can update the styling across all widgets simultaneously.

CSS variable
--ip-widget-border-width
--ip-widget-border-color
--ip-widget-border-radius
--ip-widget-background-color
--ip-widget-text-color
--ip-widget-inset-md
--ip-widget-inset-lg

Styling the HTML tags

Each widget can be styled individually. Since our custom web components use the Shadow DOM, external styles do not penetrate the internal structure of the component.

If you need to style nested elements, please contact us. We can expose additional CSS variables (which are accessible within the Shadow DOM) or define ::part selectors for more granular control.