Skinning HowTo/XUI Other Widgets
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 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: name="input_first_name"
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: width="140"
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: height="24"
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: left="6"
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
rightto 490 -- this puts the right edge of the button 10 pixels away from the right border of the floater.
Integer: right="6"
left_delta
Optional. (use instead of left) 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
left_deltato -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: left_delta="-106"
right_delta
Optional. (use instead of right) 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
right_deltato 106, putting the left edge of Button B 106 pixels to the left of Button A.
Integer: left_delta="106"
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 bottom to (NEED TO DO MATH, LOL) -- putting the bottom edge of the title 40 pixels away from the top border of the floater.
Integer: bottom="(NEED TO DO MATH, LOL)"
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: follows="left|top"
font
Optional. Sets which size and style of the application font to use. The default is SansSerifSmall for text elements and SansSerif for controls (such as check_box and button.
Values: SansSerifSmall, SansSerif, SansSerifBig, SansSerifBold, Monospace
String: font="SansSerifSmall"
Widget Parameters
floater parameters
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_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
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.
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.
Optional.
bottom
left
drop_shadow
follows
height
width
mouse_opaque
opaque
name
enabled
Optional.
tear_off
Optional.
name
label
Optional.
enabled
Optional.
mimetypes parameters
name
icon parameters
image_name
Required. Specifies the name of the image to load for this icon.
String: image_name="myicon.png"
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.
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 true where the button size is not equal to 32x128.
Boolean: scale_image="true"
label
Optional. Label is the text on the button's face. Without a specified label (and no image_overlay declared), your button will be labeled "Button".
String: label="Click Me!"
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."
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: font_style="bold|underline|drop_shadow_soft"
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 ..\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.
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"
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.
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.
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
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.
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.
string parameters
name
word_wrap
Optional.
tab_container parameters
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.
text parameters
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.
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.
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
Optional.