Second Life Wiki - User contributions [en]

Skinning HowTo/Basics

2009-06-20T19:01:49Z

Fiddler Jones: /* Related to layout */

Skinning HowTo/XUI XML definition

2009-06-20T19:00:00Z

Fiddler Jones: Skinning HowTo/XUI XML definition moved to Skinning HowTo/XUI Widgets: Broke the page into parts. This is the largest remaining part.

#REDIRECT [[Skinning HowTo/XUI Widgets]]

Skinning HowTo/XUI Other Widgets

2009-06-20T19:00:00Z

Fiddler Jones: Skinning HowTo/XUI XML definition moved to Skinning HowTo/XUI Widgets: Broke the page into parts. This is the largest remaining part.

These are the XML elements and parameters used within the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files and what they do | XUI files]] in the '''\skins\default\xui''' folders. See [[Skinning HowTo/Basics]] for an explanation of how these are used.

Many widgets use the same XML parameters. Rather than repeating them for every widget, they are described separately in [[Skinning HowTo/Common XUI XML parameters]] and just listed under the elements that use them.

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== check_box parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== radio_style =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== control_name =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== halign =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== hidden =====
''Optional.''
===== max_length =====
''Optional.''

=== color_swatch parameters ===
----
Used by floater and panel.
===== border_color =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== can_apply_immediately =====
===== color =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== control_name =====
''Optional.''
===== enabled =====
''Optional.''

=== combo_box parameters ===
----
Used by floater, panel, and layout_panel.
Can contain combo_item.
===== allow_text_entry =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== length =====
''Optional.''
===== max_chars =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== visible =====
''Optional.''
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== tab_group =====
''Optional.''
===== control_name =====
''Optional.''
===== font =====
''Optional.''
===== initial_value =====
''Optional.''
===== halign =====
''Optional.''
===== max_length =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''

=== combo_item parameters ===
----
Used by combo_box.
===== name =====
===== value =====
''Optional.''
===== type =====
''Optional.''
===== length =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button parameters ===
----
Used by floater, panel, and layout_stack.
Can contain flyout_button_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== halign =====
''Optional.''
===== width =====
===== label =====
===== label_selected =====
''Optional.''
===== list_position =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
===== font =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button_item parameters ===
----
Used by flyout_button.
===== value =====
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

=== inventory_panel parameters ===
----
Used by floater, panel, and tab_container.
===== allow_multi_select =====
===== border =====
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== sort_order =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== joystick_turn parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== joystick_slide parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== line_editor parameters ===
----
Used by floater, panel, and layout_panel.
<line_editor> creates a single line text box
===== label =====
''Optional.''
===== max_length =====
''Optional.''
===== font =====
''Optional.''
===== bevel_style =====
''Optional.''
* none
* in
* out
* bright
* line
* texture
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== select_on_focus =====
''Optional.''
===== select_all_focus_received =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== cursor_color =====
''Optional.''
===== text_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== bg_writeable_color =====
''Optional.''
===== bg_focus_color =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== bottom_delta =====
''Optional.''
===== tool_tip =====
''Optional.''
===== left_delta =====
''Optional.''
===== tab_group =====
''Optional.''
===== commit_on_focus_lost =====
''Optional.''
===== hidden =====
''Optional.''
===== is_unicode =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
''Optional.''
===== min_val =====
''Optional.''
===== visible =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== prevalidate =====
''Optional.''
===== v_pad =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''

=== locate parameters ===
----
Used by panel.
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

=== multi_slider parameters ===
----
Used by panel.
===== allow_overlap =====
===== bottom =====
===== left =====
===== can_edit_text =====
===== control_name =====
===== decimal_digits =====
===== draw_track =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== label =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====
===== show_text =====
===== use_triangle =====
''Optional.''
===== value =====

=== name_editor parameters ===
----
Used by panel.
===== bevel_style =====
===== bg_readonly_color =====
''Optional.''
===== border_style =====
===== border_thickness =====
===== bottom =====
===== left_delta =====
===== follows =====
===== font =====
===== height =====
===== width =====
===== max_length =====
===== mouse_opaque =====
===== name =====
===== text_readonly_color =====
''Optional.''
===== enabled =====
''Optional.''
===== is_unicode =====
''Optional.''

=== name_list parameters ===
----
Used by floater and panel.
Can contain column.
===== allow_calling_card_drop =====
''Optional.''
===== background_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== column_padding =====
''Optional.''
===== draw_border =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== multi_select =====
===== name =====
===== name_column_index =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== tool_tip =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== background_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== pad parameters ===
----
Used by floater and panel.
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''

=== progress_bar parameters ===
----
Used by layout_panel.
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

=== radio_group parameters ===
----
Used by floater and panel.
Can contain radio_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== control_name =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== enabled =====
''Optional.''
===== visible =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''

=== radio_item parameters ===
----
Used by radio_group.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====

=== scroll_container parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====

=== scroll_list parameters ===
----
Used by floater, panel, layout_stack, and layout_panel.
Can contain column.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== can_resize =====
''Optional.''
===== column_padding =====
''Optional.''
===== column_widths =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
''Optional.''
===== multi_select =====
''Optional.''
===== name =====
===== search_column =====
''Optional.''
===== sort_column =====
''Optional.''
===== background_visible =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== enabled =====
''Optional.''
===== tab_group =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== font =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== allow_calling_card_drop =====
''Optional.''
===== tab_stop =====
''Optional.''
===== user_resize =====
''Optional.''
===== sort_ascending =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== search_editor parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''

=== slider parameters ===
----
Used by floater and panel.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== increment =====
===== initial_val =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== max_val =====
===== min_val =====
===== name =====
===== show_text =====
''Optional.''
===== control_name =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== value =====
''Optional.''
===== tool_tip =====
''Optional.''
===== volume =====
''Optional.''
===== edit_text =====
''Optional.''

=== slider_bar parameters ===
----
Used by panel.
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

=== spinner parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right_delta =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== halign =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
===== min_val =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== visible =====
''Optional.''
===== allow_text_entry =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== v_pad =====
''Optional.''

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

=== text parameters ===
----
Used by floater, panel, and layout_panel.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== v_pad =====
''Optional.''
===== valign =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== radio_style =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''
===== font_size =====
''Optional.''
===== font_style =====
''Optional.''
===== font-style =====
''Optional.''
===== bevel_style =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== is_unicode =====
''Optional.''
===== max_length =====
''Optional.''
===== hover =====
''Optional.''
===== hover_cursor =====
''Optional.''
===== hover_color =====
''Optional.''
===== text_color =====
''Optional.''
===== align =====
''Optional.''
===== text_wrap =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== allow_html =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== embedded_items =====
''Optional.''
===== hide_border =====
''Optional.''
===== hide_scrollbar =====
''Optional.''
===== line_spacing =====
''Optional.''
===== disabled_color =====
''Optional.''

=== text_editor parameters ===
----
Used by floater, panel, and layout_panel.
<text_editor> creates a multi-line text box
===== max_length =====
''Optional. ''
===== embedded_items =====
''Optional. ''
===== font =====
''Optional. ''
===== word_wrap =====
''Optional. ''
===== hide_scrollbar =====
''Optional. ''
===== cursor_color =====
''Optional. ''
===== text_color =====
''Optional. ''
===== text_readonly_color =====
''Optional. ''
===== bg_readonly_color =====
''Optional. ''
===== bg_writeable_color =====
''Optional. ''
===== bg_focus_color =====
''Optional. ''
===== bottom =====
''Optional. ''
===== bottom_delta =====
''Optional. ''
===== left =====
''Optional. ''
===== left_delta =====
''Optional. ''
===== right =====
''Optional. ''
===== top =====
''Optional. ''
===== follows =====
''Optional. ''
===== height =====
''Optional. ''
===== width =====
''Optional. ''
===== max_length =====
''Optional. ''
===== mouse_opaque =====
''Optional. ''
===== name =====
===== type =====
''Optional. ''
===== bevel_style =====
''Optional. ''
===== border_style =====
''Optional. ''
===== border_thickness =====
''Optional. ''
===== enabled =====
''Optional. ''
===== handle_edit_keys_directly =====
''Optional. ''
===== select_all_on_focus_received =====
''Optional. ''
===== select_on_focus =====
''Optional. ''
===== length =====
''Optional. ''
===== track_bottom =====
''Optional. ''
===== ignore_tab =====
''Optional. ''
===== border_drop_shadow_visible =====
''Optional. ''
===== border_visible =====
''Optional. ''
===== show_line_numbers =====
''Optional. ''
===== allow_html =====
''Optional. ''
===== hide_border =====
''Optional. ''
===== tab_stop =====
''Optional. ''
===== is_unicode =====
''Optional. ''
===== bg_visible =====
''Optional. ''
===== drop_shadow_visible =====
''Optional. ''
===== h_pad =====
''Optional. ''
===== v_pad =====
''Optional. ''
===== halign =====
''Optional. ''
===== background_visible =====
''Optional. ''
===== text_wrap =====
''Optional. ''

=== texture_picker parameters ===
----
Used by floater and panel.
===== allow_no_texture =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== can_apply_immediately =====
''Optional.''
===== default_image_name =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''

=== view_border parameters ===
----
Used by panel.
===== bevel_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== blevel_style =====
''Optional.''
===== border =====
''Optional.''

=== volume_slider parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== name =====
===== mouse_opaque =====
''Optional.''
===== hidden =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''
===== control_name =====
''Optional.''

=== web_browser parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== font =====
''Optional.''
===== name =====
===== border_visible =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== caret_color =====
''Optional.''
===== start_url =====
''Optional.''
===== embedded_items =====
''Optional.''
===== max_length =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== word_wrap =====
''Optional.''
===== ignore_ui_scale =====
''Optional.''

Skinning HowTo/XUI Other Widgets

2009-06-20T18:58:12Z

Fiddler Jones:

Skinning HowTo/XUI Other Widgets

2009-06-20T18:56:32Z

Fiddler Jones: /* Common parameters */ Moved to new page: Skinning HowTo/Common XUI XML parameters

These are the XML elements and parameters used within the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files and what they do | XUI files]] in the '''\skins\default\xui''' folders. See [[Skinning HowTo/Basics]] for an explanation of how these are used.

Many widgets use the same XML parameters. Rather than repeating them for every widget, they are described separately in [[Skinning HowTo/Common XUI XML parameters]] and just listed under the elements that use them.

== Common parameters ==

== XUI Text Parameters ==

== XUI Containers Parameters ==

== XUI Menus Parameters ==

== XUI Widgets Parameters ==

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== check_box parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== radio_style =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== control_name =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== halign =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== hidden =====
''Optional.''
===== max_length =====
''Optional.''

=== color_swatch parameters ===
----
Used by floater and panel.
===== border_color =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== can_apply_immediately =====
===== color =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== control_name =====
''Optional.''
===== enabled =====
''Optional.''

=== combo_box parameters ===
----
Used by floater, panel, and layout_panel.
Can contain combo_item.
===== allow_text_entry =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== length =====
''Optional.''
===== max_chars =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== visible =====
''Optional.''
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== tab_group =====
''Optional.''
===== control_name =====
''Optional.''
===== font =====
''Optional.''
===== initial_value =====
''Optional.''
===== halign =====
''Optional.''
===== max_length =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''

=== combo_item parameters ===
----
Used by combo_box.
===== name =====
===== value =====
''Optional.''
===== type =====
''Optional.''
===== length =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button parameters ===
----
Used by floater, panel, and layout_stack.
Can contain flyout_button_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== halign =====
''Optional.''
===== width =====
===== label =====
===== label_selected =====
''Optional.''
===== list_position =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
===== font =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button_item parameters ===
----
Used by flyout_button.
===== value =====
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

=== inventory_panel parameters ===
----
Used by floater, panel, and tab_container.
===== allow_multi_select =====
===== border =====
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== sort_order =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== joystick_turn parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== joystick_slide parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== line_editor parameters ===
----
Used by floater, panel, and layout_panel.
<line_editor> creates a single line text box
===== label =====
''Optional.''
===== max_length =====
''Optional.''
===== font =====
''Optional.''
===== bevel_style =====
''Optional.''
* none
* in
* out
* bright
* line
* texture
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== select_on_focus =====
''Optional.''
===== select_all_focus_received =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== cursor_color =====
''Optional.''
===== text_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== bg_writeable_color =====
''Optional.''
===== bg_focus_color =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== bottom_delta =====
''Optional.''
===== tool_tip =====
''Optional.''
===== left_delta =====
''Optional.''
===== tab_group =====
''Optional.''
===== commit_on_focus_lost =====
''Optional.''
===== hidden =====
''Optional.''
===== is_unicode =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
''Optional.''
===== min_val =====
''Optional.''
===== visible =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== prevalidate =====
''Optional.''
===== v_pad =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''

=== locate parameters ===
----
Used by panel.
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

=== multi_slider parameters ===
----
Used by panel.
===== allow_overlap =====
===== bottom =====
===== left =====
===== can_edit_text =====
===== control_name =====
===== decimal_digits =====
===== draw_track =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== label =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====
===== show_text =====
===== use_triangle =====
''Optional.''
===== value =====

=== name_editor parameters ===
----
Used by panel.
===== bevel_style =====
===== bg_readonly_color =====
''Optional.''
===== border_style =====
===== border_thickness =====
===== bottom =====
===== left_delta =====
===== follows =====
===== font =====
===== height =====
===== width =====
===== max_length =====
===== mouse_opaque =====
===== name =====
===== text_readonly_color =====
''Optional.''
===== enabled =====
''Optional.''
===== is_unicode =====
''Optional.''

=== name_list parameters ===
----
Used by floater and panel.
Can contain column.
===== allow_calling_card_drop =====
''Optional.''
===== background_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== column_padding =====
''Optional.''
===== draw_border =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== multi_select =====
===== name =====
===== name_column_index =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== tool_tip =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== background_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== pad parameters ===
----
Used by floater and panel.
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''

=== progress_bar parameters ===
----
Used by layout_panel.
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

=== radio_group parameters ===
----
Used by floater and panel.
Can contain radio_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== control_name =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== enabled =====
''Optional.''
===== visible =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''

=== radio_item parameters ===
----
Used by radio_group.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====

=== scroll_container parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====

=== scroll_list parameters ===
----
Used by floater, panel, layout_stack, and layout_panel.
Can contain column.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== can_resize =====
''Optional.''
===== column_padding =====
''Optional.''
===== column_widths =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
''Optional.''
===== multi_select =====
''Optional.''
===== name =====
===== search_column =====
''Optional.''
===== sort_column =====
''Optional.''
===== background_visible =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== enabled =====
''Optional.''
===== tab_group =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== font =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== allow_calling_card_drop =====
''Optional.''
===== tab_stop =====
''Optional.''
===== user_resize =====
''Optional.''
===== sort_ascending =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== search_editor parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''

