Differences
This shows you the differences between two versions of the page.
tutorial:styling_model [2020/06/05 16:01] admin [Styling with classes] |
tutorial:styling_model [2021/01/05 03:00] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | ===== Tutorial: Styling Your Models ===== | ||
- | |||
- | Learning Objectives: | ||
- | * [[#What can be styled?]] | ||
- | * [[#What are the styling options?]] | ||
- | * [[#Styling nodes]] | ||
- | * [[#Styling transitions]] | ||
- | * [[#Styling swimlanes]] | ||
- | * [[#Styling boxes]] | ||
- | |||
- | ---- | ||
- | ==== What can be styled? ==== | ||
- | |||
- | Model consists of nodes (state, branch, etc.), transitions, | ||
- | |||
- | By styling, we are referring to the background, color, shape, position and other cosmetic look and feel, which do not affect the functioning of the model. | ||
- | |||
- | ---- | ||
- | ==== What are the styling options? ==== | ||
- | |||
- | Styling options include: | ||
- | - [[https:// | ||
- | - color HEX code | ||
- | - [[#Styling with classes | css classes]] | ||
- | - [[#Styling with css style | css style]] | ||
- | |||
- | In general the color can be set. Many of the components also support styling by classes and css style which are referred to as //advanced styling//. | ||
- | |||
- | ==== Styling with classes ==== | ||
- | This is the preferred option to style as it's more reliable and predictable, | ||
- | |||
- | On the components that supports //advanced styling//, just enter the names of the css classes using space as the delimiter for multiple classes. | ||
- | |||
- | All class names must be named with the prefix //class_//. | ||
- | |||
- | The definition of these css classes are set in // | ||
- | |||
- | |||
- | ---- | ||
- | |||
- | |||
- | |||
- | |||
- | |||