A class is used to attach a certain style to a text, a choice, an image
or text formatting elements like emphasis.
For example, you may want to give the speech of a certain monster
a special tone; you would define the text to be of class "monster",
and create and edit this class in the Project --> Style --> Classes
dialog. The style language is CSS.
Style samples
Appearance | Syntax |
Big white letters on dark ground |
white; font-size: 120%; background-color: black; |
Italic, underlined text |
font-style: italic; text-decoration: underline; |
Text with a thin black border around it |
border: 1px solid black; |
Text that is positioned at the top left of the screen |
position: absolute; left: 10px; top: 20px; |
Text that is positioned at a variable place, depending on a QML-number that is set in a station.
|
position: absolute; left: [x]px; top: [y]px; |
There are already default classes available for images
and choices. You can override them by using your own classes, or use
the default class name to automatically style all the elements of this type.
Default classes
Class name | Description | CSS sample |
qmlImage |
All images that are included in a station |
position: absolute; left: 300px; top: 20px; border: 2px solid black; |
qmlChoice |
All choices (except inline choices). By default, if you style a choice, the bullet-item will
disappear. You can make it appear again by using the CSS property list-style-type |
list-style-type: circle; color: yellow; font-weight: bold; |
qmlInlineChoice |
All inline choices (those within text). |
font-family: bold; background-color: gray; |
qmlLink |
The link inside a choice. If you style a choice,
the actual link inside the list item will override some of your definitions. Use qmlLink
to attach a style to the link itself. |
color: rgb(200,100,150); text-decoration: none; |
qmlEmphasis |
Styles all emphasis elements used in text formatting. |
font-style: normal; color: red; |
qmlStrong |
Styles all strong elements (for increased emphasis) used in text formatting. |
font-weight: normal; font-style: italic; text-decoration: underline; |
qmlDisplay |
Styles all display elements used in text formatting. |
font-family: "courier new", courier, monospace; border: 2px outset; padding: 5px; |
qmlTable |
Styles all table elements. |
border: 1px solid black; border-collapse: collapse; |
qmlCaption |
Styles all table caption elements. |
background-color: #eee; |
qmlTr |
Styles all table tr (row) elements. |
background-color: #eef; |
qmlTh |
Styles all table th (heading) elements. |
background-color: #ccc; |
qmlTd |
Styles all table td (cell) elements. |
background-color: #cfe; |
There comes a context-help with the Classes editing dialog,
but it helps to know more
about
CSS (Cascading Style Sheets)
to fully utilize this feature.
Sample:
<text>"Who... are you?" you ask the monster.</text>
<text class="monster">"I'm Humba the evil,
but you won't live long enough to tell anyone."</text>
<choice station="attack">Attack</choice>
<choice station="retreat">Retreat</choice>