=== slider parameters ===
----
Used by floater and panel.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== increment =====
===== initial_val =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== max_val =====
===== min_val =====
===== name =====
===== show_text =====
''Optional.''
===== control_name =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== value =====
''Optional.''
===== tool_tip =====
''Optional.''
===== volume =====
''Optional.''
===== edit_text =====
''Optional.''

=== slider_bar parameters ===
----
Used by panel.
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

=== spinner parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right_delta =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== halign =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
===== min_val =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== visible =====
''Optional.''
===== allow_text_entry =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== v_pad =====
''Optional.''

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

=== text parameters ===
----
Used by floater, panel, and layout_panel.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== v_pad =====
''Optional.''
===== valign =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== radio_style =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''
===== font_size =====
''Optional.''
===== font_style =====
''Optional.''
===== font-style =====
''Optional.''
===== bevel_style =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== is_unicode =====
''Optional.''
===== max_length =====
''Optional.''
===== hover =====
''Optional.''
===== hover_cursor =====
''Optional.''
===== hover_color =====
''Optional.''
===== text_color =====
''Optional.''
===== align =====
''Optional.''
===== text_wrap =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== allow_html =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== embedded_items =====
''Optional.''
===== hide_border =====
''Optional.''
===== hide_scrollbar =====
''Optional.''
===== line_spacing =====
''Optional.''
===== disabled_color =====
''Optional.''

=== text_editor parameters ===
----
Used by floater, panel, and layout_panel.
<text_editor> creates a multi-line text box
===== max_length =====
''Optional. ''
===== embedded_items =====
''Optional. ''
===== font =====
''Optional. ''
===== word_wrap =====
''Optional. ''
===== hide_scrollbar =====
''Optional. ''
===== cursor_color =====
''Optional. ''
===== text_color =====
''Optional. ''
===== text_readonly_color =====
''Optional. ''
===== bg_readonly_color =====
''Optional. ''
===== bg_writeable_color =====
''Optional. ''
===== bg_focus_color =====
''Optional. ''
===== bottom =====
''Optional. ''
===== bottom_delta =====
''Optional. ''
===== left =====
''Optional. ''
===== left_delta =====
''Optional. ''
===== right =====
''Optional. ''
===== top =====
''Optional. ''
===== follows =====
''Optional. ''
===== height =====
''Optional. ''
===== width =====
''Optional. ''
===== max_length =====
''Optional. ''
===== mouse_opaque =====
''Optional. ''
===== name =====
===== type =====
''Optional. ''
===== bevel_style =====
''Optional. ''
===== border_style =====
''Optional. ''
===== border_thickness =====
''Optional. ''
===== enabled =====
''Optional. ''
===== handle_edit_keys_directly =====
''Optional. ''
===== select_all_on_focus_received =====
''Optional. ''
===== select_on_focus =====
''Optional. ''
===== length =====
''Optional. ''
===== track_bottom =====
''Optional. ''
===== ignore_tab =====
''Optional. ''
===== border_drop_shadow_visible =====
''Optional. ''
===== border_visible =====
''Optional. ''
===== show_line_numbers =====
''Optional. ''
===== allow_html =====
''Optional. ''
===== hide_border =====
''Optional. ''
===== tab_stop =====
''Optional. ''
===== is_unicode =====
''Optional. ''
===== bg_visible =====
''Optional. ''
===== drop_shadow_visible =====
''Optional. ''
===== h_pad =====
''Optional. ''
===== v_pad =====
''Optional. ''
===== halign =====
''Optional. ''
===== background_visible =====
''Optional. ''
===== text_wrap =====
''Optional. ''

=== texture_picker parameters ===
----
Used by floater and panel.
===== allow_no_texture =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== can_apply_immediately =====
''Optional.''
===== default_image_name =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''

=== view_border parameters ===
----
Used by panel.
===== bevel_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== blevel_style =====
''Optional.''
===== border =====
''Optional.''

=== volume_slider parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== name =====
===== mouse_opaque =====
''Optional.''
===== hidden =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''
===== control_name =====
''Optional.''

=== web_browser parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== font =====
''Optional.''
===== name =====
===== border_visible =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== caret_color =====
''Optional.''
===== start_url =====
''Optional.''
===== embedded_items =====
''Optional.''
===== max_length =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== word_wrap =====
''Optional.''
===== ignore_ui_scale =====
''Optional.''

Skinning HowTo/Common XUI attributes

2009-06-20T18:54:25Z

Fiddler Jones: New page: This pages describes some of the most frequently used XML attributes. The XUI elements that use them can be found at: *Skinning HowTo/XUI Containers *Skinning HowTo/XUI Menus *[[S...

This pages describes some of the most frequently used XML attributes. The XUI elements that use them can be found at:
*[[Skinning HowTo/XUI Containers]]
*[[Skinning HowTo/XUI Menus]]
*[[Skinning HowTo/XUI Widgets]]
When these parameters appear there, they are just listed under the elements that use them.

===== name =====
''Required.'' The XML name of this element. The name must be unique to the floater you are editing.

* IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.

String: <code>name="input_first_name"</code>
===== width =====
''Required.'' The width of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

* Tip: See the bounding boxes of all XML elements in the viewer: ''Advanced'' menu > UI > Debug Views.

Integer: <code>width="140"</code>
===== height =====
''Required.'' The height of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

Integer: <code>height="24"</code>
===== left =====
''Optional.'' Sets the position in the x dimension of the ''element's'' left edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container.

Integer: <code> left="6"</code>

===== right =====
''Optional.'' Sets the position in the x dimension of the ''element's'' right edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container. Best used to align something to the right.
* For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the <code>right</code> to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.

Integer: <code> right="6"</code>

===== left_delta =====
''Optional. (use instead of <code>left</code>)'' Sets the position in the x dimension of the element's left edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>left_delta</code> to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.

Integer: <code> left_delta="-106"</code>

===== right_delta =====
''Optional. (use instead of <code>right</code>)'' Sets the position in the x dimension of the element's right edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to right-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>right_delta</code> to 106, putting the left edge of Button B 106 pixels to the left of Button A.

Integer: <code> left_delta="106"</code>

===== bottom =====
''Optional.'' Sets the position in the y dimension of the element's bottom edge relative to the container. Positive and negative values are accepted. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the <code>bottom</code> to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.

Integer: <code> bottom="(NEED TO DO MATH, LOL)"</code>

===== bottom_delta =====

===== follows =====
''Optional.'' Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.

Values: left, top, right, bottom. String multiple values together using pipes.

The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: <code>follows="left|top"</code>

===== font =====
''Optional.'' Sets which size and style of the application font to use. The default is SansSerifSmall for <code>text</code> elements and SansSerif for controls (such as <code>check_box</code> and <code>button</code>.

Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace

String: <code>font="SansSerifSmall"</code>

===== mouse_opaque =====
===== enabled =====
===== label =====
===== tool_tip =====
===== visible =====
===== control_name =====
===== tab_group =====
===== border =====
===== top =====

Skinning HowTo/XUI Other Widgets

2009-06-20T18:48:41Z

Fiddler Jones:

These are the XML elements and parameters used within the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files and what they do | XUI files]] in the '''\skins\default\xui''' folders. See [[Skinning HowTo/Basics]] for an explanation of how these are used.

Many widgets use the same XML parameters. Rather than repeating them for every widget, they are described separately in [[Skinning HowTo/Common XUI XML parameters]] and just listed under the elements that use them.

== Common parameters ==

The most common parameters are described here and are just listed under the elements that use them.

===== name =====
''Required.'' The XML name of this element. The name must be unique to the floater you are editing.

* IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.

String: <code>name="input_first_name"</code>
===== width =====
''Required.'' The width of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

* Tip: See the bounding boxes of all XML elements in the viewer: ''Advanced'' menu > UI > Debug Views.

Integer: <code>width="140"</code>
===== height =====
''Required.'' The height of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

Integer: <code>height="24"</code>
===== left =====
''Optional.'' Sets the position in the x dimension of the ''element's'' left edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container.

Integer: <code> left="6"</code>

===== right =====
''Optional.'' Sets the position in the x dimension of the ''element's'' right edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container. Best used to align something to the right.
* For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the <code>right</code> to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.

Integer: <code> right="6"</code>

===== left_delta =====
''Optional. (use instead of <code>left</code>)'' Sets the position in the x dimension of the element's left edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>left_delta</code> to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.

Integer: <code> left_delta="-106"</code>

===== right_delta =====
''Optional. (use instead of <code>right</code>)'' Sets the position in the x dimension of the element's right edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to right-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>right_delta</code> to 106, putting the left edge of Button B 106 pixels to the left of Button A.

Integer: <code> left_delta="106"</code>

===== bottom =====
''Optional.'' Sets the position in the y dimension of the element's bottom edge relative to the container. Positive and negative values are accepted. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the <code>bottom</code> to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.

Integer: <code> bottom="(NEED TO DO MATH, LOL)"</code>

===== bottom_delta =====

===== follows =====
''Optional.'' Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.

Values: left, top, right, bottom. String multiple values together using pipes.

The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: <code>follows="left|top"</code>

===== font =====
''Optional.'' Sets which size and style of the application font to use. The default is SansSerifSmall for <code>text</code> elements and SansSerif for controls (such as <code>check_box</code> and <code>button</code>.

Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace

String: <code>font="SansSerifSmall"</code>

===== mouse_opaque =====
===== enabled =====
===== label =====
===== tool_tip =====
===== visible =====
===== control_name =====
===== tab_group =====
===== border =====
===== top =====

== XUI Text Parameters ==

== XUI Containers Parameters ==

== XUI Menus Parameters ==

== XUI Widgets Parameters ==

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== check_box parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== radio_style =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== control_name =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== halign =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== hidden =====
''Optional.''
===== max_length =====
''Optional.''

=== color_swatch parameters ===
----
Used by floater and panel.
===== border_color =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== can_apply_immediately =====
===== color =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== control_name =====
''Optional.''
===== enabled =====
''Optional.''

=== combo_box parameters ===
----
Used by floater, panel, and layout_panel.
Can contain combo_item.
===== allow_text_entry =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== length =====
''Optional.''
===== max_chars =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== visible =====
''Optional.''
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== tab_group =====
''Optional.''
===== control_name =====
''Optional.''
===== font =====
''Optional.''
===== initial_value =====
''Optional.''
===== halign =====
''Optional.''
===== max_length =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''

=== combo_item parameters ===
----
Used by combo_box.
===== name =====
===== value =====
''Optional.''
===== type =====
''Optional.''
===== length =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button parameters ===
----
Used by floater, panel, and layout_stack.
Can contain flyout_button_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== halign =====
''Optional.''
===== width =====
===== label =====
===== label_selected =====
''Optional.''
===== list_position =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
===== font =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button_item parameters ===
----
Used by flyout_button.
===== value =====
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

=== inventory_panel parameters ===
----
Used by floater, panel, and tab_container.
===== allow_multi_select =====
===== border =====
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== sort_order =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== joystick_turn parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== joystick_slide parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== line_editor parameters ===
----
Used by floater, panel, and layout_panel.
<line_editor> creates a single line text box
===== label =====
''Optional.''
===== max_length =====
''Optional.''
===== font =====
''Optional.''
===== bevel_style =====
''Optional.''
* none
* in
* out
* bright
* line
* texture
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== select_on_focus =====
''Optional.''
===== select_all_focus_received =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== cursor_color =====
''Optional.''
===== text_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== bg_writeable_color =====
''Optional.''
===== bg_focus_color =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== bottom_delta =====
''Optional.''
===== tool_tip =====
''Optional.''
===== left_delta =====
''Optional.''
===== tab_group =====
''Optional.''
===== commit_on_focus_lost =====
''Optional.''
===== hidden =====
''Optional.''
===== is_unicode =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
''Optional.''
===== min_val =====
''Optional.''
===== visible =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== prevalidate =====
''Optional.''
===== v_pad =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''

=== locate parameters ===
----
Used by panel.
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

=== multi_slider parameters ===
----
Used by panel.
===== allow_overlap =====
===== bottom =====
===== left =====
===== can_edit_text =====
===== control_name =====
===== decimal_digits =====
===== draw_track =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== label =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====
===== show_text =====
===== use_triangle =====
''Optional.''
===== value =====

=== name_editor parameters ===
----
Used by panel.
===== bevel_style =====
===== bg_readonly_color =====
''Optional.''
===== border_style =====
===== border_thickness =====
===== bottom =====
===== left_delta =====
===== follows =====
===== font =====
===== height =====
===== width =====
===== max_length =====
===== mouse_opaque =====
===== name =====
===== text_readonly_color =====
''Optional.''
===== enabled =====
''Optional.''
===== is_unicode =====
''Optional.''

=== name_list parameters ===
----
Used by floater and panel.
Can contain column.
===== allow_calling_card_drop =====
''Optional.''
===== background_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== column_padding =====
''Optional.''
===== draw_border =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== multi_select =====
===== name =====
===== name_column_index =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== tool_tip =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== background_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== pad parameters ===
----
Used by floater and panel.
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''

=== progress_bar parameters ===
----
Used by layout_panel.
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

=== radio_group parameters ===
----
Used by floater and panel.
Can contain radio_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== control_name =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== enabled =====
''Optional.''
===== visible =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''

=== radio_item parameters ===
----
Used by radio_group.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====

=== scroll_container parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====

=== scroll_list parameters ===
----
Used by floater, panel, layout_stack, and layout_panel.
Can contain column.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== can_resize =====
''Optional.''
===== column_padding =====
''Optional.''
===== column_widths =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
''Optional.''
===== multi_select =====
''Optional.''
===== name =====
===== search_column =====
''Optional.''
===== sort_column =====
''Optional.''
===== background_visible =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== enabled =====
''Optional.''
===== tab_group =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== font =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== allow_calling_card_drop =====
''Optional.''
===== tab_stop =====
''Optional.''
===== user_resize =====
''Optional.''
===== sort_ascending =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== search_editor parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''

=== slider parameters ===
----
Used by floater and panel.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== increment =====
===== initial_val =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== max_val =====
===== min_val =====
===== name =====
===== show_text =====
''Optional.''
===== control_name =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== value =====
''Optional.''
===== tool_tip =====
''Optional.''
===== volume =====
''Optional.''
===== edit_text =====
''Optional.''

=== slider_bar parameters ===
----
Used by panel.
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

=== spinner parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right_delta =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== halign =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
===== min_val =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== visible =====
''Optional.''
===== allow_text_entry =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== v_pad =====
''Optional.''

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

=== text parameters ===
----
Used by floater, panel, and layout_panel.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== v_pad =====
''Optional.''
===== valign =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== radio_style =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''
===== font_size =====
''Optional.''
===== font_style =====
''Optional.''
===== font-style =====
''Optional.''
===== bevel_style =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== is_unicode =====
''Optional.''
===== max_length =====
''Optional.''
===== hover =====
''Optional.''
===== hover_cursor =====
''Optional.''
===== hover_color =====
''Optional.''
===== text_color =====
''Optional.''
===== align =====
''Optional.''
===== text_wrap =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== allow_html =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== embedded_items =====
''Optional.''
===== hide_border =====
''Optional.''
===== hide_scrollbar =====
''Optional.''
===== line_spacing =====
''Optional.''
===== disabled_color =====
''Optional.''

=== text_editor parameters ===
----
Used by floater, panel, and layout_panel.
<text_editor> creates a multi-line text box
===== max_length =====
''Optional. ''
===== embedded_items =====
''Optional. ''
===== font =====
''Optional. ''
===== word_wrap =====
''Optional. ''
===== hide_scrollbar =====
''Optional. ''
===== cursor_color =====
''Optional. ''
===== text_color =====
''Optional. ''
===== text_readonly_color =====
''Optional. ''
===== bg_readonly_color =====
''Optional. ''
===== bg_writeable_color =====
''Optional. ''
===== bg_focus_color =====
''Optional. ''
===== bottom =====
''Optional. ''
===== bottom_delta =====
''Optional. ''
===== left =====
''Optional. ''
===== left_delta =====
''Optional. ''
===== right =====
''Optional. ''
===== top =====
''Optional. ''
===== follows =====
''Optional. ''
===== height =====
''Optional. ''
===== width =====
''Optional. ''
===== max_length =====
''Optional. ''
===== mouse_opaque =====
''Optional. ''
===== name =====
===== type =====
''Optional. ''
===== bevel_style =====
''Optional. ''
===== border_style =====
''Optional. ''
===== border_thickness =====
''Optional. ''
===== enabled =====
''Optional. ''
===== handle_edit_keys_directly =====
''Optional. ''
===== select_all_on_focus_received =====
''Optional. ''
===== select_on_focus =====
''Optional. ''
===== length =====
''Optional. ''
===== track_bottom =====
''Optional. ''
===== ignore_tab =====
''Optional. ''
===== border_drop_shadow_visible =====
''Optional. ''
===== border_visible =====
''Optional. ''
===== show_line_numbers =====
''Optional. ''
===== allow_html =====
''Optional. ''
===== hide_border =====
''Optional. ''
===== tab_stop =====
''Optional. ''
===== is_unicode =====
''Optional. ''
===== bg_visible =====
''Optional. ''
===== drop_shadow_visible =====
''Optional. ''
===== h_pad =====
''Optional. ''
===== v_pad =====
''Optional. ''
===== halign =====
''Optional. ''
===== background_visible =====
''Optional. ''
===== text_wrap =====
''Optional. ''

=== texture_picker parameters ===
----
Used by floater and panel.
===== allow_no_texture =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== can_apply_immediately =====
''Optional.''
===== default_image_name =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''

=== view_border parameters ===
----
Used by panel.
===== bevel_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== blevel_style =====
''Optional.''
===== border =====
''Optional.''

=== volume_slider parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== name =====
===== mouse_opaque =====
''Optional.''
===== hidden =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''
===== control_name =====
''Optional.''

=== web_browser parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== font =====
''Optional.''
===== name =====
===== border_visible =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== caret_color =====
''Optional.''
===== start_url =====
''Optional.''
===== embedded_items =====
''Optional.''
===== max_length =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== word_wrap =====
''Optional.''
===== ignore_ui_scale =====
''Optional.''

Skinning HowTo/XUI Other Widgets

2009-06-20T18:40:59Z

Fiddler Jones: /* XUI Menus Parameters */ Moved to new page: Skinning HowTo/XUI Menus

These are the XML elements and parameters used to define the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files and what they do | XUI files]] in the '''\skins\default\xui''' folders. See [[Skinning HowTo/Basics]] for an explanation of how these are used.

