Skinning HowTo/XUI Buttons, Sliders, and Spinners

XUI Reference

• Basics
• Common attributes
• Menus
• Containers
• Buttons, Sliders, and Spinners
• Selection Widgets
• Text Entry Widgets
• Other Widgets

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.

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

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

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

draw_track

Optional.

use_triangle

Optional.

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

draw_track

Optional.

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

initial_val

Optional.

label_width

Optional.

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

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.

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

hidden

Optional.