About Custom Style Sheets

The simplest customization you can implement for a look and feel is custom style definitions, which you provide via a custom style sheet.

A custom style sheet extends the styles defined in the style sheet for a parent look and feel. In ADF UIX, a custom style sheet document is an XML style sheet language document (.xss file) that contains the style definitions for any number of particular user environments. These customized style definitions are automatically merged on top of the parent style sheet that the custom style sheet is extending.

As of this release, a custom style sheet is no longer required to explicitly import the parent look and feel's style sheet. For example, when creating a custom style sheet that extends Simple Look and Feel (i.e., simple-desktop.xss), you do not have to import simple-desktop.xss. Instead, you specify the parent look and feel you are extending in the look and feel configuration file for the custom look and feel.

The main UIX elements that you would use when creating a custom style sheet document are:

<styleSheetDocument> - The root element in the .xss style sheet document. The UIX style namespace is http://xmlns.oracle.com/uix/style.
<styleSheet> - Defines a set of styles which are applied to a particular user environment. Any number of <styleSheet> elements can be defined. The attributes of <styleSheet> specify the user environment to which the style definitions should be applied. For example <styleSheet browsers="netscape"></styleSheet> defines is a set of styles that apply only if the user's browser is Netscape. If the element has no attributes, then the styles apply to all user environments.
<style> - Defines a group of style properties that are identified by either a selector or a name. Selector-based styles (e.g., <style selector=".OraInstructionText"> ) are included in any CSS style sheets that are generated from the .xss document. Name-based styles (e.g., <style name="DefaultFont"> ) do not appear in generated CSS style sheets. Name-based styles are used to define common properties that are shared among multiple selector-based styles. Selector-based styles can reference a name-based style using the <includeStyle> or <includeProperty> child element. This simplifies the customization process, as changes to a single name-based style are automatically propagated to all selector-based styles that reference it.

For more details about the above elements and other elements used in defining style sheet documents, see " UIX Styles" of the UIX Element Reference. For details about customizable styles and icons, see the UIX Customization Reference.

UIX provides two parent style sheets, base-desktop.xss and simple-desktop.xss, which you can extend to provide custom style sheets for your applications. Both parent style sheets use style class names to associate CSS styles with generated HTML content. For example, the style class OraGlobalHeaderSelected (i.e., the style for the selected item in the globalHeader component) might generate content similar to the following:


<td class="OraGlobalHeaderSelected">
  <a href="...">The Selected Item</a>
</td>

In the parent style sheet, the OraGlobalHeaderSelected style might be defined as:


<style selector=".OraGlobalHeaderSelected">
  <property name="font-family">Arial,Helvetica,Geneva,sans-serif</property>
  <property name="font-size">10pt</property>
  <property name="font-weight">bold</property>
  <property name="background-color">#336699</property>
  <property name="color">#ffffff</property>
  <property name="text-decoration">none</property>
</style>

A custom style sheet might change the font color and size, and background color for the selected item in a globalHeader, as shown in the following:


<style selector=".OraGlobalHeaderSelected">
  <property name="font-size">16pt</property>
  <property name="background-color">red</property>
  <property name="color">blue</property>
</style>