Development tools : XUI editor : Editing an XUI page : Editing the properties of the XUI widgets : CSS support : CSS support for XUI Editor : Defining a CSS file for XUI editor (Option 1)
  
Defining a CSS file for XUI editor (Option 1)
XUI editor CSS format (Option 1) is applying CSS standard, plus naming rules to match them with widgets, here is an example of the naming rule:
button {
  width: 150px;
 height: 29px;
}
In this example, "button" is the name of the widget, and this style will be applied to all the Button widgets. Technical developers can know the name of widget from the widget extension point. Functional developers can know the name by following way:
1 Open the xui file that contains the widget using text editor.
2 Check the attribute of the widget name like following code:
<widget name="Button" id="submit" text="Submit">
Note The name of the widget used in CSS file is case insensitive.
Pre-defined styles
UDTT provides one pre-defined style; it is called “claro”. The CSS style is defined as follows:
default {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 0.688em;
}
Supported styles
The supported style elements are limited to elements layout.
font-family
The font name of the text used in the widget.
font-size
The font size of the text used in the widget. The font size support “px”, ”em” and “pt”.
font-weight
The weight of the text used in the widgets. The supported value is: bold.
font-style
The style of the text used in the widget, supported value: italic.
width and height
The default size of the widget. They only can be defined by “px”. They cannot be defined in default level style.
Go up to
CSS support for XUI Editor