CSS Manager

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

The CSS Manager is the central view in which you manage all CSS rules of your project. You open it in the editor via the CSS Manager entry in the Project Explorer.

CSS Manager in the QuickHMI editor with CSS files and editor area

The rules are stored in named CSS files. Each CSS file is included as its own stylesheet in the Web Viewer and therefore applies project-wide to all pages. Which elements a rule actually affects is determined by the selectors (see Addressing elements).

Creating a CSS file

  • Create a new CSS file using the Add button. It initially receives an automatic name (for example CSS_1).
  • Assign a meaningful name. The name must be unique and must not be empty.
  • Optionally assign the file to a category. Files with the same category are shown grouped in the tree. The category is only for clarity and has no effect on the display.

Editing rules

In the editor area you write the CSS rules of the selected file. The editor supports you with:

  • syntax highlighting for CSS,
  • a search within the current CSS text,
  • undo and redo of your changes.

Managing CSS files

  • Rename: via the name field of the selected CSS file.
  • Delete: select one or more files in the tree and remove them via the context menu or the Del key. A confirmation prompt appears before deletion.

Effect in the Web Viewer

The rules stored in the CSS Manager affect the display in the Web Viewer. To learn how to target individual elements, entire pages or control types, see Addressing elements. For concrete use cases, see Practical examples.