Themes

A theme consists of a set of theme definitions, dynamic stylesheets, and generated CSS that you can apply to a process application or toolkit.

A theme definition is a set of theme variables and their values. For example, a theme definition can have a background variable and a value of white. A coach view can have a dynamic stylesheet that uses the variables from the theme definition. When a number of coach views use the same theme definition, you can have a set of coach views that have a consistent visual appearance. Additionally, it is easy to make a global visual change to these coach views by changing the theme variable values without touching coach view definitions. Theme definitions and dynamic stylesheets support the Less stylesheet language so that you can use its syntax and functions to enhance your custom coach views.

A coach view uses the theme definition of the running context, which is the process application or toolkit that is currently using the coach view. You can use this feature to have coach views in one process application styled in one way and the same coach views in a different process application styled in a different way. While the two sets of coach views have the same dynamic stylesheets, the stylesheets use theme definitions that have different values.

Theme definitions and dynamic stylesheets are combined to automatically generate a set of .CSS files. When a process application displays a coach, it uses these CSS files to style the coach views that are contained in the coach. Generating the CSS takes some time, so if you are viewing the process application in Process Designer, you might see the coach views in the coach use default or old theme values until the new CSS is available. At run time, the CSS is already generated for deployed applications and a delay does not occur.

When Process Designer displays a coach view, it uses the theme of the currently open process application or toolkit to style coach views in the layout. This feature means that the same coach view can look different in the Designer depending on which process application or toolkit you have open. For example, you create a type of button control in a custom toolkit. In the toolkit in the Designer, the theme applied to the toolkit styles the button to blue. A process application has the toolkit as a dependency. However, the process application has a theme that styles the button to orange. The context in which you view the button determines the color of the button:
  • If you open the toolkit in Process Designer and add the button to a coach or coach view, the layout shows the button as blue.
  • If you open the process application in Process Designer and add the button to a coach or coach view, the layout shows the button as orange.
  • If you run the process application, the browser shows the button as orange.
In addition to the styling that you can apply through a theme, you can also apply styling in other ways in Process Designer. The following list contains the various ways that you can style a coach view with items higher in the list overriding values set lower in the list:
  1. Classes and attributes added in the HTML Attributes page of the coach view layout properties.
  2. Styling included in the inline CSS of the coach view behavior. To avoid class name collisions, use inline CSS to temporarily develop the CSS styles. After you develop the styles, put them into an included script.
  3. CSS in the included scripts of the coach view behavior.
  4. Style definitions set in the dynamic styling of the coach view behavior.
  5. CSS definitions set by the theme of the process application or toolkit.
There is also a hierarchy that you can use to style individual coach views. The style values of a coach view in a container override the style values set by the container itself. For example, a process application has a theme that styles all its coach views to use the Primary color (blue). However, if you style a button instance in a coach in that process application to use the Success color (green), that button is green. IBM BPM version 8570 cumulative fix 2017.06The controls in the BPM UI toolkit provide this way of styling instances through configuration options.
Parent topic: User interface concepts
Related information:
Example: applying a custom theme
Creating themes