# GUI XML and stylesheet reference

## GUI XML

### Tags

Tag name | Attributes | Child nodes | Description
gui |  | head, body | Root level tag
head |  | style | Header information.
style | src: stylesheet file to include |  | Contains stylesheet information.
body |  | "widget tags" | Contains all the actual GUI information.

### Widget tags

Note: Positioning coordinates are relative to the parent node (or absolute, if <body> is the parent).

Shared attributes for all types: x, y: position; id: identifier; class: style class.

Tag name | Attributes | Child nodes | Description
group |  | "widget tags" | Contains other widgets, for positioning or other stuff.
text | string: string definition id fileId: string definition file id | [text], <br> | A text string. Use <br/> for line break. Texts with the "string" and "fileId" attributes uses a string definition file for its contents and should be closed. Default fileId if none is specified is 0.
img | src: image file name width, height: scaling dimensions dx, dy: non-scaling dimensions, causes the image to repeat or cuts it repeat: sets the image texture to repeat (advanced use only) |  | Defines an image. The default dimensions are the image's own dimensions.
button | value: text value of button string: string definition id instead of value fileId: string file id bmap: use an image file as button |  | Defines a button that can be pressed (all widgets can actually be pressed, though).
checkbox | selected: if defined, the checkbox is checked |  | A check box.
radiogroup | selectedIndex: the selected radio box (defaults to 0) | "widget tags" and <radio> | Works like <group> but uses <radio> child nodes to make them work like proper radio buttons.
radio | selected: if it's selected by default (may be overruled by <radiogroup>) |  | If it's a child of <radiogroup> it works like a proper radio button, otherwise, it's mostly a checkbox which cannot be unchecked.
slider | size: length of slider value: default slider position (0-1) |  | A slider
input | size: size of input box value: default value maxsize: maximum number of characters |  | Defines an input text box.

## Stylesheet

Use # for tag ids; . for classes

### Properties

Property | Value | Description
background | color |
background-image | path |
background-repeat | repeat-x, repeat-y, no-repeat |
opacity | number | Background opacity.
transparent | boolean | If true, the background and border is invisible.
border | integer | Border size
border-color | color |
border-opacity | number |
3d-border | boolean | If true, the border gets a 3d-effect
invert-3d | boolean | If true, the 3d-effect is inverted
font | font name |
color | color | Text color.
font-size | integer |
padding | integer | Padding in all directions
padding-left, top, right, bottom | integer | Padding in some direction
alpha | number | Transparency for images or texts.
visible | boolean | If false, the tag and all its child nodes are invisible by default.

### Predefined pseudo-classes

Name | Description
hover | Active when the mouse is over the widget.
active | Active when the mouse is pressed on the widget.
selected | Active when check- and radio boxes are checked.