== Common parameters ==

The most common parameters are described here and are just listed under the elements that use them.

===== name =====
''Required.'' The XML name of this element. The name must be unique to the floater you are editing.

* IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.

String: <code>name="input_first_name"</code>
===== width =====
''Required.'' The width of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

* Tip: See the bounding boxes of all XML elements in the viewer: ''Advanced'' menu > UI > Debug Views.

Integer: <code>width="140"</code>
===== height =====
''Required.'' The height of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

Integer: <code>height="24"</code>
===== left =====
''Optional.'' Sets the position in the x dimension of the ''element's'' left edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container.

Integer: <code> left="6"</code>

===== right =====
''Optional.'' Sets the position in the x dimension of the ''element's'' right edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container. Best used to align something to the right.
* For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the <code>right</code> to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.

Integer: <code> right="6"</code>

===== left_delta =====
''Optional. (use instead of <code>left</code>)'' Sets the position in the x dimension of the element's left edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>left_delta</code> to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.

Integer: <code> left_delta="-106"</code>

===== right_delta =====
''Optional. (use instead of <code>right</code>)'' Sets the position in the x dimension of the element's right edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to right-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>right_delta</code> to 106, putting the left edge of Button B 106 pixels to the left of Button A.

Integer: <code> left_delta="106"</code>

===== bottom =====
''Optional.'' Sets the position in the y dimension of the element's bottom edge relative to the container. Positive and negative values are accepted. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the <code>bottom</code> to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.

Integer: <code> bottom="(NEED TO DO MATH, LOL)"</code>

===== bottom_delta =====

===== follows =====
''Optional.'' Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.

Values: left, top, right, bottom. String multiple values together using pipes.

The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: <code>follows="left|top"</code>

===== font =====
''Optional.'' Sets which size and style of the application font to use. The default is SansSerifSmall for <code>text</code> elements and SansSerif for controls (such as <code>check_box</code> and <code>button</code>.

Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace

String: <code>font="SansSerifSmall"</code>

===== mouse_opaque =====
===== enabled =====
===== label =====
===== tool_tip =====
===== visible =====
===== control_name =====
===== tab_group =====
===== border =====
===== top =====

== XUI Text Parameters ==

== XUI Containers Parameters ==

== XUI Menus Parameters ==

== XUI Widgets Parameters ==

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== check_box parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== radio_style =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== control_name =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== halign =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== hidden =====
''Optional.''
===== max_length =====
''Optional.''

=== color_swatch parameters ===
----
Used by floater and panel.
===== border_color =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== can_apply_immediately =====
===== color =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== control_name =====
''Optional.''
===== enabled =====
''Optional.''

=== combo_box parameters ===
----
Used by floater, panel, and layout_panel.
Can contain combo_item.
===== allow_text_entry =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== length =====
''Optional.''
===== max_chars =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== visible =====
''Optional.''
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== tab_group =====
''Optional.''
===== control_name =====
''Optional.''
===== font =====
''Optional.''
===== initial_value =====
''Optional.''
===== halign =====
''Optional.''
===== max_length =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''

=== combo_item parameters ===
----
Used by combo_box.
===== name =====
===== value =====
''Optional.''
===== type =====
''Optional.''
===== length =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button parameters ===
----
Used by floater, panel, and layout_stack.
Can contain flyout_button_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== halign =====
''Optional.''
===== width =====
===== label =====
===== label_selected =====
''Optional.''
===== list_position =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
===== font =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button_item parameters ===
----
Used by flyout_button.
===== value =====
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

=== inventory_panel parameters ===
----
Used by floater, panel, and tab_container.
===== allow_multi_select =====
===== border =====
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== sort_order =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== joystick_turn parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== joystick_slide parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== line_editor parameters ===
----
Used by floater, panel, and layout_panel.
<line_editor> creates a single line text box
===== label =====
''Optional.''
===== max_length =====
''Optional.''
===== font =====
''Optional.''
===== bevel_style =====
''Optional.''
* none
* in
* out
* bright
* line
* texture
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== select_on_focus =====
''Optional.''
===== select_all_focus_received =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== cursor_color =====
''Optional.''
===== text_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== bg_writeable_color =====
''Optional.''
===== bg_focus_color =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== bottom_delta =====
''Optional.''
===== tool_tip =====
''Optional.''
===== left_delta =====
''Optional.''
===== tab_group =====
''Optional.''
===== commit_on_focus_lost =====
''Optional.''
===== hidden =====
''Optional.''
===== is_unicode =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
''Optional.''
===== min_val =====
''Optional.''
===== visible =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== prevalidate =====
''Optional.''
===== v_pad =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''

=== locate parameters ===
----
Used by panel.
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

=== multi_slider parameters ===
----
Used by panel.
===== allow_overlap =====
===== bottom =====
===== left =====
===== can_edit_text =====
===== control_name =====
===== decimal_digits =====
===== draw_track =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== label =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====
===== show_text =====
===== use_triangle =====
''Optional.''
===== value =====

=== name_editor parameters ===
----
Used by panel.
===== bevel_style =====
===== bg_readonly_color =====
''Optional.''
===== border_style =====
===== border_thickness =====
===== bottom =====
===== left_delta =====
===== follows =====
===== font =====
===== height =====
===== width =====
===== max_length =====
===== mouse_opaque =====
===== name =====
===== text_readonly_color =====
''Optional.''
===== enabled =====
''Optional.''
===== is_unicode =====
''Optional.''

=== name_list parameters ===
----
Used by floater and panel.
Can contain column.
===== allow_calling_card_drop =====
''Optional.''
===== background_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== column_padding =====
''Optional.''
===== draw_border =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== multi_select =====
===== name =====
===== name_column_index =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== tool_tip =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== background_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== pad parameters ===
----
Used by floater and panel.
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''

=== progress_bar parameters ===
----
Used by layout_panel.
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

=== radio_group parameters ===
----
Used by floater and panel.
Can contain radio_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== control_name =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== enabled =====
''Optional.''
===== visible =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''

=== radio_item parameters ===
----
Used by radio_group.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====

=== scroll_container parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====

=== scroll_list parameters ===
----
Used by floater, panel, layout_stack, and layout_panel.
Can contain column.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== can_resize =====
''Optional.''
===== column_padding =====
''Optional.''
===== column_widths =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
''Optional.''
===== multi_select =====
''Optional.''
===== name =====
===== search_column =====
''Optional.''
===== sort_column =====
''Optional.''
===== background_visible =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== enabled =====
''Optional.''
===== tab_group =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== font =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== allow_calling_card_drop =====
''Optional.''
===== tab_stop =====
''Optional.''
===== user_resize =====
''Optional.''
===== sort_ascending =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== search_editor parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''

=== slider parameters ===
----
Used by floater and panel.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== increment =====
===== initial_val =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== max_val =====
===== min_val =====
===== name =====
===== show_text =====
''Optional.''
===== control_name =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== value =====
''Optional.''
===== tool_tip =====
''Optional.''
===== volume =====
''Optional.''
===== edit_text =====
''Optional.''

=== slider_bar parameters ===
----
Used by panel.
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

=== spinner parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right_delta =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== halign =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
===== min_val =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== visible =====
''Optional.''
===== allow_text_entry =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== v_pad =====
''Optional.''

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

=== text parameters ===
----
Used by floater, panel, and layout_panel.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== v_pad =====
''Optional.''
===== valign =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== radio_style =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''
===== font_size =====
''Optional.''
===== font_style =====
''Optional.''
===== font-style =====
''Optional.''
===== bevel_style =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== is_unicode =====
''Optional.''
===== max_length =====
''Optional.''
===== hover =====
''Optional.''
===== hover_cursor =====
''Optional.''
===== hover_color =====
''Optional.''
===== text_color =====
''Optional.''
===== align =====
''Optional.''
===== text_wrap =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== allow_html =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== embedded_items =====
''Optional.''
===== hide_border =====
''Optional.''
===== hide_scrollbar =====
''Optional.''
===== line_spacing =====
''Optional.''
===== disabled_color =====
''Optional.''

=== text_editor parameters ===
----
Used by floater, panel, and layout_panel.
<text_editor> creates a multi-line text box
===== max_length =====
''Optional. ''
===== embedded_items =====
''Optional. ''
===== font =====
''Optional. ''
===== word_wrap =====
''Optional. ''
===== hide_scrollbar =====
''Optional. ''
===== cursor_color =====
''Optional. ''
===== text_color =====
''Optional. ''
===== text_readonly_color =====
''Optional. ''
===== bg_readonly_color =====
''Optional. ''
===== bg_writeable_color =====
''Optional. ''
===== bg_focus_color =====
''Optional. ''
===== bottom =====
''Optional. ''
===== bottom_delta =====
''Optional. ''
===== left =====
''Optional. ''
===== left_delta =====
''Optional. ''
===== right =====
''Optional. ''
===== top =====
''Optional. ''
===== follows =====
''Optional. ''
===== height =====
''Optional. ''
===== width =====
''Optional. ''
===== max_length =====
''Optional. ''
===== mouse_opaque =====
''Optional. ''
===== name =====
===== type =====
''Optional. ''
===== bevel_style =====
''Optional. ''
===== border_style =====
''Optional. ''
===== border_thickness =====
''Optional. ''
===== enabled =====
''Optional. ''
===== handle_edit_keys_directly =====
''Optional. ''
===== select_all_on_focus_received =====
''Optional. ''
===== select_on_focus =====
''Optional. ''
===== length =====
''Optional. ''
===== track_bottom =====
''Optional. ''
===== ignore_tab =====
''Optional. ''
===== border_drop_shadow_visible =====
''Optional. ''
===== border_visible =====
''Optional. ''
===== show_line_numbers =====
''Optional. ''
===== allow_html =====
''Optional. ''
===== hide_border =====
''Optional. ''
===== tab_stop =====
''Optional. ''
===== is_unicode =====
''Optional. ''
===== bg_visible =====
''Optional. ''
===== drop_shadow_visible =====
''Optional. ''
===== h_pad =====
''Optional. ''
===== v_pad =====
''Optional. ''
===== halign =====
''Optional. ''
===== background_visible =====
''Optional. ''
===== text_wrap =====
''Optional. ''

=== texture_picker parameters ===
----
Used by floater and panel.
===== allow_no_texture =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== can_apply_immediately =====
''Optional.''
===== default_image_name =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''

=== view_border parameters ===
----
Used by panel.
===== bevel_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== blevel_style =====
''Optional.''
===== border =====
''Optional.''

=== volume_slider parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== name =====
===== mouse_opaque =====
''Optional.''
===== hidden =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''
===== control_name =====
''Optional.''

=== web_browser parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== font =====
''Optional.''
===== name =====
===== border_visible =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== caret_color =====
''Optional.''
===== start_url =====
''Optional.''
===== embedded_items =====
''Optional.''
===== max_length =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== word_wrap =====
''Optional.''
===== ignore_ui_scale =====
''Optional.''

Skinning HowTo/XUI Other Widgets

2009-06-20T18:39:44Z

Fiddler Jones: /* XUI Containers Parameters */ Moved to new page: Skinning HowTo/XUI Containers

These are the XML elements and parameters used to define the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files and what they do | XUI files]] in the '''\skins\default\xui''' folders. See [[Skinning HowTo/Basics]] for an explanation of how these are used.

