TrustedUser
2,147
edits
Difference between revisions of "GUI Themes/STX Syntax"
Fix syntax highlighting
(adapt to recent theme parser changes) |
(Fix syntax highlighting) |
||
| Line 11: | Line 11: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<render_info resolution = "y>399"> | <render_info resolution = "y>399"> | ||
... | ... | ||
</render_info> | </render_info> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 35: | Line 35: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<palette> | <palette> | ||
... | ... | ||
</palette> | </palette> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 55: | Line 55: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<color name = 'red' | <color name = 'red' | ||
rgb = '255, 0, 0' | rgb = '255, 0, 0' | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 82: | Line 82: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<bitmaps> | <bitmaps> | ||
... | ... | ||
</bitmaps> | </bitmaps> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 103: | Line 103: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<bitmap filename = 'logo.bmp'/> | <bitmap filename = 'logo.bmp'/> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 128: | Line 128: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<fonts> | <fonts> | ||
... | ... | ||
</fonts> | </fonts> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 149: | Line 149: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<font id = 'text_default' | <font id = 'text_default' | ||
file = 'default' | file = 'default' | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 185: | Line 185: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<text_color id = 'color_normal' | <text_color id = 'color_normal' | ||
color = 'black' | color = 'black' | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 230: | Line 230: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<defaults fill = 'gradient' fg_color = 'white' bevel_color = '237, 169, 72'/> | <defaults fill = 'gradient' fg_color = 'white' bevel_color = '237, 169, 72'/> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 251: | Line 251: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<cursor file = 'cursor.bmp' hotspot = '0, 0' scale = '3'/> | <cursor file = 'cursor.bmp' hotspot = '0, 0' scale = '3'/> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 278: | Line 278: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<drawdata id = 'mainmenu_bg' cache = false> | <drawdata id = 'mainmenu_bg' cache = false> | ||
<drawstep ... | <drawstep ... | ||
/> | /> | ||
</drawdata> | </drawdata> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 329: | Line 329: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<drawstep func = 'roundedsq' | <drawstep func = 'roundedsq' | ||
radius = '6' | radius = '6' | ||
| Line 340: | Line 340: | ||
bevel = 1 | bevel = 1 | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 414: | Line 414: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<text font = 'text_button' | <text font = 'text_button' | ||
text_color = 'color_button' | text_color = 'color_button' | ||
| Line 420: | Line 420: | ||
horizontal_align = 'center' | horizontal_align = 'center' | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 462: | Line 462: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<layout_info resolution = 'y>399'> | <layout_info resolution = 'y>399'> | ||
... | ... | ||
</layout_info> | </layout_info> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 486: | Line 486: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<globals> | <globals> | ||
... | ... | ||
</globals> | </globals> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 507: | Line 507: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<def var = 'WidgetSize' value = 'kBigWidgetSize' /> | <def var = 'WidgetSize' value = 'kBigWidgetSize' /> | ||
<def resolution = 'y>399' var = 'WidgetSize' value = 'kNormalWidgetSize' /> | <def resolution = 'y>399' var = 'WidgetSize' value = 'kNormalWidgetSize' /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 557: | Line 557: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<widget name = 'SmallButton' | <widget name = 'SmallButton' | ||
size = '128, 18' | size = '128, 18' | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 567: | Line 567: | ||
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''). | ||
< | <source lang="xml"> | ||
<dialog name = 'SampleDialog' overlays = 'screen'> | <dialog name = 'SampleDialog' overlays = 'screen'> | ||
<layout type = 'vertical' ...> | <layout type = 'vertical' ...> | ||
| Line 583: | Line 583: | ||
</layout> | </layout> | ||
</dialog> | </dialog> | ||
</ | </source> | ||
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 612: | Line 612: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<dialog name = 'Launcher' overlays = 'screen'> | <dialog name = 'Launcher' overlays = 'screen'> | ||
... | ... | ||
| Line 620: | Line 620: | ||
... | ... | ||
</dialog> | </dialog> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 683: | Line 683: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<layout type = 'vertical' center = 'true' padding = '23, 23, 8, 23'> | <layout type = 'vertical' center = 'true' padding = '23, 23, 8, 23'> | ||
... | ... | ||
</layout> | </layout> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 717: | Line 717: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<dialog name = 'GameOptions_Audio' overlays = 'Dialog.GlobalOptions.TabWidget'> | <dialog name = 'GameOptions_Audio' overlays = 'Dialog.GlobalOptions.TabWidget'> | ||
<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'> | <layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'> | ||
| Line 724: | Line 724: | ||
</layout> | </layout> | ||
</dialog> | </dialog> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 746: | Line 746: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<widget name = 'StartButton' type = 'Button'/> | <widget name = 'StartButton' type = 'Button'/> | ||
<space size = '16' /> | <space size = '16' /> | ||
<widget name = 'AddGameButton' type = 'Button' /> | <widget name = 'AddGameButton' type = 'Button' /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||
| Line 760: | Line 760: | ||
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. | ||
< | <source lang="xml"> | ||
<layout type = 'horizontal' ...> | <layout type = 'horizontal' ...> | ||
/** Add a button on the left */ | /** Add a button on the left */ | ||
| Line 773: | Line 773: | ||
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> | </layout> | ||
</ | </source> | ||
===== Properties ===== | ===== Properties ===== | ||
| Line 789: | Line 789: | ||
===== Example ===== | ===== Example ===== | ||
< | <source lang="xml"> | ||
<widget name = 'AddGameButton' | <widget name = 'AddGameButton' | ||
width = '95' | width = '95' | ||
| Line 797: | Line 797: | ||
type = 'Button' | type = 'Button' | ||
/> | /> | ||
</ | </source> | ||
===== Description ===== | ===== Description ===== | ||