Development tools : XUI editor : Editing an XUI page : Editing the properties of the XUI widgets : CSS support : CSS support for XUI Editor : Applying CSS for XUI Editor
  
Applying CSS for XUI Editor
In IDE, click Windows > Preferences > UDTT > XUI Editor. The following preference page to define the appearance of XUI Editor is displayed.
Preferencepage to define style of XUI Editor
In Style Settings table, all available CSS is listed. There are the following two types of CSS in different font colors in this table:
Blue indicates that the css is designed by technical developer using extension points. Functional developers can not modify or remove CSS. They can use it by checking the checkbox and apply.
Black indicates that css is added by functional developer using add button. Functional developers can add a new CSS file and use it by checking the checkbox. They can also remove the useless CSS file or modify the CSS file path or description content by clicking the Edit button.
After the CSS file is updated, for example, the font-size is changed from 10 pt to 20 pt, you must reopen this Preference page and click the Apply button to activate the change; otherwise, the change is not applied until the IDE is restarted.
To add a new CSS style
Click Add.
This graphic is described in the surrounding text.
Enter the values for the following properties in the Style Settings window:
Name: the unique name of the style. This property is required.
Path: the path of the css file. This property is required. The css file can be local or remote. The local css path is like example: E:/example.css. The Remote css path is like example: http://localhost:9080/SampleWeb/example.css.
Description: the detailed information for the css file. This property is not required.
To apply a CSS
Select the CSS, and then click Apply. The style is applied to the xui file that opens after the CSS is applied.
To delete a CSS
Select the CSS, and then click Delete.
To edit a CSS
Select the CSS, and then click Edit.
To select whether to generate the div block for CSS
Click one of the following options in the "Generate div for css" section:
Always
The div block is generated for all CSS. Code example:
<div style="display:inline-block;" class=" bttDisabledLink">
  <bttdojo:image id="newXuiFile_image" tabIndex="-1"/>
</div>
Never
The div block is not generated for all CSS. Code example:
<bttdojo:image id="newXuiFile_image" class=" bttDisabledLink" tabIndex="-1"/>
Note After you configure whether to generate the div block for CSS, you need to define the structure of your CSS files according to the option that you selected.
Go up to
CSS support for XUI Editor