2,051
edits
Difference between revisions of "GUI Themes/STX Syntax"
add xml syntax highlighting here too
(add xml syntax highlighting here too) |
|||
| Line 11: | Line 11: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<render_info resolution = "320x240"> | |||
... | ... | ||
</render_info> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 32: | Line 35: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<palette> | |||
... | ... | ||
</palette> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 49: | Line 55: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<color name = 'red' | |||
rgb = '255, 0, 0' | rgb = '255, 0, 0' | ||
/ | /> | ||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 73: | Line 82: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<bitmaps> | |||
... | ... | ||
</bitmaps> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 91: | Line 103: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<bitmap filename = 'logo.bmp'/> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 113: | Line 128: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<fonts> | |||
... | ... | ||
</fonts> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 131: | Line 149: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<font id = 'text_default' | |||
file = 'default' | file = 'default' | ||
color = 'black' | color = 'black' | ||
/ | /> | ||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 169: | Line 190: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<defaults fill = 'gradient' fg_color = 'white' bevel_color = '237, 169, 72'/> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 187: | Line 211: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<cursor file = 'cursor.bmp' hotspot = '0, 0' scale = '3'/> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 211: | Line 238: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<drawdata id = 'mainmenu_bg' cache = false> | |||
/ | <drawstep ... | ||
/> | |||
</drawdata> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 259: | Line 289: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<drawstep func = 'roundedsq' | |||
radius = '6' | radius = '6' | ||
stroke = 1 | stroke = 1 | ||
| Line 268: | Line 299: | ||
gradient_end = 'darkred' | gradient_end = 'darkred' | ||
bevel = 1 | bevel = 1 | ||
/ | /> | ||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 341: | Line 374: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<text font = 'text_button' | |||
vertical_align = 'center' | vertical_align = 'center' | ||
horizontal_align = 'center' | horizontal_align = 'center' | ||
/ | /> | ||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 384: | Line 420: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<layout_info resolution = '320xY'> | |||
... | ... | ||
</layout_info> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 405: | Line 444: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<globals> | |||
... | ... | ||
</globals> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 423: | Line 465: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<def var = 'WidgetSize' value = 'kBigWidgetSize' /> | |||
<def resolution = '320xY' var = 'WidgetSize' value = 'kNormalWidgetSize' /> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 470: | Line 515: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<widget name = 'SmallButton' | |||
size = '128, 18' | size = '128, 18' | ||
/ | /> | ||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
A global widget definition is a parser-exclusive alias for the layout properties of a specific widget. For instance, the definition of a global widget named <tt>Slider</tt> with certain size properties will allow you to specify <tt>Slider</tt> as a Widget type when adding widgets to a Dialog, and that widget will inherit the size properties defined in this global definition. For more information, please check the documentation on <tt><widget></tt> (''local widget definition''). | A global widget definition is a parser-exclusive alias for the layout properties of a specific widget. For instance, the definition of a global widget named <tt>Slider</tt> with certain size properties will allow you to specify <tt>Slider</tt> as a Widget type when adding widgets to a Dialog, and that widget will inherit the size properties defined in this global definition. For more information, please check the documentation on <tt><widget></tt> (''local widget definition''). | ||
< | <syntax type="xml"> | ||
<dialog name = 'SampleDialog' overlays = 'screen'> | |||
<layout type = 'vertical' ...> | |||
/* | /* | ||
| Line 485: | Line 534: | ||
automaticall inherits its size | automaticall inherits its size | ||
*/ | */ | ||
<widget name = 'A.Sample.Button' | |||
type = 'SmallButton' | type = 'SmallButton' | ||
/ | /> | ||
... | ... | ||
</layout> | |||
</dialog> | |||
</syntax> | |||
Because of this, there are no unique identifiers for Widget names. You may give them any alias (since these aliases are only queried by your own layout definition, inside the parser). However, for added customization, the Theme Renderer will also poll a few unique Global Widget names for their layout information: | Because of this, there are no unique identifiers for Widget names. You may give them any alias (since these aliases are only queried by your own layout definition, inside the parser). However, for added customization, the Theme Renderer will also poll a few unique Global Widget names for their layout information: | ||
| Line 519: | Line 570: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<dialog name = 'Launcher' overlays = 'screen'> | |||
... | ... | ||
</dialog> | |||
<dialog name = 'GameOptions_Graphics' overlays = 'Dialog.GlobalOptions.TabWidget'> | |||
... | ... | ||
</dialog> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 584: | Line 638: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<layout type = 'vertical' center = 'true' padding = '23, 23, 8, 23'> | |||
... | ... | ||
</layout> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 615: | Line 672: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<dialog name = 'GameOptions_Audio' overlays = 'Dialog.GlobalOptions.TabWidget'> | |||
<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'> | |||
<widget name = 'EnableTabCheckbox' type = 'Checkbox' /> | |||
<import layout = 'Dialog.GlobalOptions_Audio' /> | |||
</layout> | |||
</dialog> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 641: | Line 701: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<widget name = 'StartButton' type = 'Button'/> | |||
<space size = '16' /> | |||
<widget name = 'AddGameButton' type = 'Button' /> | |||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||
| Line 652: | Line 715: | ||
Space keys may be optionally left without a <tt>size</tt> property: The space will automatically expand itself to fill all the remaining space inside the layout. This may be used to align widgets on the further side of a layout. | Space keys may be optionally left without a <tt>size</tt> property: The space will automatically expand itself to fill all the remaining space inside the layout. This may be used to align widgets on the further side of a layout. | ||
< | <syntax type="xml"> | ||
<layout type = 'horizontal' ...> | |||
/** Add a button on the left */ | /** Add a button on the left */ | ||
<widget name = 'Button1' type = 'Button'/> | |||
/** The space without size value will expand to fill all the layout */ | /** The space without size value will expand to fill all the layout */ | ||
<space/> | |||
/** Add another button: */ | /** Add another button: */ | ||
<widget name = 'Button2' type = 'Button'/> | |||
/** Since the space had filled the layout, this new button shrinks the | /** Since the space had filled the layout, this new button shrinks the | ||
space by the button's width; hence Button2 is now aligned to the right */ | space by the button's width; hence Button2 is now aligned to the right */ | ||
</layout> | |||
</syntax> | |||
===== Properties ===== | ===== Properties ===== | ||
| Line 678: | Line 744: | ||
===== Example ===== | ===== Example ===== | ||
< | <syntax type="xml"> | ||
<widget name = 'AddGameButton' | |||
width = '95' | width = '95' | ||
height = 'Globals.Button.Height' | height = 'Globals.Button.Height' | ||
> | |||
<widget name = 'AboutButton' | |||
type = 'Button' | type = 'Button' | ||
/ | /> | ||
</syntax> | |||
===== Description ===== | ===== Description ===== | ||