Skinning HowTo/Common XUI attributes
This pages describes some of the most frequently used XML attributes. The XUI elements that use them can be found at:
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: 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"