== Common parameters ==

The most common parameters are described here and are just listed under the elements that use them.

===== name =====
''Required.'' The XML name of this element. The name must be unique to the floater you are editing.

* IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.

String: <code>name="input_first_name"</code>
===== width =====
''Required.'' The width of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

* Tip: See the bounding boxes of all XML elements in the viewer: ''Advanced'' menu > UI > Debug Views.

Integer: <code>width="140"</code>
===== height =====
''Required.'' The height of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

Integer: <code>height="24"</code>
===== left =====
''Optional.'' Sets the position in the x dimension of the ''element's'' left edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container.

Integer: <code> left="6"</code>

===== right =====
''Optional.'' Sets the position in the x dimension of the ''element's'' right edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container. Best used to align something to the right.
* For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the <code>right</code> to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.

Integer: <code> right="6"</code>

===== left_delta =====
''Optional. (use instead of <code>left</code>)'' Sets the position in the x dimension of the element's left edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>left_delta</code> to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.

Integer: <code> left_delta="-106"</code>

===== right_delta =====
''Optional. (use instead of <code>right</code>)'' Sets the position in the x dimension of the element's right edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to right-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>right_delta</code> to 106, putting the left edge of Button B 106 pixels to the left of Button A.

Integer: <code> left_delta="106"</code>

===== bottom =====
''Optional.'' Sets the position in the y dimension of the element's bottom edge relative to the container. Positive and negative values are accepted. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the <code>bottom</code> to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.

Integer: <code> bottom="(NEED TO DO MATH, LOL)"</code>

===== bottom_delta =====

===== follows =====
''Optional.'' Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.

Values: left, top, right, bottom. String multiple values together using pipes.

The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: <code>follows="left|top"</code>

===== font =====
''Optional.'' Sets which size and style of the application font to use. The default is SansSerifSmall for <code>text</code> elements and SansSerif for controls (such as <code>check_box</code> and <code>button</code>.

Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace

String: <code>font="SansSerifSmall"</code>

===== mouse_opaque =====
===== enabled =====
===== label =====
===== tool_tip =====
===== visible =====
===== control_name =====
===== tab_group =====
===== border =====
===== top =====

== XUI Text Parameters ==

== XUI Containers Parameters ==

== XUI Menus Parameters ==

=== menu_bar parameters ===
----
Used by floater and panel.
Can contain menu.
===== bottom =====
===== left =====
===== drop_shadow =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====
===== enabled =====
''Optional.''
===== tear_off =====
''Optional.''

=== menu parameters ===
----
Used by menu_bar and recursively by other menus.
Can contain menu, menu_item_call, menu_item_check, menu_item_separator, and tearoff_menu.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== drop_shadow =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
===== opaque =====
===== name =====
===== tear_off =====
''Optional.''
===== enabled =====
''Optional.''
===== color =====
''Optional.''
===== create_jump_keys =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''

=== pie_menu parameters ===
----
Used recursively by other pie_menus.
Can contain pie_menu.
===== name =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== tearoff_menu parameters ===
----
Used by menu.
===== bottom =====
===== enabled =====
===== height =====
===== label =====
===== left =====
===== mouse_opaque =====
===== name =====
===== width =====

=== menu_item_check parameters ===
----
Used by menu.
Can contain on_check, on_click, and on_enable.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
===== control_name =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''
===== shortcut =====
''Optional.''

=== menu_item_separator parameters ===
----
Used by menu and pie_menu.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== enabled =====
''Optional.''

=== menu_item_call parameters ===
----
Used by menu and pie_menu.
Can contain on_click, on_enable, and on_visible.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== enabled =====
''Optional.''
===== shortcut =====
''Optional.''
===== useMacCtrl =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''

=== on_check parameters ===
----
Used by menu_item_check.
===== function =====
''Optional.''
===== userdata =====
''Optional.''
===== control =====
''Optional.''

=== on_click parameters ===
----
Used by menu_item_call and menu_item_check.
===== filter =====
''Optional.''
===== function =====
===== userdata =====
===== name =====
''Optional.''

=== on_visible parameters ===
----
Used by menu_item_call.
===== function =====

=== on_enable parameters ===
----
Used by menu_item_call and menu_item_check.
===== function =====
===== userdata =====
''Optional.''
===== name =====
''Optional.''

== XUI Widgets Parameters ==

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== check_box parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== radio_style =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== control_name =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== halign =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== hidden =====
''Optional.''
===== max_length =====
''Optional.''

=== color_swatch parameters ===
----
Used by floater and panel.
===== border_color =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== can_apply_immediately =====
===== color =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== control_name =====
''Optional.''
===== enabled =====
''Optional.''

=== combo_box parameters ===
----
Used by floater, panel, and layout_panel.
Can contain combo_item.
===== allow_text_entry =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== length =====
''Optional.''
===== max_chars =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== visible =====
''Optional.''
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== tab_group =====
''Optional.''
===== control_name =====
''Optional.''
===== font =====
''Optional.''
===== initial_value =====
''Optional.''
===== halign =====
''Optional.''
===== max_length =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''

=== combo_item parameters ===
----
Used by combo_box.
===== name =====
===== value =====
''Optional.''
===== type =====
''Optional.''
===== length =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button parameters ===
----
Used by floater, panel, and layout_stack.
Can contain flyout_button_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== halign =====
''Optional.''
===== width =====
===== label =====
===== label_selected =====
''Optional.''
===== list_position =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
===== font =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button_item parameters ===
----
Used by flyout_button.
===== value =====
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

=== inventory_panel parameters ===
----
Used by floater, panel, and tab_container.
===== allow_multi_select =====
===== border =====
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== sort_order =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== joystick_turn parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== joystick_slide parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== line_editor parameters ===
----
Used by floater, panel, and layout_panel.
<line_editor> creates a single line text box
===== label =====
''Optional.''
===== max_length =====
''Optional.''
===== font =====
''Optional.''
===== bevel_style =====
''Optional.''
* none
* in
* out
* bright
* line
* texture
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== select_on_focus =====
''Optional.''
===== select_all_focus_received =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== cursor_color =====
''Optional.''
===== text_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== bg_writeable_color =====
''Optional.''
===== bg_focus_color =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== bottom_delta =====
''Optional.''
===== tool_tip =====
''Optional.''
===== left_delta =====
''Optional.''
===== tab_group =====
''Optional.''
===== commit_on_focus_lost =====
''Optional.''
===== hidden =====
''Optional.''
===== is_unicode =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
''Optional.''
===== min_val =====
''Optional.''
===== visible =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== prevalidate =====
''Optional.''
===== v_pad =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''

=== locate parameters ===
----
Used by panel.
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

=== multi_slider parameters ===
----
Used by panel.
===== allow_overlap =====
===== bottom =====
===== left =====
===== can_edit_text =====
===== control_name =====
===== decimal_digits =====
===== draw_track =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== label =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====
===== show_text =====
===== use_triangle =====
''Optional.''
===== value =====

=== name_editor parameters ===
----
Used by panel.
===== bevel_style =====
===== bg_readonly_color =====
''Optional.''
===== border_style =====
===== border_thickness =====
===== bottom =====
===== left_delta =====
===== follows =====
===== font =====
===== height =====
===== width =====
===== max_length =====
===== mouse_opaque =====
===== name =====
===== text_readonly_color =====
''Optional.''
===== enabled =====
''Optional.''
===== is_unicode =====
''Optional.''

=== name_list parameters ===
----
Used by floater and panel.
Can contain column.
===== allow_calling_card_drop =====
''Optional.''
===== background_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== column_padding =====
''Optional.''
===== draw_border =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== multi_select =====
===== name =====
===== name_column_index =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== tool_tip =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== background_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== pad parameters ===
----
Used by floater and panel.
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''

=== progress_bar parameters ===
----
Used by layout_panel.
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

=== radio_group parameters ===
----
Used by floater and panel.
Can contain radio_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== control_name =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== enabled =====
''Optional.''
===== visible =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''

=== radio_item parameters ===
----
Used by radio_group.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====

=== scroll_container parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====

=== scroll_list parameters ===
----
Used by floater, panel, layout_stack, and layout_panel.
Can contain column.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== can_resize =====
''Optional.''
===== column_padding =====
''Optional.''
===== column_widths =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
''Optional.''
===== multi_select =====
''Optional.''
===== name =====
===== search_column =====
''Optional.''
===== sort_column =====
''Optional.''
===== background_visible =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== enabled =====
''Optional.''
===== tab_group =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== font =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== allow_calling_card_drop =====
''Optional.''
===== tab_stop =====
''Optional.''
===== user_resize =====
''Optional.''
===== sort_ascending =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== search_editor parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''

=== slider parameters ===
----
Used by floater and panel.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== increment =====
===== initial_val =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== max_val =====
===== min_val =====
===== name =====
===== show_text =====
''Optional.''
===== control_name =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== value =====
''Optional.''
===== tool_tip =====
''Optional.''
===== volume =====
''Optional.''
===== edit_text =====
''Optional.''

=== slider_bar parameters ===
----
Used by panel.
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

=== spinner parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right_delta =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== halign =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
===== min_val =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== visible =====
''Optional.''
===== allow_text_entry =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== v_pad =====
''Optional.''

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

=== text parameters ===
----
Used by floater, panel, and layout_panel.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== v_pad =====
''Optional.''
===== valign =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== radio_style =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''
===== font_size =====
''Optional.''
===== font_style =====
''Optional.''
===== font-style =====
''Optional.''
===== bevel_style =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== is_unicode =====
''Optional.''
===== max_length =====
''Optional.''
===== hover =====
''Optional.''
===== hover_cursor =====
''Optional.''
===== hover_color =====
''Optional.''
===== text_color =====
''Optional.''
===== align =====
''Optional.''
===== text_wrap =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== allow_html =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== embedded_items =====
''Optional.''
===== hide_border =====
''Optional.''
===== hide_scrollbar =====
''Optional.''
===== line_spacing =====
''Optional.''
===== disabled_color =====
''Optional.''

=== text_editor parameters ===
----
Used by floater, panel, and layout_panel.
<text_editor> creates a multi-line text box
===== max_length =====
''Optional. ''
===== embedded_items =====
''Optional. ''
===== font =====
''Optional. ''
===== word_wrap =====
''Optional. ''
===== hide_scrollbar =====
''Optional. ''
===== cursor_color =====
''Optional. ''
===== text_color =====
''Optional. ''
===== text_readonly_color =====
''Optional. ''
===== bg_readonly_color =====
''Optional. ''
===== bg_writeable_color =====
''Optional. ''
===== bg_focus_color =====
''Optional. ''
===== bottom =====
''Optional. ''
===== bottom_delta =====
''Optional. ''
===== left =====
''Optional. ''
===== left_delta =====
''Optional. ''
===== right =====
''Optional. ''
===== top =====
''Optional. ''
===== follows =====
''Optional. ''
===== height =====
''Optional. ''
===== width =====
''Optional. ''
===== max_length =====
''Optional. ''
===== mouse_opaque =====
''Optional. ''
===== name =====
===== type =====
''Optional. ''
===== bevel_style =====
''Optional. ''
===== border_style =====
''Optional. ''
===== border_thickness =====
''Optional. ''
===== enabled =====
''Optional. ''
===== handle_edit_keys_directly =====
''Optional. ''
===== select_all_on_focus_received =====
''Optional. ''
===== select_on_focus =====
''Optional. ''
===== length =====
''Optional. ''
===== track_bottom =====
''Optional. ''
===== ignore_tab =====
''Optional. ''
===== border_drop_shadow_visible =====
''Optional. ''
===== border_visible =====
''Optional. ''
===== show_line_numbers =====
''Optional. ''
===== allow_html =====
''Optional. ''
===== hide_border =====
''Optional. ''
===== tab_stop =====
''Optional. ''
===== is_unicode =====
''Optional. ''
===== bg_visible =====
''Optional. ''
===== drop_shadow_visible =====
''Optional. ''
===== h_pad =====
''Optional. ''
===== v_pad =====
''Optional. ''
===== halign =====
''Optional. ''
===== background_visible =====
''Optional. ''
===== text_wrap =====
''Optional. ''

=== texture_picker parameters ===
----
Used by floater and panel.
===== allow_no_texture =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== can_apply_immediately =====
''Optional.''
===== default_image_name =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''

=== view_border parameters ===
----
Used by panel.
===== bevel_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== blevel_style =====
''Optional.''
===== border =====
''Optional.''

=== volume_slider parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== name =====
===== mouse_opaque =====
''Optional.''
===== hidden =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''
===== control_name =====
''Optional.''

=== web_browser parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== font =====
''Optional.''
===== name =====
===== border_visible =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== caret_color =====
''Optional.''
===== start_url =====
''Optional.''
===== embedded_items =====
''Optional.''
===== max_length =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== word_wrap =====
''Optional.''
===== ignore_ui_scale =====
''Optional.''

Skinning HowTo/XUI Other Widgets

2009-06-20T18:38:29Z

Fiddler Jones: /* XUI Text Parameters */ Moved to new page: Skinning HowTo/XUI Text

These are the XML elements and parameters used to define the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files and what they do | XUI files]] in the '''\skins\default\xui''' folders. See [[Skinning HowTo/Basics]] for an explanation of how these are used.

== Common parameters ==

The most common parameters are described here and are just listed under the elements that use them.

===== name =====
''Required.'' The XML name of this element. The name must be unique to the floater you are editing.

* IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.

String: <code>name="input_first_name"</code>
===== width =====
''Required.'' The width of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

* Tip: See the bounding boxes of all XML elements in the viewer: ''Advanced'' menu > UI > Debug Views.

