Setting CSS style to widgets

Before you begin

You need to prepare a CSS file. In fact, some default setting files are automatically generated as the creation of a XUI web project. You can refer to Supported styles for different widgets and CSS sample resources located in <BTT Project>\WebContent\js\dijit\themes. <BTT Project> is the created XUI Web Project. For more information about CSS, please refer to http://www.w3schools.com/css/default.asp.

Procedure

Firstly, import the CSS files to the first XUI file index.xui, then set the css style to the specific widgets. To import CSS files to edit the appearance of the widgets on a user interface, do the following steps:

  1. Open index.xui file. Click the blanket area in the XUI editor area.
  2. In the Properties view, click the Add icon The Add icon that is in the CSS Files panel.

    The Please select a CSS file from your workspace window is opened.
  3. In the Please select a CSS file from you workspace window, select a CSS file. Click OK. One XUI page can link to more then one CSS files.

After importing CSS files into index.xui, set styles to specific widgets.

  1. Open an XUI file and select a widget.
  2. Assign CSS styles to it from the Style tab. The styles are defined in the CSS files.

Results

Finally, the CSS styles would be displayed on the XUI editor. And the CSS file imported will be generated into runtime JSP page.