To edit the appearance of the widgets on a user interface, you need to prepare a CSS file. You can use CSS samples that are in <UDTT Project>\WebContent\CSS\dijit and <UDTT Project>\WebContent\js\dijit\themes. For more information about widget styles, see Setting CSS style to widgets.
You must first add all the CSS files you use to the first XUI file of your project, index.xui and then add each of them to the corresponding XUI file.
To import CSS files, do the following steps:
1 Open index.xui file and click the blanket area in the Editing area.
2 In the Properties view, click the Add icon in the CSS Files panel.
The Please select a CSS file from your workspace window opens.
3 In the Please select a CSS file from you workspace window, select a CSS file. Click OK. Repeat this step to add all the CSS files your project needs.
4 Add the corresponding CSS file to a specific XUI file as the previous steps. One XUI page can link to more then one CSS files.
After importing CSS files into your project, set styles to specific widgets. You could select multiple CSS classes for one widget.
5 Click the widget you want to set CSS styles.
6 In the Style view, check the CSS style you want to use. Its details are shown on the right Details section.
The Current Style field is editable and the child CSS elements can be shown in the Details section. To use the child element, you can input the name of child style into the Current Style field manually. For the XUI Editor, the visual effect of the iconClass is not displayed in real-time.
Result
Finally, the CSS styles would be displayed on the XUI editor. And the CSS file imported will be generated into runtime JSP page.