Integer: <code>width="140"</code>
===== height =====
''Required.'' The height of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

Integer: <code>height="24"</code>
===== left =====
''Optional.'' Sets the position in the x dimension of the ''element's'' left edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container.

Integer: <code> left="6"</code>

===== right =====
''Optional.'' Sets the position in the x dimension of the ''element's'' right edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container. Best used to align something to the right.
* For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the <code>right</code> to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.

Integer: <code> right="6"</code>

===== left_delta =====
''Optional. (use instead of <code>left</code>)'' Sets the position in the x dimension of the element's left edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>left_delta</code> to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.

Integer: <code> left_delta="-106"</code>

===== right_delta =====
''Optional. (use instead of <code>right</code>)'' Sets the position in the x dimension of the element's right edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to right-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>right_delta</code> to 106, putting the left edge of Button B 106 pixels to the left of Button A.

Integer: <code> left_delta="106"</code>

===== bottom =====
''Optional.'' Sets the position in the y dimension of the element's bottom edge relative to the container. Positive and negative values are accepted. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the <code>bottom</code> to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.

Integer: <code> bottom="(NEED TO DO MATH, LOL)"</code>

===== bottom_delta =====

===== follows =====
''Optional.'' Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.

Values: left, top, right, bottom. String multiple values together using pipes.

The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: <code>follows="left|top"</code>

