ℹ️ Ultimate feature. CSS styling is available from QuickHMI 14.9.1 with an Ultimate license.
With CSS styling you design the appearance of your visualization in the Web Viewer using your own CSS rules. This lets you define colors, fonts, borders, spacing and other display properties centrally, without adjusting each control individually in the editor.
How it works together
CSS styling consists of three building blocks that work together:
- CSS Manager: Here you store your CSS rules in named CSS files and, if required, group them by category.
- Selectors on the control: In the Web Viewer, every control receives a unique ID (
CssId) as well as automatic and custom classes (CssClasses). Through these selectors your rules target individual elements, entire pages or control types. - Web Viewer (runtime): When running, QuickHMI automatically includes your CSS files in the web interface and applies the rules to the matching elements.
Where CSS styling applies
CSS styling affects the display in the Web Viewer. It supplements the standard appearance of the visualization with your own design rules. The rules are assigned entirely in the editor; no further step is required at runtime.
Topics at a glance
- CSS Manager: create, name and manage CSS files.
- Addressing elements:
CssId,CssClassesand the automaticqh-classes as selectors. - Practical examples: typical styling tasks step by step.
