Style Sheets, basics

Style Sheets are a powerful mechanism that allows customizing the appearance of widgets in addition to the attributes that can be already define inside GEDI. Styles sheets are textual specifications that can be set on the whole application or on a specific widget (and its children widgets). The concepts, terminology, and syntax of Style Sheets are heavily inspired by HTML Cascading Style Sheets (CSS) but adapted to the world of widgets. Style sheets are applied on top of the current widget style and can be used to provide a distinctive look and feel for the application.

Please note that using style sheets in combination with blinking colors will cause a decrease in over-all performance. This only applies to graphical objects which use style sheets.

Please note that the font and color settings made in the Style Sheet are only applied if the default settings for font and color are set inside of a panel/object. If the settings were changed within the GEDI, these manually defined settings from the GEDI are used!

If the font and color settings from CSS should be used the manual settings inside of the GEDI must be reverted to the configured default font and/or color inside of the panel.

As alternative a new default font can be set inside of the config file, see defaultFont.

It must be considered that for an EWO the default font is only known if the font is passed by using the -font parameter or by using the defaultFont config entry.

The project default font has been changed to "Noto Sans". In old panels, which still contain old OS depended font (e.g. MS Dlg), CSS may not work.

Chapter Description
Style Sheets, basics General information about Style Sheets and links to continuing chapters.
Creation of the CSS file Information about syntax and rules of a CSS file with a practical example.
Implementation of Style Sheets Instruction for the implementation of a CSS file in WinCC OA.
Available Classes List of the available Qt classes (Selectors) and their corresponding WinCC OA widgets.