Skinning HowTo/XUI Buttons, Sliders, and Spinners

== Overview ==
This page describes the XML attributes for the buttons, sliders, and spinners. These are some of the XML elements and attributes used within the floaters, panels, and so forth, that make up the viewer user interface. They are used by the XUI files in the \skins\default\xui folders. 
Many XUI elements share the same attributes. Rather than repeatedly describing them, we just list their names here and describe them at Skinning HowTo/Common XUI attributes.
== button ==
*Class LLButton : LLUICtrl : LLView
*In source file llui/llbutton.cpp
*Used by floater, panel, layout_stack, layout_panel, and form.
<xml> <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_button" tab_stop="false" title="button" width="250">
 <button bottom="20" enabled="true" font="SansSerif" halign="center" height="20"
 image_disabled="button_disabled_32x128.tga"
 image_disabled_selected="button_disabled_32x128.tga"
 image_selected="button_enabled_selected_32x128.tga"
 image_unselected="button_enabled_32x128.tga" label="button label"
 label_selected="button label" left="20" mouse_opaque="true" name="button"
 scale_image="true" tab_stop="true" width="200" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: label, font, font_size, font_style, halign
*Others: sound_flags, tab_group
====Special attributes====
===== 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 true where the button size is not equal to 32x128. 
Boolean: scale_image="true"
===== label_selected =====
Optional. Label is the text on the button's face when pressed into an 'on' state. Your button will inherit the label if you omit this property.
String: label_selected="I've been clicked." 
===== image_unselected =====
Optional. Overrides the default button art for the unselected/up and enabled button state. Art must be located in the ..\skins\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size. 
String: image_unselected="btn_square_32x128.tga"
===== image_selected =====
Optional. Overrides the default button art for the selected/down button state. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/textures). By default, the button art is stretched to fit the specified button size. 
String: image_selected="btn_square-down_32x128.tga"
===== image_hover_selected =====
Optional. Overrides the default button art for the selected/down and mouseover/hover button state. Art must be located in the ..\skins\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size. 
String: image_unselected="btn_square-down-hover_32x128.tga"
===== image_hover_unselected =====
Optional. Overrides the default button art for the unselected/up and mouseover/hover button state. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size.
String: image_unselected="btn_square-up-hover_32x128.tga"
===== image_disabled =====
Optional. Overrides the default button art for the disabled button state. Art must be located in the ..\skins\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size. 
String: image_unselected="btn_square-disabled_32x128.tga"
===== image_disabled_selected =====
Optional. Overrides the default button art for the disabled and selected/down button state. Art must be located in the ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/textures). Art must also be named in textures.xml with an assigned UUID. By default, the button art is stretched to fit the specified button size. 
String: image_unselected="btn_square-down-disabled_32x128.tga"
===== 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 ..\skins\[SKIN]\textures directory within the Second Life application folder (on a Mac, this is inside the package at Contents/MacOS/Resources/skins/[SKIN]/textures). Art must also be named in textures.xml with an assigned UUID. See image_overlay_alignment for alignment options. 
If image is smaller than the button/object it is being overlaid onto, using the attribute picture_style="true" will help stop the image from stretching or from text being shown over it. 
String: image_overlay="icn_media-play_16.tga"
===== image_overlay_alignment =====
Optional. Sets the alignment of the image_overlay 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: image_overlay_alignment="left"
===== toggle =====
Optional. Determines whether the button is a toggle button or not. The Fly/Stop Flying button is a toggle button, for example.
Boolean: toggle="false"
===== pad_right =====
Optional.
===== hidden =====
Optional.
===== tab_stop =====
Optional.
===== help_url =====
Optional.
===== auto_resize =====
Optional.
===== user_resize =====
Optional.
===== default =====
Optional.
===== index =====
Optional.
===== text =====
Optional.
===== ignore =====
Optional.
===== label_width =====
Optional.
===== image =====
Optional.
== flyout_button ==
*Class LLFlyoutButton : LLComboBox : LLUICtrl : LLView
*In source file llui/llcombobox.cpp
*Used by floater, panel, and layout_stack.
*Can contain flyout_button_item.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="551" min_height="80" min_width="240" mouse_opaque="true"
 name="example_flyout_button" tab_stop="false" title="flyout_button"
 width="240">
 <flyout_button allow_text_entry="true" bottom="20" enabled="true" height="20" left="10"
 max_chars="30" mouse_opaque="true" name="flyout_button" tab_stop="true"
 width="223" label="flyout_button label" font="SansSerif">
 <flyout_button_item name="item 1" value="value 1">flyout_button_item 1</flyout_button_item>
 <flyout_button_item name="item 2" value="value 2">flyout_button_item 2</flyout_button_item>
 <flyout_button_item name="item 3" value="value 3">flyout_button_item 3</flyout_button_item>
 </flyout_button>
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: label, font, font_size, font_style, halign
====Special attributes====
===== label_selected =====
Optional.
===== list_position =====
Optional.
===== auto_resize =====
Optional.
===== user_resize =====
Optional.
== flyout_button_item ==
*member of LLFlyoutButton : LLComboBox : LLUICtrl : LLView
*In source file llui/llcombobox.cpp
*Used by flyout_button.
===== value =====
===== name =====
== joystick_turn ==
*Class LLJoystickAgentTurn : LLJoystick : LLButton : LLUICtrl : LLView
*In source file newview/lljoystickbutton.cpp
*Used by floater.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="100" left="550" min_height="100" min_width="150" mouse_opaque="true"
 name="example_joystick_turn" tab_stop="false" title="joystick_turn"
 width="150">
 <joystick_turn bottom="20" enabled="true" font="SansSerif" halign="center" height="50"
 image_selected="move_backward_in.tga"
 image_unselected="move_backward_out.tga"
 image_disabled="button_disabled_32x128.tga"
 image_disabled_selected="button_disabled_32x128.tga"
 left="20" mouse_opaque="true" name="joystick_turn" quadrant="origin"
 scale_image="true" tab_stop="true" width="50" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: halign
