Creating a Custom Style Sheet

Note: You do not have to import the style sheet of the parent look and feel you are extending. The styles defined in a custom style sheet are automatically merged on top of the parent style sheet at runtime.

To create a custom style sheet:

Use a text editor to create a file with the file extension .xss . You can use any name for the file but it must have the .xss extension, e.g., mycompany-desktop.xss. Insert <?xml version='1.0'?> at the top of the document. Save the file.
Copy this file into the default location for UIX style sheets of your project:
<jdev_install>/jdev/mywork/<Workspace_dir> /<Project_dir>/public_html/cabo/styles.

Note that the style sheet can also be placed under the web application's context root, or on the web application's class path (if you prefer to package the custom look and feel in a JAR file).
In the Application Navigator, select the project that will contain the custom style sheet.
From the main menu, choose File | O pen to open the custom style sheet file in the Code Editor.
The XML document appears in the Code Editor.
Insert the root element <styleSheetDocument> using the http://xmlns.oracle.com/uix/ui/style namespace. Then specify the following attributes:
- documentVersion - Specify a unique string identifier that can be used used to identify a particular version of this document. Note that this value may be included in the names of generated style sheet files, so make sure this is short and suitable for use in a file system.
- version - Specify the version of the XML Style Sheet language used by this document. The version in this release is "2.0".
Insert the <styleSheet> section, specifying the following attributes:
- browsers - Specify the browsers to which this style sheet applies. Use whitespace to separate each browser name in the list. If no value is specified, the style sheet applies to all browsers. Supported values are:
  - netscape - Netscape Navigator
  - ie - For Internet Explorer
  - mozilla - For Mozilla browser
  - gecko - For gecko family of browsers
  - ice - For ICE HTML library
- direction - Specify the reading direction to which this style sheet applies. If no value is specified, the style sheet applies to all directions. Supported values are:
  - ltr - For left-to-right languages
  - rtl - For right-to-left languages
- locales - Specify the locales to which this style sheet applies. Use whitespace to separate each locale in the list. If no value is specified, the style sheet applies to all locales. Each locale is specified using a language code or a language_country code combination. For language codes, use the two letter lower case language codes as defined by ISO-639 (e.g., "en"). For country codes, use the two letter uppercase ISO-3166 country codes (e.g., "US"). A country code can be appended to a language code to limit the scope of the style sheet. When a country code is specified, use the underscore character as a separator (i.e., "en_US").
- platforms - Specify the client operating systems to which this style sheet applies. Use whitespace to separate each platform in the list. If no value is specified, the style sheet applies to all client platforms. Supported values are:
  - windows - For Microsoft Windows: NT, 2000, 98, 95, etc.
  - macos - For Apple Macintosh
  - unix - For Solaris, Linux, etc.
  - solaris - For Solaris only
  - linux - For Linux only
- versions - Specify the major version numbers of the browsers to which this style sheet applies. Use whitespace to separate each unsigned integer in the list. If no value is specified, the style sheet applies to all browser versions.
In the <styleSheet> section, insert the <style> element specifying the following attributes and child elements:
- name - Specify the name of the style, e.g., ABCBannerLink, TabBarItem, etc. Properties of named styles can be included in other styles via the <includeStyle> or <includeProperty> elements. Styles which define a name but not a selector do not appear in generated CSS style sheets.
- selector - Specify the selector for this style, e.g., .ABCStart, .OraGlobalButtonText, etc. Any valid CSS selector may be specified. Styles which define a selector appear in generated CSS style sheets.
- <property> - To define a single style property, include this child element with this attribute:
  - name - (Required) Specify the name of the property that is being defined. Any CSS property name (e.g., font-size, color, etc.) may be specified.
- <compound-property> - To define a list-based property which can contain multiple values, add this element with these attributes and child elements:
  - name - (Required) Specify the name of the compound property that is being defined. Although any CSS property name can be specified, the <compound-property> element is typically only used for properties that consist of a list of multiple values, such as border or font.
  - <includeValue> element - Use this element to include a single value into a compound property.
    - propertyName - (Required) Specify the name of the property to include, e.g., <includeValue propertyName="color"/>.
  - <value> element - Use this element to define a single value in a compound property. Each <value> element contains a string that specifies one of the values of the compound property
- <includeStyle> - Use this element to include all of the properties of one style into another style. The style to include can be referenced either by its name or selector. When including a style, all of the properties from the included style are defined within the including style. The only difference between <includeStyle> and <includeProperty> is that <includeStyle> includes all properties of the referenced style, whereas <includeProperty> includes only a single property. The attributes for <includeStyle> are:
  - name - Specify the name of the style to include, e.g., DefaultFont.
  - selector - Specify the selector of the style to include, e.g., .OraGlobalButtonText.
- <includeProperty> - To include one property from a style into another style. The only difference between <includeStyle> and <includeProperty> is that <includeStyle> includes all properties of the referenced style, whereas <includeProperty> includes only a single property. The most common use for the <includeProperty> element is to allow a color value from one style to be reused under a different name in another style. The attributes for <includeProperty> are:
  - localPropertyName - Specify the name of the property as it should appear within the including style. This attribute allows the name of the property to be modified locally while maintaining the remote value. For example, a style can use the background color of another style as its own foreground color by including the "background-color" property and setting the localPropertyName attribute to "color".
Repeat step 7 to add the desired number of <style> elements.
Repeat steps 6 and 7 to add the desired number of <styleSheet> sections.

For more details about the above elements used in defining style sheet documents, see "UIX Styles" of the UIX Element Reference. For complete information about using UIX styles, and customizing and personalizing look and feels, refer to the ADF UIX Developer's Guide.

Examples

The following example shows an XML style sheet document that adds two custom styles to all user environments, and one custom style that is applied only to user environments where the language reading direction is from right to left.


Example 1:

<?xml version="1.0" encoding="windows-1252"?>

<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style"
                    version="2.0">

  <styleSheet>

    <!-- Make globalHeader links center-aligned -->
    <style selector=".OraGlobalHeaderBody">
      <property name="text-align">center</property>
    </style>

    <!-- Adjust the header padding and text size/weight -->
    <style selector=".OraContentContainerHeader">
      <includeStyle name="MediumFont"/>
      <property name="font-weight">bold</property>
      <property name="padding-top">2px</property>
    </style>

</styleSheet>

  <styleSheet direction="rtl">

    <style selector=".p_OraSideBar">
      <property name="margin">0px 0px 0px 5px</property>
    </style>

  </styleSheet>

</styleSheetDocument>

The following shows a custom style sheet that modifies the default font size:


Example 2:

<?xml version="1.0" encoding="windows-1252"?>

<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style">
  
  <!-- A custom style sheet which overrides DefaultFont -->
  
  <styleSheet>
    <style name="DefaultFont">
      <property name="font-family">Courier</property>
      <property name="font-size">14pt</property>
    </style>
  </styleSheet>
  
</styleSheetDocument>