CSS2,layout

QML - Create Your Own Adventure

Name Topic Used in Type
class Text text attribute
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
AppearanceSyntax
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 nameDescriptionCSS 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>