====Special attributes====
===== image_selected =====
===== image_unselected =====
===== quadrant =====
===== scale_image =====
==joystick_slide ==
NOTE: This widget is deprecated and not used in Viewer2.
*Class LLJoystickAgentSlide : LLJoystick : LLButton : LLUICtrl : LLView
*In source file newview/lljoystickbutton.cpp
*Used by floater.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="100" left="550" min_height="100" min_width="150" mouse_opaque="true"
 name="example_joystick_slide" tab_stop="false" title="joystick_slide"
 width="150">
 <joystick_slide bottom="20" enabled="true" font="SansSerif" halign="center" height="50"
 image_selected="UIImgBtnSlideLeftInUUID"
 image_unselected="UIImgBtnSlideLeftOutUUID"
 image_disabled="button_disabled_32x128.tga"
 image_disabled_selected="button_disabled_32x128.tga"
 left="20" mouse_opaque="true" name="joystick_slide" quadrant="origin"
 scale_image="true" tab_stop="true" width="50" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: halign
====Special attributes====
===== image_selected =====
===== image_unselected =====
===== quadrant =====
===== scale_image =====
== multi_slider ==
*Class LLMultiSliderCtrl : LLUICtrl : LLView
*In source file llui/llmultisliderctrl.cpp
*Used by panel.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_multi_slider" tab_stop="false" title="multi_slider"
 width="250">
 <multi_slider bottom="20" can_edit_text="false" decimal_digits="3" enabled="true"
 height="20" increment="0.1" initial_val="0" label="multi_slider label"
 left="20" max_val="1" min_val="0" mouse_opaque="true" name="multi_slider"
 show_text="true" tab_stop="true" value="0" width="200" use_triangle="true" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: label, font, font_size, font_style
====Special attributes====
===== allow_overlap =====
===== can_edit_text =====
===== decimal_digits =====
===== draw_track =====
Optional.
===== increment =====
===== initial_val =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== show_text =====
===== use_triangle =====
Optional.
===== value =====
== multi_slider_bar ==
NOTE: This widget is deprecated and not used in Viewer 2.
*Class LLMultiSlider : LLUICtrl : LLView
*In source file llui/llmultislider.cpp
*Used by panel.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_multi_slider_bar" tab_stop="false" title="multi_slider_bar"
 width="250">
 <multi_slider_bar bottom="20" enabled="true" height="40" increment="0.1" initial_val="0"
 left="20" max_val="1" min_val="0" mouse_opaque="true"
 name="multi_slider_bar" tab_stop="true" width="200" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