===== font =====
''Optional.'' Sets which size and style of the application font to use. The default is SansSerifSmall for <code>text</code> elements and SansSerif for controls (such as <code>check_box</code> and <code>button</code>.

Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace

String: <code>font="SansSerifSmall"</code>

===== mouse_opaque =====
===== enabled =====
===== label =====
===== tool_tip =====
===== visible =====
===== control_name =====
===== tab_group =====
===== border =====
===== top =====

== XUI Text Parameters ==

== XUI Containers Parameters ==

=== floater parameters ===
----
Used by tab_container.

===== can_close =====
''Optional.''
===== can_drag_on_left =====
''Optional.''
===== can_minimize =====
''Optional.''
===== can_resize =====
===== height =====
''Optional.''
===== width =====
''Optional.''
===== max_height =====
''Optional.''
===== min_height =====
''Optional.''
===== min_width =====
''Optional.''
===== name =====
===== rect_control =====
''Optional.''
===== title =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== can_tear_off =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== follows =====
''Optional.''
===== border =====
''Optional.''
===== default_tab_group =====
''Optional.''
===== label =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== border_bevel =====
''Optional.''
===== bevel_style =====
''Optional.''
===== short_title =====
''Optional.''
===== sound_flags =====
''Optional.''

=== multi_floater parameters ===
----
Can contain icon, string, tab_container, and panel.
===== can_close =====
===== can_drag_on_left =====
===== can_minimize =====
===== can_resize =====
===== height =====
===== width =====
===== min_height =====
''Optional.''
===== min_width =====
''Optional.''
===== name =====
===== rect_control =====
===== title =====
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== title_bar =====
''Optional.''

=== panel parameters ===
----
Used by floater, tab_container, layout_panel, multi_floater, and recursively by other panels.
===== border =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== background_opaque =====
''Optional.''
===== background_visible =====
''Optional.''
===== bevel_style =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''
===== can_resize =====
''Optional.''
===== filename =====
''Optional.''
===== tab_group =====
''Optional.''
===== default_tab_group =====
''Optional.''
===== placeholder =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== border_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== title =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== use_bounding_rect =====
''Optional.''
===== bg_visible =====
''Optional.''
===== can_close =====
''Optional.''
===== can_minimize =====
''Optional.''
===== left_in_finder =====
''Optional.''
===== select =====
''Optional.''
===== visible =====
''Optional.''

=== layout_panel parameters ===
----
Used by layout_stack.
Can contain button, check_box, combo_box, icon, layout_stack, line_editor, panel, progress_bar, scroll_list, text, text_editor, and web_browser.
===== border =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== top_delta =====
''Optional.''
===== default_tab_group =====
''Optional.''
===== height =====
''Optional.''
===== min_height =====
''Optional.''
===== width =====
===== min_width =====
''Optional.''
===== name =====
===== auto_resize =====
''Optional.''
===== can_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== filename =====
''Optional.''
===== visible =====
''Optional.''
===== follows =====
''Optional.''
===== background_visible =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== use_bounding_rect =====
''Optional.''

=== layout_stack parameters ===
----
Used by floater, panel, and layout_panel.
Can contain button, flyout_button, icon, layout_panel, and scroll_list.
===== border =====
''Optional.''
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== height =====
''Optional.''
===== min_height =====
''Optional.''
===== width =====
''Optional.''
===== min_width =====
''Optional.''
===== orientation =====
''Optional.''
===== name =====
===== tab_group =====
''Optional.''
===== border_size =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== use_bounding_rect =====
''Optional.''

=== tab_container parameters ===
----
Used by floater, panel, and multi_floater.
Can contain inventory_panel, panel, and floater.
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== top =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tab_position =====
===== width =====
''Optional.''
===== tab_width =====
''Optional.''
===== tab_min_width =====
''Optional.''
===== tab_max_width =====
''Optional.''
===== border =====
''Optional.''
===== tab_group =====
''Optional.''
===== hide_tabs =====
''Optional.''

== XUI Menus Parameters ==

=== menu_bar parameters ===
----
Used by floater and panel.
Can contain menu.
===== bottom =====
===== left =====
===== drop_shadow =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====
===== enabled =====
''Optional.''
===== tear_off =====
''Optional.''

=== menu parameters ===
----
Used by menu_bar and recursively by other menus.
Can contain menu, menu_item_call, menu_item_check, menu_item_separator, and tearoff_menu.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== drop_shadow =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
===== opaque =====
===== name =====
===== tear_off =====
''Optional.''
===== enabled =====
''Optional.''
===== color =====
''Optional.''
===== create_jump_keys =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''

=== pie_menu parameters ===
----
Used recursively by other pie_menus.
Can contain pie_menu.
===== name =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== tearoff_menu parameters ===
----
Used by menu.
===== bottom =====
===== enabled =====
===== height =====
===== label =====
===== left =====
===== mouse_opaque =====
===== name =====
===== width =====

=== menu_item_check parameters ===
----
Used by menu.
Can contain on_check, on_click, and on_enable.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
===== control_name =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''
===== shortcut =====
''Optional.''

=== menu_item_separator parameters ===
----
Used by menu and pie_menu.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== enabled =====
''Optional.''

=== menu_item_call parameters ===
----
Used by menu and pie_menu.
Can contain on_click, on_enable, and on_visible.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== enabled =====
''Optional.''
===== shortcut =====
''Optional.''
===== useMacCtrl =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''

=== on_check parameters ===
----
Used by menu_item_check.
===== function =====
''Optional.''
===== userdata =====
''Optional.''
===== control =====
''Optional.''

=== on_click parameters ===
----
Used by menu_item_call and menu_item_check.
===== filter =====
''Optional.''
===== function =====
===== userdata =====
===== name =====
''Optional.''

=== on_visible parameters ===
----
Used by menu_item_call.
===== function =====

=== on_enable parameters ===
----
Used by menu_item_call and menu_item_check.
===== function =====
===== userdata =====
''Optional.''
===== name =====
''Optional.''

== XUI Widgets Parameters ==

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== check_box parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== radio_style =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== control_name =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== halign =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== hidden =====
''Optional.''
===== max_length =====
''Optional.''

=== color_swatch parameters ===
----
Used by floater and panel.
===== border_color =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== can_apply_immediately =====
===== color =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== control_name =====
''Optional.''
===== enabled =====
''Optional.''

=== combo_box parameters ===
----
Used by floater, panel, and layout_panel.
Can contain combo_item.
===== allow_text_entry =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== length =====
''Optional.''
===== max_chars =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== visible =====
''Optional.''
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== tab_group =====
''Optional.''
===== control_name =====
''Optional.''
===== font =====
''Optional.''
===== initial_value =====
''Optional.''
===== halign =====
''Optional.''
===== max_length =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''

=== combo_item parameters ===
----
Used by combo_box.
===== name =====
===== value =====
''Optional.''
===== type =====
''Optional.''
===== length =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button parameters ===
----
Used by floater, panel, and layout_stack.
Can contain flyout_button_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== halign =====
''Optional.''
===== width =====
===== label =====
===== label_selected =====
''Optional.''
===== list_position =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
===== font =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== enabled =====
''Optional.''

=== flyout_button_item parameters ===
----
Used by flyout_button.
===== value =====
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

=== inventory_panel parameters ===
----
Used by floater, panel, and tab_container.
===== allow_multi_select =====
===== border =====
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== sort_order =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== joystick_turn parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== joystick_slide parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== enabled =====
===== follows =====
===== halign =====
===== height =====
===== width =====
===== image_selected =====
===== image_unselected =====
===== mouse_opaque =====
===== name =====
===== quadrant =====
===== scale_image =====
===== tool_tip =====

=== line_editor parameters ===
----
Used by floater, panel, and layout_panel.
<line_editor> creates a single line text box
===== label =====
''Optional.''
===== max_length =====
''Optional.''
===== font =====
''Optional.''
===== bevel_style =====
''Optional.''
* none
* in
* out
* bright
* line
* texture
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== select_on_focus =====
''Optional.''
===== select_all_focus_received =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== cursor_color =====
''Optional.''
===== text_color =====
''Optional.''
===== text_readonly_color =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== bg_writeable_color =====
''Optional.''
===== bg_focus_color =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== handle_edit_keys_directly =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== bottom_delta =====
''Optional.''
===== tool_tip =====
''Optional.''
===== left_delta =====
''Optional.''
===== tab_group =====
''Optional.''
===== commit_on_focus_lost =====
''Optional.''
===== hidden =====
''Optional.''
===== is_unicode =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
''Optional.''
===== min_val =====
''Optional.''
===== visible =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== prevalidate =====
''Optional.''
===== v_pad =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''

=== locate parameters ===
----
Used by panel.
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

=== multi_slider parameters ===
----
Used by panel.
===== allow_overlap =====
===== bottom =====
===== left =====
===== can_edit_text =====
===== control_name =====
===== decimal_digits =====
===== draw_track =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== label =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====
===== show_text =====
===== use_triangle =====
''Optional.''
===== value =====

=== name_editor parameters ===
----
Used by panel.
===== bevel_style =====
===== bg_readonly_color =====
''Optional.''
===== border_style =====
===== border_thickness =====
===== bottom =====
===== left_delta =====
===== follows =====
===== font =====
===== height =====
===== width =====
===== max_length =====
===== mouse_opaque =====
===== name =====
===== text_readonly_color =====
''Optional.''
===== enabled =====
''Optional.''
===== is_unicode =====
''Optional.''

=== name_list parameters ===
----
Used by floater and panel.
Can contain column.
===== allow_calling_card_drop =====
''Optional.''
===== background_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== column_padding =====
''Optional.''
===== draw_border =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== multi_select =====
===== name =====
===== name_column_index =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== tool_tip =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== background_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== pad parameters ===
----
Used by floater and panel.
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''

=== progress_bar parameters ===
----
Used by layout_panel.
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

=== radio_group parameters ===
----
Used by floater and panel.
Can contain radio_item.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== control_name =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
===== height =====
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== enabled =====
''Optional.''
===== visible =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''

=== radio_item parameters ===
----
Used by radio_group.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====

=== scroll_container parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====

=== scroll_list parameters ===
----
Used by floater, panel, layout_stack, and layout_panel.
Can contain column.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== can_resize =====
''Optional.''
===== column_padding =====
''Optional.''
===== column_widths =====
''Optional.''
===== draw_heading =====
''Optional.''
===== draw_stripes =====
''Optional.''
===== draw_border =====
''Optional.''
===== follows =====
''Optional.''
===== multi_select =====
''Optional.''
===== name =====
===== search_column =====
''Optional.''
===== sort_column =====
''Optional.''
===== background_visible =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== enabled =====
''Optional.''
===== tab_group =====
''Optional.''
===== bg_selected_color =====
''Optional.''
===== fg_disable_color =====
''Optional.''
===== fg_selected_color =====
''Optional.''
===== fg_unselected_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== font =====
''Optional.''
===== heading_font =====
''Optional.''
===== heading_height =====
''Optional.''
===== allow_calling_card_drop =====
''Optional.''
===== tab_stop =====
''Optional.''
===== user_resize =====
''Optional.''
===== sort_ascending =====
''Optional.''

=== column parameters ===
----
Used by name_list and scroll_list.
===== name =====
===== label =====
''Optional.''
===== sort =====
''Optional.''
===== width =====
''Optional.''
===== dynamicwidth =====
''Optional.''
===== relwidth =====
''Optional.''
===== image =====
''Optional.''
===== tool_tip =====
''Optional.''
===== user_resize =====
''Optional.''

=== search_editor parameters ===
----
Used by floater.
===== bottom =====
===== left =====
===== follows =====
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''

=== slider parameters ===
----
Used by floater and panel.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
''Optional.''
===== increment =====
===== initial_val =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== max_val =====
===== min_val =====
===== name =====
===== show_text =====
''Optional.''
===== control_name =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== value =====
''Optional.''
===== tool_tip =====
''Optional.''
===== volume =====
''Optional.''
===== edit_text =====
''Optional.''

=== slider_bar parameters ===
----
Used by panel.
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

=== spinner parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right_delta =====
''Optional.''
===== decimal_digits =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== halign =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== increment =====
''Optional.''
===== initial_val =====
''Optional.''
===== max_val =====
===== min_val =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== label =====
''Optional.''
===== label_width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== can_edit_text =====
''Optional.''
===== visible =====
''Optional.''
===== allow_text_entry =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== text_disabled_color =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== v_pad =====
''Optional.''

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

=== text parameters ===
----
Used by floater, panel, and layout_panel.
===== type =====
''Optional.''
===== length =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== bg_visible =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== font =====
''Optional.''
===== h_pad =====
''Optional.''
===== halign =====
''Optional.''
===== v_pad =====
''Optional.''
===== valign =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''
===== tool_tip =====
''Optional.''
===== tab_stop =====
''Optional.''
===== initial_value =====
''Optional.''
===== label =====
''Optional.''
===== radio_style =====
''Optional.''
===== word_wrap =====
''Optional.''
===== control_name =====
''Optional.''
===== font_size =====
''Optional.''
===== font_style =====
''Optional.''
===== font-style =====
''Optional.''
===== bevel_style =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== is_unicode =====
''Optional.''
===== max_length =====
''Optional.''
===== hover =====
''Optional.''
===== hover_cursor =====
''Optional.''
===== hover_color =====
''Optional.''
===== text_color =====
''Optional.''
===== align =====
''Optional.''
===== text_wrap =====
''Optional.''
===== text_enabled_color =====
''Optional.''
===== allow_html =====
''Optional.''
===== bg_readonly_color =====
''Optional.''
===== embedded_items =====
''Optional.''
===== hide_border =====
''Optional.''
===== hide_scrollbar =====
''Optional.''
===== line_spacing =====
''Optional.''
===== disabled_color =====
''Optional.''

=== text_editor parameters ===
----
Used by floater, panel, and layout_panel.
<text_editor> creates a multi-line text box
===== max_length =====
''Optional. ''
===== embedded_items =====
''Optional. ''
===== font =====
''Optional. ''
===== word_wrap =====
''Optional. ''
===== hide_scrollbar =====
''Optional. ''
===== cursor_color =====
''Optional. ''
===== text_color =====
''Optional. ''
===== text_readonly_color =====
''Optional. ''
===== bg_readonly_color =====
''Optional. ''
===== bg_writeable_color =====
''Optional. ''
===== bg_focus_color =====
''Optional. ''
===== bottom =====
''Optional. ''
===== bottom_delta =====
''Optional. ''
===== left =====
''Optional. ''
===== left_delta =====
''Optional. ''
===== right =====
''Optional. ''
===== top =====
''Optional. ''
===== follows =====
''Optional. ''
===== height =====
''Optional. ''
===== width =====
''Optional. ''
===== max_length =====
''Optional. ''
===== mouse_opaque =====
''Optional. ''
===== name =====
===== type =====
''Optional. ''
===== bevel_style =====
''Optional. ''
===== border_style =====
''Optional. ''
===== border_thickness =====
''Optional. ''
===== enabled =====
''Optional. ''
===== handle_edit_keys_directly =====
''Optional. ''
===== select_all_on_focus_received =====
''Optional. ''
===== select_on_focus =====
''Optional. ''
===== length =====
''Optional. ''
===== track_bottom =====
''Optional. ''
===== ignore_tab =====
''Optional. ''
===== border_drop_shadow_visible =====
''Optional. ''
===== border_visible =====
''Optional. ''
===== show_line_numbers =====
''Optional. ''
===== allow_html =====
''Optional. ''
===== hide_border =====
''Optional. ''
===== tab_stop =====
''Optional. ''
===== is_unicode =====
''Optional. ''
===== bg_visible =====
''Optional. ''
===== drop_shadow_visible =====
''Optional. ''
===== h_pad =====
''Optional. ''
===== v_pad =====
''Optional. ''
===== halign =====
''Optional. ''
===== background_visible =====
''Optional. ''
===== text_wrap =====
''Optional. ''

=== texture_picker parameters ===
----
Used by floater and panel.
===== allow_no_texture =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== can_apply_immediately =====
''Optional.''
===== default_image_name =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''

=== view_border parameters ===
----
Used by panel.
===== bevel_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left_delta =====
''Optional.''
===== left =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== blevel_style =====
''Optional.''
===== border =====
''Optional.''

=== volume_slider parameters ===
----
Used by floater and panel.
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== name =====
===== mouse_opaque =====
''Optional.''
===== hidden =====
''Optional.''
===== enabled =====
''Optional.''
===== tool_tip =====
''Optional.''
===== control_name =====
''Optional.''

=== web_browser parameters ===
----
Used by floater, panel, and layout_panel.
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== font =====
''Optional.''
===== name =====
===== border_visible =====
''Optional.''
===== width =====
''Optional.''
===== height =====
''Optional.''
===== caret_color =====
''Optional.''
===== start_url =====
''Optional.''
===== embedded_items =====
''Optional.''
===== max_length =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== word_wrap =====
''Optional.''
===== ignore_ui_scale =====
''Optional.''

Skinning HowTo/XUI Menus

2009-06-20T18:34:13Z

Fiddler Jones: New page: === menu_bar parameters === ---- Used by floater and panel. Can contain menu. ===== bottom ===== ===== left ===== ===== drop_shadow ===== ===== follows ===== ===== height ===== ===== width...

=== menu_bar parameters ===
----
Used by floater and panel.
Can contain menu.
===== bottom =====
===== left =====
===== drop_shadow =====
===== follows =====
===== height =====
===== width =====
===== mouse_opaque =====
===== opaque =====
===== name =====
===== enabled =====
''Optional.''
===== tear_off =====
''Optional.''

=== menu parameters ===
----
Used by menu_bar and recursively by other menus.
Can contain menu, menu_item_call, menu_item_check, menu_item_separator, and tearoff_menu.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== drop_shadow =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
===== opaque =====
===== name =====
===== tear_off =====
''Optional.''
===== enabled =====
''Optional.''
===== color =====
''Optional.''
===== create_jump_keys =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''

=== pie_menu parameters ===
----
Used recursively by other pie_menus.
Can contain pie_menu.
===== name =====
===== label =====
''Optional.''
===== enabled =====
''Optional.''

=== tearoff_menu parameters ===
----
Used by menu.
===== bottom =====
===== enabled =====
===== height =====
===== label =====
===== left =====
===== mouse_opaque =====
===== name =====
===== width =====

=== menu_item_check parameters ===
----
Used by menu.
Can contain on_check, on_click, and on_enable.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
===== control_name =====
''Optional.''
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
===== name =====
===== enabled =====
''Optional.''
===== shortcut =====
''Optional.''

=== menu_item_separator parameters ===
----
Used by menu and pie_menu.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== enabled =====
''Optional.''

=== menu_item_call parameters ===
----
Used by menu and pie_menu.
Can contain on_click, on_enable, and on_visible.
===== bottom_delta =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
===== mouse_opaque =====
''Optional.''
===== name =====
===== enabled =====
''Optional.''
===== shortcut =====
''Optional.''
===== useMacCtrl =====
''Optional.''
===== visible =====
''Optional.''
===== hidden =====
''Optional.''

=== on_check parameters ===
----
Used by menu_item_check.
===== function =====
''Optional.''
===== userdata =====
''Optional.''
===== control =====
''Optional.''

=== on_click parameters ===
----
Used by menu_item_call and menu_item_check.
===== filter =====
''Optional.''
===== function =====
===== userdata =====
===== name =====
''Optional.''

=== on_visible parameters ===
----
Used by menu_item_call.
===== function =====

=== on_enable parameters ===
----
Used by menu_item_call and menu_item_check.
===== function =====
===== userdata =====
''Optional.''
===== name =====
''Optional.''

Skinning HowTo/XUI Containers

2009-06-20T18:31:50Z

Fiddler Jones: New page: === floater parameters === ---- Used by tab_container. ===== can_close ===== ''Optional.'' ===== can_drag_on_left ===== ''Optional.'' ===== can_minimize ===== ''Optional.'' ===== can_resi...

=== floater parameters ===
----
Used by tab_container.

===== can_close =====
''Optional.''
===== can_drag_on_left =====
''Optional.''
===== can_minimize =====
''Optional.''
===== can_resize =====
===== height =====
''Optional.''
===== width =====
''Optional.''
===== max_height =====
''Optional.''
===== min_height =====
''Optional.''
===== min_width =====
''Optional.''
===== name =====
===== rect_control =====
''Optional.''
===== title =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== can_tear_off =====
''Optional.''
===== enabled =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== control_name =====
''Optional.''
===== follows =====
''Optional.''
===== border =====
''Optional.''
===== default_tab_group =====
''Optional.''
===== label =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== border_bevel =====
''Optional.''
===== bevel_style =====
''Optional.''
===== short_title =====
''Optional.''
===== sound_flags =====
''Optional.''

=== multi_floater parameters ===
----
Can contain icon, string, tab_container, and panel.
===== can_close =====
===== can_drag_on_left =====
===== can_minimize =====
===== can_resize =====
===== height =====
===== width =====
===== min_height =====
''Optional.''
===== min_width =====
''Optional.''
===== name =====
===== rect_control =====
===== title =====
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== title_bar =====
''Optional.''

=== panel parameters ===
----
Used by floater, tab_container, layout_panel, multi_floater, and recursively by other panels.
===== border =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== label =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
''Optional.''
===== background_opaque =====
''Optional.''
===== background_visible =====
''Optional.''
===== bevel_style =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== bg_opaque_color =====
''Optional.''
===== can_resize =====
''Optional.''
===== filename =====
''Optional.''
===== tab_group =====
''Optional.''
===== default_tab_group =====
''Optional.''
===== placeholder =====
''Optional.''
===== border_drop_shadow_visible =====
''Optional.''
===== border_visible =====
''Optional.''
===== border_style =====
''Optional.''
===== border_thickness =====
''Optional.''
===== border_color =====
''Optional.''
===== tool_tip =====
''Optional.''
===== title =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== use_bounding_rect =====
''Optional.''
===== bg_visible =====
''Optional.''
===== can_close =====
''Optional.''
===== can_minimize =====
''Optional.''
===== left_in_finder =====
''Optional.''
===== select =====
''Optional.''
===== visible =====
''Optional.''

=== layout_panel parameters ===
----
Used by layout_stack.
Can contain button, check_box, combo_box, icon, layout_stack, line_editor, panel, progress_bar, scroll_list, text, text_editor, and web_browser.
===== border =====
''Optional.''
===== bottom =====
''Optional.''
===== left =====
''Optional.''
===== top_delta =====
''Optional.''
===== default_tab_group =====
''Optional.''
===== height =====
''Optional.''
===== min_height =====
''Optional.''
===== width =====
===== min_width =====
''Optional.''
===== name =====
===== auto_resize =====
''Optional.''
===== can_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== filename =====
''Optional.''
===== visible =====
''Optional.''
===== follows =====
''Optional.''
===== background_visible =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== use_bounding_rect =====
''Optional.''

=== layout_stack parameters ===
----
Used by floater, panel, and layout_panel.
Can contain button, flyout_button, icon, layout_panel, and scroll_list.
===== border =====
''Optional.''
===== bottom =====
===== top =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== follows =====
===== height =====
''Optional.''
===== min_height =====
''Optional.''
===== width =====
''Optional.''
===== min_width =====
''Optional.''
===== orientation =====
''Optional.''
===== name =====
===== tab_group =====
''Optional.''
===== border_size =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== use_bounding_rect =====
''Optional.''

=== tab_container parameters ===
----
Used by floater, panel, and multi_floater.
Can contain inventory_panel, panel, and floater.
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== left =====
===== right =====
''Optional.''
===== top =====
''Optional.''
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tab_position =====
===== width =====
''Optional.''
===== tab_width =====
''Optional.''
===== tab_min_width =====
''Optional.''
===== tab_max_width =====
''Optional.''
===== border =====
''Optional.''
===== tab_group =====
''Optional.''
===== hide_tabs =====
''Optional.''

Skinning HowTo/Basics

2009-06-20T18:30:36Z

Fiddler Jones: /* Related to layout */

Skinning HowTo/XUI Text

2009-06-20T18:21:48Z

Fiddler Jones: New page: ==Alerts== === alerts === ---- ==Fonts== === fonts === ---- Can contain font and font_size. === font_size parameters === ---- Used by fonts. ===== name ===== ===== comment ===== =====...

==Alerts==

=== alerts ===
----

==Fonts==

=== fonts ===
----
Can contain font and font_size.

=== font_size parameters ===
----
Used by fonts.
===== name =====
===== comment =====
===== size =====

=== font parameters ===
----
Used by fonts.
Can contain file and os.
===== name =====
===== comment =====
===== font_style =====
''Optional.''

=== os parameters ===
----
Used by font.
Can contain file.
===== name =====

=== file ===
----
Used by font and os.

----
----

==Mimetypes==

=== mimetypes parameters ===
----
===== name =====

=== defaultlabel ===
----
Used by mimetypes.

=== defaultwidget ===
----
Used by mimetypes.

=== defaultimpl ===
----
Used by mimetypes.

=== scheme parameters ===
----
Used by mimetypes.
Can contain label and widgettype.
===== name =====

=== widgetset parameters ===
----
Used by mimetypes.
Can contain allow_looping, allow_resize, default_type, icon, label, playtip, and tooltip.
===== name =====

=== mimetype parameters ===
----
Used by mimetypes.
Can contain impl, label, and widgettype.
===== name =====
===== menu =====
''Optional.''

=== impl ===
----
Used by mimetype.

=== widgettype ===
----
Used by scheme and mimetype.

=== label parameters ===
----
Used by widgetset, scheme, mimetype.
===== name =====

=== allow_resize ===
----
Used by widgetset.

=== allow_looping ===
----
Used by widgetset.

=== default_type ===
----
Used by widgetset.

=== playtip parameters ===
----
Used by widgetset.
===== name =====

=== tooltip parameters ===
----
Used by widgetset.
===== name =====

=== icon parameters ===
----
Used by floater, panel, layout_stack, layout_panel, multi_floater, and widgetset.
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>
===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== top =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== follows =====
''Optional.''
===== name =====
''Optional.''
===== color =====
''Optional.''
===== enabled =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== bg_alpha_color =====
''Optional.''
===== border =====
''Optional.''
===== scale_image =====
''Optional.''
===== auto_resize =====
''Optional.''
===== visible =====
''Optional.''
===== label =====
''Optional.''
===== tool_tip =====
''Optional.''

----
----

==Notifications==

=== notifications ===
----
Can contain global, notification, and template.

=== global parameters ===
----
Used by notifications.
===== name =====

=== template parameters ===
----
Used by notifications.
Can contain form.
===== name =====

=== notification parameters ===
----
Used by notifications.
Can contain form, unique, url, and usetemplate.
===== functor =====
''Optional.''
===== icon =====
===== name =====
===== label =====
''Optional.''
===== type =====
===== priority =====
''Optional.''
===== sound =====
''Optional.''
===== duration =====
''Optional.''

=== form parameters ===
----
Used by template and notification.
Can contain button, ignore, and input.
===== name =====
''Optional.''

=== ignore parameters ===
----
Used by form.
===== text =====
===== name =====
''Optional.''
===== save_option =====
''Optional.''

=== input parameters ===
----
Used by form.
===== name =====
===== type =====

=== button parameters ===
----
Used by floater, panel, layout_stack, layout_panel, and form.

===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

===== bottom =====
''Optional.''
===== bottom_delta =====
''Optional.''
===== left =====
''Optional.''
===== left_delta =====
''Optional.''
===== right =====
''Optional.''
===== enabled =====
''Optional.''
===== follows =====
''Optional.''
===== height =====
''Optional.''
===== width =====
''Optional.''
===== mouse_opaque =====
''Optional.''
===== name =====
===== tool_tip =====
''Optional.''
===== visible =====
''Optional.''
===== tab_group =====
''Optional.''
===== pad_right =====
''Optional.''
===== hidden =====
''Optional.''
===== tab_stop =====
''Optional.''
===== help_url =====
''Optional.''
===== sound_flags =====
''Optional.''
===== auto_resize =====
''Optional.''
===== user_resize =====
''Optional.''
===== valign =====
''Optional.''
===== default =====
''Optional.''
===== index =====
''Optional.''
===== text =====
''Optional.''
===== ignore =====
''Optional.''
===== control_name =====
''Optional.''
===== label_width =====
''Optional.''
===== image =====
''Optional.''

=== url parameters ===
----
Used by notification.
===== option =====
===== name =====

=== usetemplate parameters ===
----
Used by notification.
===== name =====
===== yestext =====
===== notext =====
''Optional.''
===== canceltext =====
''Optional.''
===== ignoretext =====
''Optional.''

=== unique ===
----
Used by notification.

=== context parameters ===
----
Used by unique.
===== key =====

----
----

==Role Actions==

=== role_actions ===
----
Can contain action_set.

=== action_set parameters ===
----
Used by role_actions.
Can contain action.
===== description =====
===== name =====

=== action parameters ===
----
Used by action_set.
===== description =====
===== longdescription =====
===== name =====
===== value =====

----
----

==Strings==

=== strings ===
----
Can contain string.

=== string parameters ===
----
Used by floater, panel, multi_floater, and strings.
===== name =====
===== word_wrap =====
''Optional.''

----
----

==Teleport Messages==

=== teleport_messages ===
----
Can contain message_set.

=== message_set parameters ===
----
Used by teleport_messages.
Can contain message.
===== name =====

=== message parameters ===
----
Used by message_set.
===== name =====

----
----

==XUI Version==

=== xui_version ===

Skinning HowTo/Basics

2009-06-20T18:06:31Z

Fiddler Jones: /* Related to localizations */

Skinning HowTo/Basics

2009-06-11T02:12:03Z

Fiddler Jones: /* Related to layout */ Making a new page

Skinning HowTo/XUI Other Widgets

2009-06-11T02:10:18Z

Fiddler Jones: New page: These are the XML elements and parameters used to define the floaters, panels, and so forth, that make up the viewer user interface. They are used by the [[Skinning How To/The XML files a...

Skinning HowTo/Basics

2009-06-11T01:41:47Z

Fiddler Jones: /* Related to sizing */

{{Help|Viewer=*}}

This page is a stub. Improvements to this page are freely welcomed!

New skins have already been created -- see the page [[Skinning - Post Your Skins Here]].

For a full list of tutorials -- see the [[Skinning_HowTo/Basics#See_Also]] section.

If you would like to add tutorials with more than Basic information, you might choose to name your page along similar lines:
* Skinning HowTo/Resize the toolbar
* Skinning HowTo/Changing a highlighting effect
* ''etc''

= Intro =
This page describes the skinning capabilities of Viewer 1.20 and higher, and until it becomes the official viewer, assumes you have the 1.20 Release Candidate installed.

The skinning capabilities of the Second Life viewer are currently limited, but will be continuously improved through the development of the [[Skinning]] Project. This document sets out some basic information about the structure and loading of UI textures, colors, floaters as defined in XML.

Caution is always warranted when making changes to Second Life's installed files. In some cases the viewer will crash if an XML file is missing requisite node or element, or if such an element is malformed/misspelled. Making a backup copy of the unaltered files is highly recommended. If a malformed file prevents you from running the viewer without an immediate crash, you will need to restore the original file; or re-install Second Life from the [http://secondlife.com/support/downloads.php download page].

=== Helpful Tools ===
* You will need an XML editor program for more easily making edits to an XML file.
** ''One such editor that is free and open source is [http://www.activestate.com/Products/komodo_ide/komodo_edit.mhtml Komodo Edit].''

* Most Windows versions do not provide a thumbnail view for tga files (an essential feature while editing the skin files). [http://greggman.com/pages/thumbplug_tga.htm Thumb Plug TGA] is a free open source tga thumbnail plugin that will provide this functionality.

* OpenSim is a free and open source version of the SL Simulator that you can run yourself. Next to your xml editor and imaging program, this will be your most important tool while skinning the viewer. Linden grid logins can be slow, or disabled, and are inconvenient for testing things like a one line edit of an XML file. Logins on a simulator running on your local machine are significantly faster than logins sent over the Internet, thus providing a quick and easy testbed for edits you've made to your viewer skin.
** [http://opensimulator.org Official OpenSim website]
** Read the "User Docs" page for instructions on how to download and setup your personal simulator.
** [http://opensimulator.org/wiki/Connecting How to connect to an Open Simulator with your viewer]

Its usefulness cannot be stressed enough when dealing with xml files that need a relog (such as colors.xml).

=== Useful menu items ===

* Advanced > UI > Show Name Tooltops
Shows the xml file name or UI path of whatever element your mouse is hovering over.

* Advanced > XUI > Edit UI...
A barest of bones xml file editor. Useful for testing spacing and layout for portions of the UI without relogging.

= \SecondLife\skins\[SKIN]\ folder =
(Note: colors.xml and colors_base.xml are now associated with specific viewer skins. Each skin folder has its own copy of colors.xml and colors_base.xml)
== colors_base.xml ==
This file defines the basic colors of the UI as separately named nodes.

* WARNING: It is highly advisable that you do NOT MAKE CHANGES to this file. Instead, copy & paste entries from this file to the next file (colors.xml) -- which overrides settings in colors_base.xml. The viewer will crash if any requisite entry is missing or malformed in colors_base.xml!

== colors.xml ==
By default, this file has no entries. However this file can contains entries which will override any identically-named entry in colors_base.xml.

The format for specifying a color is

<pre>value="[R],[G],[B],[OPACITY]"</pre>

...where <code>R,G,B,Opacity</code> are in the range 0-255. For opacity, 128 is half opacity (ergo, half transparent).

(Note: Opacity is also sometimes called the Alpha value)

* For example, you could copy the following entries ''from'' colors_base.xml and paste them ''into'' colors.xml, where you can make adjustments:

<pre>

<ChatHistoryBgColor value="0, 30, 80, 200" />
<ChatHistoryTextColor value="255, 255, 255, 255" />
<IMHistoryBgColor value="0, 30, 80, 128" />
<IMHistoryTextColor value="255, 255, 255, 255" />
</pre>

* For ease of use, there is also a [[Skinning_How_To/Fully_commented_colors.xml_file|fully commented colors.xml file]] on the wiki that labels each setting.

= \SecondLife\skins\[SKIN]\textures\ folder =

2008-04-08: This is where the viewer's installed textures reside.

== *.j2c, *.tga, *.jpg, *.png ==

* Many of these textures have a filename by UUID
** most of these are installed textures used on Orientation Island.
* As part of the [[Dazzle]] project, every texture that is used in the UI now has a human-readable english filename... with the following EXCEPTIONS (''these omissions will be converted in the [[Skinning]] Phase 1''):
** 7a0b1bdb-b5d9-4df5-bac2-ba230da93b5b.tga (Create tool iconic button)
** 0098b015-3daf-4cfe-a72f-915369ea97c2.tga (Create tool iconic button, selected iconic button)
** 3c18c87e-5f50-14e2-e744-f44734aa365f.tga (Scroll-left-to-firstone |< icon)
** 7dabc040-ec13-2309-ddf7-4f161f6de2f4.tga (Scroll-right-to-lastone >|, highlighted icon)
** 9cad3e6d-2d6d-107d-f8ab-5ba272b5bfe1.tga (Scroll-left-to-firstone |<, highlighted icon)
** 89e9fc7c-0b16-457d-be4f-136270759c4d.tga (Volume "speaker" icon)
** 5748decc-f629-461c-9a36-a35a221fe21f.tga (blank icon)

* In a future phase of [[Skinning]] it is planned to move these UI textures to a separate folder so they can be found/manipulated together more easily.

* In the past,icon graphics/textures had to have an image size that was a power of two (eg, 32x128, 64x128, etc), but now they can be any size (eg. a 24x96 image).

== textures.xml ==

2008-04-08: Here is an example of some simple entries in textures.xml. They have no stretch rectangle defined, not preloaded, are not referenced by UUID:
<pre>
<icon_auction.tga/>
<icon_avatar_offline.tga/>
<icon_avatar_online.tga/>
<icon_day_cycle.tga/>
<icon_diurnal.tga/>
<icon_event.tga/>
<icon_event_mature.tga/>
<icon_for_sale.tga/>
<icon_group.tga/>
<icon_groupnotice.tga/>
<icon_groupnoticeinventory.tga/>
<icon_lock.tga/>
<icon_place.tga/>
<icon_popular.tga/>
<icon_top_pick.tga/>
</pre>

==== scaling rectangles (scale_rect) ====

UI art textures are often stretched (scaled) in various resizing to accommodate different widths or heights of the same widget. In order to preserve a crisp look of edges, part of the image is 'preserved' or protected to not be scaled. By default, the stretching will preserve 8 pixels on all sides of the image.

* To change this default, you set a <scale_rect /> element.
<code>
<scale_rect left="''x1''" top="''y1''" right="''x2''" bottom="''y2''" />
</code>
* The pixel coordinates of the image here are counted from a (0,0) position that refers to the LEFT BOTTOM corner. (Like a Cartesian coordinate system in quadrant I.)

* For example, this image toolbar_btn_selected.tga has dimensions of 128 pixels width x 24 pixels height: [[Image:Toolbar btn selected.tga.jpg]]
** The following <scale_rect /> code...

<code>
<toolbar_btn_selected.tga>
<scale_rect left="26" top="24" right="102" bottom="0" />
</toolbar_btn_selected.tga>
</code>
:* ...defines a stretchable rectangle that ''preserves'' 26 pixels to its left & right:
:: [[Image:Toolbar btn selected rect example1.jpg]]

==== use_mips ====
(under construction)

==== preload ====
Setting <code>preload="true"</code> means the texture is loaded at runtime, before the login screen appears. In general it is best to preload as few textures as possible, since this affects memory usage of the viewer.

Example:
<code>
<checkbox_disabled_false.tga preload="true" />
</code>

= \SecondLife\skins\[SKIN]\xui\ folder =

* XUI (pronounced zoo-e) stands for XML User Interface. XUI consists of a custom XML data format for describing Second Life's user interface, and the code which processes that data and integrates it with the Second Life viewer.

== ..\[lang] folders ==

When another language is selected in the viewer (Preferences > General > Language), then the files in the appropriate [lang] folder are loaded hierarchically on top of the en-us version, starting the next time the viewer is run.

If an element (or entire file) is missing in the [lang] version, then the viewer falls back to the value specified in the en-us version.

2008-04-08: Existing languages included in the viewer include:

*\ko Korean
*\ja Japanese
*\de German
*\fr French - ''not officially supported nor updated regularly''
*\es Spanish - ''not officially supported nor updated regularly''
*\zh Simplified Chinese - ''not officially supported nor updated regularly''

The \[lang] version of floater or panel contains only the minimum values desired to override from the en-us version.
* Generally this includes only a) the matching <code>name=</code> property and b) the translated string/<code>label=</code>.
* However in some cases a separate per-language width may be specified, in order to adjust the size of a particular widget for that language only.

== ..\en-us folder ==

This folder is where the size of floaters, panels, and widgets are defined, as well the text strings in English used by the viewer.

IMPORTANT NOTE: Do not ever change any <code>name=</code> parameters from the existing (English) name. The <code>name=</code> parameter is used to identify each node as expected when called in the viewer code, and to match it to other translations of the same node.

=== Related to localizations ===
A further discussion of the English text strings and how these are manipulated to make translations can be found at [[How to Localize Your World]]

=== Related to colors ===
2008-04-08: For purposes of skinning, it is important to note that there are still 2 XML files at this time which specify a color from within the \en-us folder. In the Release Candidate:
===== 1. \skins\default\xui\en-us\floater_instant_message_ad_hoc.xml=====
* contains a <text_editor /> widget with a <code>bg_readonly_color, bg_writeable_color, text_color,</code> and <code>text_readonly_color</code>:

:A. Widget named "im_history"
<pre>
<text_editor type="string" length="1" bg_readonly_color="ChatHistoryBgColor"
bg_writeable_color="ChatHistoryBgColor"
bottom="-265" embedded_items="false" enabled="false"
follows="left|top|right|bottom" font="SansSerif" height="239" left="5"
max_length="2147483647" mouse_opaque="true" name="im_history"
text_color="ChatHistoryTextColor"
text_readonly_color="ChatHistoryTextColor" width="490" word_wrap="true" />
</pre>

* These 4 values could be set as either a named entry in colors.xml (<code>bg_readonly_color="ChatHistoryBgColor"</code>) or directly as an R,G,B,O value (<code>bg_readonly_color="50, 115, 185, 150"</code>)
** ''Note: you can set a text color to any such'' <text_editor /> ''widget in the XML using the <code>text_color=</code> parameter.''

===== 2. \skins\default\xui\en-us\floater_chat_history.xml=====
* contains a couple <text_editor /> widget with a <code>bg_readonly_color, bg_writeable_color, text_color,</code> and <code>text_readonly_color</code>:

:A. Widget named "Chat History Editor"
<pre>
<text_editor type="string" length="1" bottom="28" embedded_items="false" enabled="false"
follows="left|top|right|bottom" font="SansSerif" height="74" left="5"
max_length="2147483647" mouse_opaque="true" name="Chat History Editor"
text_color="ChatHistoryTextColor" text_readonly_color="ChatHistoryTextColor" width="299"
bg_readonly_color="ChatHistoryBgColor"
bg_writeable_color="ChatHistoryBgColor"
word_wrap="true" />
</pre>

:B. Widget named "Chat History Editor with mute"
<pre>
<text_editor type="string" length="1" bottom="28" embedded_items="false" enabled="false"
follows="left|top|right|bottom" font="SansSerif" height="74" left="5"
max_length="2147483647" mouse_opaque="true"
name="Chat History Editor with mute" text_color="ChatHistoryTextColor"
text_readonly_color="ChatHistoryTextColor" width="300" word_wrap="true"
bg_readonly_color="ChatHistoryBgColor"
bg_writeable_color="ChatHistoryBgColor"/>
</pre>

=== Related to layout ===
The XML files in this folder are also where you describe the configuration or structure of the floaters, panels, etc. See [[Skinning HowTo/XUI XML definition]] for a description of each XML element and its associated attributes.

The most comment parameters are listed here (under construction):

==== Common parameters ====
===== name =====
''Required.'' The XML name of this element. The name must be unique to the floater you are editing.

* IMPORTANT: As noted above, do not re-name XML elements, even for localization. Many of the element names are looked up by the viewer. If the viewer cannot find an element name it expects, it will crash.

String: <code>name="input_first_name"</code>
===== width =====
''Required.'' The width of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the width of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will widen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

* Tip: See the bounding boxes of all XML elements in the viewer: ''Advanced'' menu > UI > Debug Views.

Integer: <code>width="140"</code>
===== height =====
''Required.'' The height of the element, in pixels.

For text, this defines the visible text as well as the clickable area. If the height of a text element is not sufficient to hold the text, the text will be truncated. This is most likely what you will lengthen when localizing the viewer.

For most other elements, this describes the dimensions of an element, such as a button, icon, panel, text_area, etc.

Integer: <code>height="24"</code>
===== left =====
''Optional.'' Sets the position in the x dimension of the ''element's'' left edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container.

Integer: <code> left="6"</code>

===== right =====
''Optional.'' Sets the position in the x dimension of the ''element's'' right edge relative to the container's '''left''' edge. Positive and negative values are accepted. A negative value will set the position relative to the '''right''' edge of the container. Best used to align something to the right.
* For example, given a floater with a width of 500 and a button we wish to right align in the floater, we can set the <code>right</code> to 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.

Integer: <code> right="6"</code>

===== left_delta =====
''Optional. (use instead of <code>left</code>)'' Sets the position in the x dimension of the element's left edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to left-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>left_delta</code> to -106, putting the left edge of Button B 106 pixels to the left of Button A. We use a negative number to move left, and a positive number to move right.

Integer: <code> left_delta="-106"</code>

===== right_delta =====
''Optional. (use instead of <code>right</code>)'' Sets the position in the x dimension of the element's right edge relative to the previous element, or, for the first widget, the left edge of the container. Positive and negative values are accepted. Best used to right-align the current element with the previous element.
* For example, given Button B with a width of 100, a previous Button A with a width of 50 and a distance between elements of 6, we would set the <code>right_delta</code> to 106, putting the left edge of Button B 106 pixels to the left of Button A.

Integer: <code> left_delta="106"</code>

===== bottom =====
''Optional.'' Sets the position in the y dimension of the element's bottom edge relative to the container. Positive and negative values are accepted. For example, given a floater with a height of 300 and a title 20 pixels tall and we want , we can set the <code>bottom</code> to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.

Integer: <code> bottom="(NEED TO DO MATH, LOL)"</code>

===== bottom_delta =====

===== follows =====
''Optional.'' Sets which edge(s) an element follows when the containing element is resized. Specifying all edges results in an element that can dynamically resize itself with its container.

Values: left, top, right, bottom. String multiple values together using pipes.

The following example sets an element to follow both the left and the top, such as a floater's title may be designed:
String: <code>follows="left|top"</code>

===== font =====
''Optional.'' Sets which size and style of the application font to use. The default is SansSerifSmall for <code>text</code> elements and SansSerif for controls (such as <code>check_box</code> and <code>button</code>.

Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace

String: <code>font="SansSerifSmall"</code>

==== icon parameters ====
===== image_name =====
''Required.'' Specifies the name of the image to load for this icon.

String: <code>image_name="myicon.png"</code>

==== button parameters ====
===== scale_image =====
''Optional.'' Specifies whether to scale the button art as its container/floater is resized. As of 1.18.x, all button art has this property set to <code>true</code> where the button size is not equal to 32x128.

Boolean: <code>scale_image="true"</code>

===== label =====
''Optional.'' Label is the text on the button's face. Without a specified label (and no <code>image_overlay</code> declared), your button will be labeled "Button".
String: <code>label="Click Me!" </code>
===== label_selected =====
''Optional.'' Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the <code> label</code> if you omit this property.
String: <code>label_selected="I've been clicked." </code>
===== font =====
(under construction)
===== font_style =====
''Optional.'' Styles the text. Allows multiple style selections. As of 1.18.x, the style options are:

* normal: Apply the default styles of the selected font. (For example, SansSerifBold has a default bold style applied to it.)
* bold: Bolds the text.
* italic: Italicizes the text.
* underline: Underlines the text.
* drop_shadow: Old-style 1px offset of black under the text.
* drop_shadow_soft: New-style 3px offset of blurred shadow under the text.

String: <code>font_style="bold|underline|drop_shadow_soft"</code>

===== halign =====
''Optional.'' Controls horizontal alignment of label on button face. Options are "left", "center" and "right".

===== image_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and enabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square_32x128.tga"</code>

===== image_selected =====
''Optional.'' Overrides the default button art for the selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). By default, the button art is stretched to fit the specified button size.

String: <code>image_selected="btn_square-down_32x128.tga"</code>

===== image_hover_selected =====
''Optional.'' Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-hover_32x128.tga"</code>

===== image_hover_unselected =====
''Optional.'' Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-up-hover_32x128.tga"</code>

===== image_disabled =====
''Optional.'' Overrides the default button art for the disabled button state. Art must be located in the <code>..\skins\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-disabled_32x128.tga"</code>

===== image_disabled_selected =====
''Optional.'' Overrides the default button art for the disabled and selected/down button state. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. By default, the button art is stretched to fit the specified button size.

String: <code>image_unselected="btn_square-down-disabled_32x128.tga"</code>

===== image_overlay =====
''Optional.'' Applies an overlay image to the button. The button art will be sized to fit. As of 1.18.x, these icons should be 16 pixels high at maximum on a standard height 24px button to minimize scaling artifacts. Can be used with or without text. Art must be located in the <code>..\skins\[SKIN]\textures</code> directory within the Second Life application folder (on a Mac, this is inside the package at <code>Contents/MacOS/Resources/skins/[SKIN]/textures</code>). Art must also be named in <code>textures.xml</code> with an assigned UUID. See [[#image_overlay_alignment|image_overlay_alignment]] for alignment options.

String: <code>image_overlay="icn_media-play_16.tga"</code>

===== image_overlay_alignment =====
''Optional.'' Sets the alignment of the <code>image_overlay</code> icon.

Values:
* left: left-aligns the art on the button. This standard is used for new button art with text in the Dazzle branch.
* right: right-aligns the the art on the button.
* center: centers the art on the button. This standard is used for new button art without text in the Dazzle branch.

String: <code>image_overlay_alignment="left"</code>

===== toggle =====
''Optional.'' Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.

Boolean: <code>toggle="false"</code>

==== text_editor parameters ====
<text_editor> creates a multi-line text box
===== max_length =====
===== embedded_items =====
===== font =====
===== word_wrap =====
===== hide_scrollbar =====
===== cursor_color =====
===== text_color =====
===== text_readonly_color =====
===== bg_readonly_color =====
===== bg_writeable_color =====
===== bg_focus_color =====

==== line_editor parameters ====
<line_editor> creates a single line text box
===== label =====
===== max_length =====
===== font =====
===== bevel_style =====
* none
* in
* out
* bright
* line
* texture
===== border_style =====
===== border_thickness =====
===== select_on_focus =====
===== select_all_focus_received =====
===== handle_edit_keys_directly =====
===== cursor_color =====
===== text_color =====
===== text_readonly_color =====
===== bg_readonly_color =====
===== bg_writeable_color =====
===== bg_focus_color =====
===== bottom =====
===== left =====
===== right =====
===== enabled =====
===== follows =====
===== handle_edit_keys_directly =====
===== height =====
===== width =====
===== mouse_opaque =====
===== name =====
===== bottom_delta =====
===== tool_tip =====
===== left_delta =====
===== tab_group =====
===== commit_on_focus_lost =====
===== hidden =====
===== is_unicode =====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== visible =====
===== bg_visible =====
===== border_drop_shadow_visible =====
===== border_visible =====
===== drop_shadow_visible =====
===== h_pad =====
===== halign =====
===== prevalidate =====
===== v_pad =====
===== word_wrap =====
===== control_name =====

==== string parameters ====
===== name =====
===== word_wrap =====

==== tab_container parameters ====
===== enabled =====
===== follows =====
===== height =====
===== left =====
===== right =====
===== top =====
===== bottom =====
===== bottom_delta =====
===== mouse_opaque =====
===== name =====
===== tab_position =====
===== width =====
===== tab_width =====
===== tab_min_width =====
===== tab_max_width =====
===== border =====
===== tab_group =====
===== hide_tabs =====

==== panel parameters ====
===== border =====
===== bottom =====
===== bottom_delta =====
===== top =====
===== left =====
===== left_delta =====
===== right =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== label =====
===== mouse_opaque =====
===== name =====
===== background_opaque =====
===== background_visible =====
===== bevel_style =====
===== bg_alpha_color =====
===== bg_opaque_color =====
===== can_resize =====
===== filename =====
===== tab_group =====
===== default_tab_group =====
===== placeholder =====
===== border_drop_shadow_visible =====
===== border_visible =====
===== border_style =====
===== border_thickness =====
===== border_color =====
===== tool_tip =====
===== title =====
===== auto_resize =====
===== user_resize =====
===== use_bounding_rect =====
===== bg_visible =====
===== can_close =====
===== can_minimize =====
===== left_in_finder =====
===== select =====
===== visible =====

==== text parameters ====
===== type =====
===== length =====
===== width =====
===== height =====
===== bg_visible =====
===== border_drop_shadow_visible =====
===== drop_shadow_visible =====
===== border_visible =====
===== bottom =====
===== bottom_delta =====
===== top =====
===== left =====
===== left_delta =====
===== right =====
===== enabled =====
===== follows =====
===== font =====
===== h_pad =====
===== halign =====
===== v_pad =====
===== valign =====
===== mouse_opaque =====
===== name =====
===== visible =====
===== hidden =====
===== tool_tip =====
===== tab_stop =====
===== initial_value =====
===== label =====
===== radio_style =====
===== word_wrap =====
===== control_name =====
===== font_size =====
===== font_style =====
===== font-style =====
===== bevel_style =====
===== border_style =====
===== border_thickness =====
===== is_unicode =====
===== max_length =====
===== hover =====
===== hover_cursor =====
===== hover_color =====
===== text_color =====
===== align =====
===== text_wrap =====
===== text_enabled_color =====
===== allow_html =====
===== bg_readonly_color =====
===== embedded_items =====
===== hide_border =====
===== hide_scrollbar =====
===== line_spacing =====
===== disabled_color =====

==== message parameters ====
===== name =====

==== message_set parameters ====
===== name =====

==== action parameters ====
===== description =====
===== longdescription =====
===== name =====
===== value =====

==== action_set parameters ====
===== description =====
===== name =====

==== progress_bar parameters ====
===== name =====
===== color =====
===== height =====
===== bottom =====
===== left =====
===== right =====
===== follows =====

==== slider_bar parameters ====
===== bottom =====
===== enabled =====
===== follows =====
===== height =====
===== width =====
===== increment =====
===== initial_val =====
===== left =====
===== max_val =====
===== min_val =====
===== mouse_opaque =====
===== name =====

==== locate parameters ====
===== bottom_delta =====
===== height =====
===== left_delta =====
===== name =====
===== width =====

==== context parameters ====
===== key =====

==== input parameters ====
===== name =====
===== type =====

==== form parameters ====
===== name =====

==== url parameters ====
===== option =====
===== name =====

==== usetemplate parameters ====
===== name =====
===== yestext =====
===== notext =====
===== canceltext =====
===== ignoretext=====

==== notification parameters ====
===== functor =====
===== icon =====
===== name =====
===== label =====
===== type =====
===== priority =====
===== sound =====
===== duration =====

==== ignore parameters ====
===== text =====
===== name =====
===== save_option =====

==== template parameters ====
===== name =====

==== global parameters ====
===== name =====

==== mimetype parameters ====
===== name =====
===== menu =====

==== mimetypes parameters ====
===== name =====

==== scheme parameters ====
===== name =====

==== playtip parameters ====
===== name =====

==== tooltip parameters ====
===== name =====

==== label parameters ====
===== name =====

==== widgetset parameters ====
===== name =====

==== on_check parameters ====
===== function =====
===== userdata =====
===== control =====

==== on_visible parameters ====
===== function =====

==== on_enable parameters ====
===== function =====
===== userdata =====
===== name =====

==== pie_menu parameters ====
===== name =====
===== label =====
===== enabled =====

==== tearoff_menu parameters ====
===== bottom =====
===== enabled =====
===== height =====
===== label =====
===== left =====
===== mouse_opaque =====
===== name =====
===== width =====

==== font_size parameters ====
===== name =====
===== comment =====
===== size =====

==== os parameters ====
===== name =====

==== font parameters ====
===== name =====
===== comment =====
===== font_style =====

= See Also =
=== Other Tutorials ===
* A basic skinning tutorial for recoloring the viewer: [[Skinning_How_To/Skin_the_viewer]]
* [[Skinning HowTo/Increase the transparency of unfocused Chat windows]]
* [[Skinning HowTo/Increase the transparency of Pie Menu]]
* [[Skinning HowTo/Make window backgrounds MORE opaque]]
* [[Skinning How To/Edit a menu]]
* [[Skinning How To/Add custom artwork to the viewer]]
* [[Skinning How To/Add custom fonts to the viewer]]
* [[Skinning How To/Window sizing and resizing]]
* [[Skinning How To/Add 3rd party skins to the skins preferences panel]]

=== Slightly outdated Tutorials ===
* [[Skinning HowTo/Revert 1.20 to a Classic_look]] by McCabe Maxsted
** Note: the final 1.20 viewer lets you switch between Silver and a Classic look automatically in Preferences > Skin. But this is still a great exercise in learning how the skinning architecture works!
* [[Skinning How To/Remove the release keys button]] in viewer 1.20
** Note: the final 1.21 viewer has permanently removed the release keys button, and moved it to the World menu.
* [http://yukikoomegamu.blip.tv/file/810017 Dazzle Tutorial Part 1] by Yukiko Omegamu

=== Helpful Resources ===
* [[Skinning_How_To/Artwork dependencies]]
* [[Skinning_How_To/Legacy_files]]
* [[Skinning_How_To/Hardcoded_limits_in_the_xml_files]]
* [[Skinning_How_To/The_XML_files_and_what_they_do]]
* [[Skinning_How_To/Viewer_crash_causes]]
* [[Skinning_How_To/Fully_commented_colors.xml_file|Fully commented colors.xml file]]

=== Resident Created Skins ===
* see the page [[Skinning - Post Your Skins Here]]
[[Category:Skinning]]