Learning Objectives:

• What can be styled?
• What are the styling options?
• Styling Nodes
• Styling Transitions
• Styling Swimlanes
• Styling Boxes

Model consists of nodes (state, branch, etc.), transitions, boxes and swimlanes, and each of which has components like container area, lines, and labels. All these can be styled to some degree, some supports more styling options while others less.

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.

Styling options include:

1. HTML Color Name
2. color HEX code
3. css classes
4. 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.

This is the preferred option to style as it's more reliable / predictable, and it's a good way to maintain consistency.

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_, for example “class_GREEN”.

The definition of these css classes are set in config/ide.css. The download package comes with two classes: class_GREEN and class_ORANGE. Use these as examples to define your own classes.

CSS style is the most flexible option to change the look and feel of the components. CSS style is just a set of key / value pairs.

 { "background": "ORANGE", "border": "2px solid RED" }

Notice the above css style uses double quotes to enclose both keys and values. This is very important. CSS style must be specified in valid json format.

To style the components that support css styling, just enter the css style json string.

Be aware that, due to how css style are set, if you do change css style, you may need to explicitly unset (remove) settings. For example, if you decided not to set the background color in the above example:

 { "border": "2px solid RED" }

By setting the above css style, you are leaving the background unchanged, which is desired.

To remedy the above situation, you have the options below:

• explicitly remove backgroud:

 { "background": "", "border": "2px solid RED" }

• save and re-open the model

Nodes are states, branches, switches, synchbars and initial / final states. The node container area and node label can be styled independently.

States can be styled on:

• container area
• state label

Both support advanced styling options.

For Container area, you can change color, background color, state borders, opacity, etc. Positions should not be changed as the state position coordinates are used to align the transitions.

• background
• border
• border-radius
• color
• opacity

For state label, you can change its color, font style, font weight,

• color
• font-style, font-family, font-weight, font-size
• text-decoration
• left, right, top, bottom

Branches can be styled:

• container area
• branch node label

Only label supports advanced styling options.

For Container area, you can change background color only.

For branch node label, you can change its color, font style, font weight,

• color
• font-style, font-family, font-weight, font-size
• text-decoration
• left, right, top, bottom

Syncbars have two variations: horizontal and vertical, both can be styled:

• container area

For Container area, advanced styling is supported:

• background
• border
• border-radius
• color
• opacity

Initial and Final states can be styled:

• container area
• state label

Both supports advanced styling options.

For Container area, you can change color, background color, state borders, opacity, etc. Positions should not be changed as the state position coordinates are used to align the transitions.

• background
• color
• opacity

For state label, you can change its color, font style, font weight,

• color
• font-style, font-family, font-weight, font-size
• text-decoration
• left, right, top, bottom

Transitions have line segments and a transition label. Both are styled independently.

Transition line segments and the arrow head can be styled with color name or advanced styling.

• background
• opacity

Transition labels support advanced styling, however their position should not be changed as they are positioned relative to the connection point at the source state. The styling should only on the font.

• color
• font-style, font-family, font-weight, font-size
• text-decoration

Boxes can be styled on the container area as well as their labels independently, both supports advanced styling.

Box container area:

• background
• border
• border-radius
• color
• opacity

Box label:

• color
• font-style, font-family, font-weight, font-size
• text-decoration
• left, right, top, bottom

Swimlane has two variations: horizontal and vertical. They are styled in exactly the same way.

Swimlane has multiple lanes, each of which can also be styled independently.

Swimlane has a header and label, and their color can be set/changed.

Each lane has a label and its background color can also be changed/set.

Advanced styling is not supported.