====Special attributes====
===== allow_overlap =====
===== draw_track =====
Optional.
===== increment =====
===== initial_val =====
===== max_sliders =====
===== max_val =====
===== min_val =====
===== use_triangle =====
Optional.
== slider ==
*Class LLSliderCtrl : LLUICtrl : LLView
*In source file llui/llsliderctrl.cpp
*Used by floater and panel.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_slider" tab_stop="false" title="slider" width="250">
 <slider bottom="20" can_edit_text="false" decimal_digits="3" enabled="true"
 height="20" increment="0.1" initial_val="0" label="slider label" left="20"
 max_val="1" min_val="0" mouse_opaque="true" name="slider" show_text="true"
 tab_stop="true" value="0" volume="false" width="200" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: label, font, font_size, font_style
====Special attributes====
===== increment =====
===== initial_val =====
Optional.
===== label_width =====
Optional.
===== max_val =====
===== min_val =====
===== show_text =====
Optional.
===== decimal_digits =====
Optional.
===== can_edit_text =====
Optional.
===== value =====
Optional.
===== volume =====
Optional.
===== edit_text =====
Optional.
== slider_bar ==
*Class LLSlider : LLUICtrl : LLView
*In source file llui/llslider.cpp
*Used by panel.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_slider_bar" tab_stop="false" title="slider_bar" width="250">
 <slider_bar bottom="20" enabled="true" height="10" increment="0.1" initial_val="0"
 left="20" max_val="1" min_val="0" mouse_opaque="true" name="slider_bar"
 tab_stop="true" volume="false" width="200" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
====Special attributes====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
== spinner ==
*Class LLSpinCtrl : LLUICtrl : LLView
*In source file llui/llspinctrl.cpp
*Used by floater and panel.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_spinner" tab_stop="false" title="spinner" width="250">
 <spinner bottom="20" decimal_digits="3" enabled="true" height="20" increment="0.1"
 initial_val="0" label="spinner label" label_width="40" left="20" max_val="1"
 min_val="0" mouse_opaque="true" name="spinner" tab_stop="true" width="200" />
 </floater></xml>
===Common attributes===
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
*Text: label, font, font_size, font_style
===Special attributes===
==== increment ====
Optional. Sets the amount added or subtracted from the spinner value each time the up or down button is clicked, respectively. Valid values from 1 to (NEED MAX INCREMENT VALUE).
Integer: increment="5"
 
==== decimal_digits ====
Optional. Sets number of digits after the decimal point. Valid values from 0 to (NEED MAX DECIMAL DIGITS).
Integer: decimal_digits="2"
==== initial_value ====
Optional.
==== max_val ====
==== min_val ====
Optional.
==== label_width ====
Optional.
==== can_edit_text ====
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.
==== h_pad ====
Optional.
==== v_pad ====
Optional.
== volume_slider ==
NOTE: This widget is deprecated and no used in Viewer2.
*Class LLSlider : LLUICtrl : LLView
*In source file llui/llslider.cpp
*Used by floater and panel.
<xml><?xml version="1.0" encoding="utf-8" standalone="yes" ?>
 <floater bottom="400" can_close="true" can_drag_on_left="false" can_minimize="true"
 can_resize="true" can_tear_off="false" enabled="true" follows="left|top"
 height="80" left="550" min_height="80" min_width="250" mouse_opaque="true"
 name="example_volume_slider" tab_stop="false" title="volume_slider"
 width="250">
 <volume_slider bottom="20" enabled="true" height="20" increment="0.1" initial_val="0"
 left="20" max_val="1" min_val="0" mouse_opaque="true" name="slider_bar"
 tab_stop="true" volume="true" width="200" />
 </floater></xml>
====Common attributes====
*General: name, mouse_opaque, tool_tip, control_name, enabled, visible, use_bounding_rect, default_tab_group
*Positioning: width, height, left, right, left_delta, bottom, top, bottom_delta, follows, rect_control
====Special attributes====
===== increment =====
===== initial_val =====
===== max_val =====
===== min_val =====
===== hidden =====
Optional.