Differences

This shows you the differences between two versions of the page.

--- tutorial:styling_model [2020/06/05 16:49]
admin [Styling Boxes]
+++ 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, 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.
-----
-==== What are the styling options? ====
-Styling options include:
-  - [[https://www.w3schools.com/colors/colors_names.asp | HTML Color Name]]
-  - 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, 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_//.
-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.
-==== Styling with css style ====
-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
-----
-==== Styling Nodes ====
-Nodes are states, branches, switches, synchbars and initial / final states.  The container area and label can be styled independently.
-=== States ===
-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
-  * 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 ===
-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
-=== Synchbars ===
-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 ===
-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
-----
-==== Styling Transitions ====
-Transitions have line segments and a transition label. Both are styled independently.
-=== Transition line segments ===
-Transition line segments and the arrow head can be styled with color name or //advanced styling//.
-  * background
-  * opacity
-=== Transition label ===
-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
-----
-==== Styling Boxes ====
-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
-----