ℹ️ Ultimate feature. CSS styling is available from QuickHMI 14.9.1 with an Ultimate license.

So that your CSS rules target the right elements, QuickHMI provides selectors for every control in the Web Viewer. The corresponding properties are found in the Properties Manager. The property names are not translated: CssId, CssClasses and CssDefaultClasses.

CssId

The CssId property is generated automatically from the control’s fully qualified name and is read-only. In the Web Viewer it becomes the HTML id attribute. The format is Page-Control, for example Page-QHMIButton. As an ID is unique per element, you use it to target exactly one element:

#Page-QHMIButton {
  opacity: 0.5;
}

CssClasses

Using CssClasses you assign your own classes to a control (several classes separated by spaces). This is the most important approach for styling several elements uniformly: assign the same class to all affected elements and write one rule for it.

Automatic qh classes

In addition, QuickHMI automatically assigns classes with the prefix qh- to every control (read-only, in CssDefaultClasses). This lets you target entire groups of elements:

• qh-typ-<type> by control type, for example qh-typ-qhmibutton.
• qh-pag-<page> by page, for example qh-pag-page.
• qh-grp-<group> by group, if the element is grouped.
• qh-cat-<category> by category, for example qh-cat-buttons-and-inputs.
• qh-svg-<name> by SVG name, for SVG-based controls.

The values are converted to lowercase and cleaned of special characters.

Combining classes

All of these classes (and your own) sit on one element. To narrow the target, use a compound selector without a space. This targets only the buttons on the page Page:

.qh-pag-page.qh-typ-qhmibutton {
  /* ... */
}

A space (.qh-pag-page .qh-typ-qhmibutton) would match nothing, because it would require a nested element.

Using SVG properties

The controls are rendered as SVG. Therefore use SVG properties such as fill, stroke, rx/ry or opacity instead of HTML properties such as background-color or border. Which inner parts a specific control has is fastest to determine using your browser’s developer tools (F12, “Inspect element”).

For concrete use cases, see Practical examples.