OA Personalization Framework uses custom style sheets (.xss files) to specify and manage the visual styles of the Look-and-Feel of applications built with OA Framework. One of the goals of custom style sheets is to allow presentation styles, such as fonts and colors, to be separated from the HTML content to which the styles are applied. This enables you to maintain a consistent Look-and-Feel for the application, yet manage the customizations of styles for different target audiences.

The custom style sheets employ XML Style Sheets (XSS) language, a language that is based on Cascading Style Sheets (CSS), but is designed for easy extraction of style information.

Style sheets are associated with a specific Look-and-Feel that you can create or update using the Customizing Look-and-Feel (CLAF) user interface. Creating a custom Look-and-Feel is also referred to as creating a new skin. With the CLAF UI, you do not need to create or modify custom style sheets directly to alter the styles in your Look-and-Feel. Instead, you use the CLAF UI to create or modify a custom Look-and-Feel (LAF) and modify the styles for that custom LAF.

Some of the benefits of the CLAF UI include:

• Applicable over any LAF (other than BLAF and minimal).

• Allows stylesheet, icon and layout (renderer) customization.

• Can define a new skin.

• One Look-and-Feel can extend another Look-and-Feel.

• Supported by UIX.

Although you do not have to work with XSS style sheets directly, the content of this document provides important information about the concepts of XSS that you should know before you start modifying styles in the CLAF UI.

The BLAF (Browser Look-and-Feel) style sheet (blaf.xss) defines Oracle's corporate Look-and-Feel for HTML applications.

Introduction to XSS

An XSS (stylesheet) document consists of a set of style sheets, each of which defines a set of visual styles to be applied to the Look-and-Feel of a web page. Styles control two key aspects of HTML components - color and font. Following is an example of a base style sheet document:

<styleSheetDocument xmlns="http://xmlns.example.com/uix/style" 
 version="2.0">
<!-- Style sheet for our Custom UI -->
<styleSheet>
   <!-- Change the dark color ramp to blue -->
   <style name="DarkBackground">
      <property name="background-color">#00619C</property>
   </style>

   <!-- Override global button text color/font -->
   <style selector=".OraGlobalButtonText">
      <property name="color">black</property>
      <property name="font-weight">bold</property>
      <property name="font-size">80%</property>
      <property name="text-decoration">none</property>
   </style>
</styleSheet>
</styleSheetDocument>

Style Sheets

Each style sheet is defined with a <styleSheet> element. You can designate which end-user environment to apply a style sheet to by assigning attributes, also called "variants", to the <styleSheet> element. XSS supports the following five variants:

• Locale (e.g. locales="ja" or "en_US")

• Reading direction (e.g. direction="rtl" or "ltr")

• Browser (e.g. browsers="Netscape" or "Internet Explorer")

• Browser major version (e.g. versions="4" or "5")

• Operating system (e.g. platforms="Windows" or "Linux")

A style sheet that contains no variant attributes is known as a base style sheet. The following example shows a style sheet that defines styles for Internet Explorer users in the Japanese locale:

<stylesheet locales="JA" browsers="ie">...
</styleSheet>

Styles

Each <styleSheet> element contains one or more <style> elements. In general, a style element is identified by a name and a set of one or more properties as shown below:

<style name="styleA"> 
   <property name="prop1" value="value1" />
   <property name="prop2" />
</style>

A property is identified by a name and a value. It defines a facet for the style (for example, font size for a particular font style) and is a CSS property. Generally, an XSS document would have about 100-250 style definitions. Each XSS style definition can use from 1 to 5 CSS properties. There are about 100 valid CSS properties available in all. These properties are listed in the W3C CSS Reference.

Styles are classified into two types:

• Named styles - which are named bundles of properties that may also include other named styles and is used to define some of the basic units of reusability for the Look-and-Feel.

• Selectors - which include properties, and/or named styles and is used by a specific web bean to control its Look-and-Feel.

Named Styles

Often, many style definitions share common properties, such as a base font or standard background color. In XSS, you can define a named style for such common properties, which can then be referenced by other named styles or selectors in the XSS document. This ability to include a named style allows you to make and maintain simple and concise customizations to the style sheets.

For example, the "DefaultFont" named style below defines the font and font size for two other styles, each of which reference the "DefaultFont" using the <includeStyle> element.

<stylesheet>
   <style name="DefaultFont">
      <property name="font-family">Arial</property>
      <property name="font-size">10pt</property>
   </style>
   <style selector=".OraFieldText">
      <includeStyle name="DefaultFont">
      <property name="color">#000000</property>
   </style>
   <style name="LinkFont">
      <includeStyle name="DefaultFont">
      <property name="color">#663300</property>
   </style>
</styleSheet>

Selectors

A <style> element can also be identified by a selector, which associates the style with a particular web bean or set of web beans in a HTML document. Selectors are defined by a list of properties and can also reference other named styles using the <includeStyle> element. The following example shows the style definition for the HTML OraFieldText element:

<stylesheet>
   <style selector=".OraFieldText">
      <includeStyle name="DefaultFont">
      <property name="color">#000000</property>
   </style>
</styleSheet>

In this example, the selector ".OraFieldText" indicates that the properties defined by this style should be applied to any HTML element with a class attribute value of OraFieldText. The style itself is a black Default Font (Arial 10pt) text.

Reusing Styles and Properties

As mentioned above, you can use the <includeStyle> element in your style definition to include all the properties from another style in your style definition. You can also use the <includeProperty> element to include only a specific property of another style in your style definition. For example, the following styleA is defined by a property called prop1, all the properties from styleB, and a property called prop3, which is derived from property prop2 of styleC.

<style name="styleA">
  <property name="prop1" value="value1" />
  <includeStyle name="styleB" />
  <includeProperty name ="styleC" propertyName="prop2" 
   localPropertyName?="prop3 />
</style>

Global Versus Component-Specific Styles

All styles and selectors can be further grouped as global styles or component-specific styles:

• Global styles - affect more than one component. Examples of global styles include DefaultFont and LightBackground.

• Component-specific styles - affect only one component. An example of a component-specific style is OraContentContainerHeaderText which controls the font properties of the header text of the content container web bean. A set of twenty-one web beans in OA Framework have custom styles defined for them that can be further customized.

Most customizations that you make to a style sheet involve the set of forty-five Global named styles that control about ninety percent of the Look-and-Feel of the application.

Font Styles

One of the most common customizations you may wish to make to the look and feel of the Oracle E-Business Suite user interface is to modify the default font. Although a stylesheet may define many different styles that affect font properties, all these styles refer to a single named style that defines the default font family. As a result, if you wish to change the font family properties for all the styles defined in a style sheet, you need to make only a single style override to the DefaultFontFamily style.

For example, suppose you want to change the default font family for all styles to include only the CSS "serif" font family. In the Customizing Look and Feel UI, you would update your Look-and-Feel by modifying the global DefaultFontFamily style such that the value of its font-family property is changed to serif.

Font Size Styles

Another common customization you may wish to make to the Look-and-Feel of the user interface is to alter the default font size. Almost all the font size styles defined in a style sheet reference a common named style that defines the default font size:

To change the default font size, in the Customizing Look-and-Feel UI , you would modifying the DefaultFont style such that the value of its font-size property is changed to something like 12pt.

Style sheets may also make use of several other font sizes. A smaller font size may be used for in line messages, while a larger font size is used for headers, and so on. Each of the different font sizes may be defined in style sheet, as shown:

Each of these font size definitions includes the DefaultFont, using the <includeStyle> element, and then specifies a point size increment or decrement relative to the default font size. By using this XML Style Sheet Language technique, it is possible for you to change all font sizes defined in blaf.xss with a single override of the DefaultFont style.

Font Size Styles for Microsoft Internet Explorer

The DefaultFont style may be defined twice, once in a generic style sheet as described previously, and once in an environment-specific style sheet. The latter style sheet overrides the default font size specifically for the Microsoft Internet Explorer (IE) browser, to take advantage of some IE-specific functionality.

In particular, IE provides a text zooming feature that allows you to scale text to a larger or smaller size, via the View > Text Size menu. This functionality does not work with sizes specified in point units, but does work with sizes specified using the CSS "absolute size" keywords. Hence, the IE-specific style sheet uses the "x-small" keyword for its default font size, which is rendered as 10 point text by default. The size is scalable, so the other font sizes defined for IE are specified as a percentage of the default font size.

To change the default font size for IE, use the Customize Look-and-Feel UI to update the Look-and-Feel for the IE browser. Modify the DefaultFont style such that the value of its font-size property is changed to something like small.

Color Styles

The Browser Look-and-Feel makes use of four colors that you may potentially want to change:

• Text foreground color - Color used for almost all text. The default is black.

• Text background color - Color used for almost all content. The default is white.

• Core background color - This is the default blue color that appears throughout the user interface. For example, the color is used as the background color for the selected link in the level one tab bar, as well as the background color of the global header and footer. A style sheet may derive a color ramp that includes lighter and darker shades based on the core background color. For example, a Look-and-Feel may have a light blue foreground color for a selected link in a level one tab bar.

• Accent background color - This is the default tan color that appears through the user interface. For example, the color is used as the background color for the unselected links in the level one tab bar. As with the core background color, style sheets may derive a color ramp based on the accent background color. For example, the dark brown foreground color used for hypertext links, as well as the lighter yellow colors used for action button backgrounds may be variations of the accent background color.

As is the case with fonts, style sheets may use the <includeStyle> element to share the set of color-related named styles with other defined styles. So if you wish to change the colors in the user interface, you need only override these four named styles using the Customize Look-and-Feel UI. These four color styles are defined as follows:

The "DarkBackground" and "DarkAccentBackground" styles define the primary colors in the core and accent background color ramps respectively.

If you decide to customize the colors for the user interface, you should try to maintain the contrasts between the text foreground and background colors, as well as between the core and accent colors.

In general, try to select colors from the web safe color palette, as these colors have the most consistent results across the widest range of browsers and platforms. The web safe color palette is a set of 216 colors, where each red, green, or blue component of that color is a multiple of 51 in decimal (0, 51, 102, 153, 204, or 255) or #33 for hexadecimal values (#00, #33, #66, #99, #cc, or #ff).

Also consider, that when you select a new core or accent background color, blaf.xss derives a ramp of lighter and darker shades from that color. As a result, selecting very dark or very light color values may result in less distinction between various darker or lighter shades in the color ramp.

CSS Style Lookup

You can use an interactive user interface called the Item Style and Style Type Selection page to preview a specific item style with a selected CSS Style applied to it. You should use this feature to simulate the Look-and-Feel of an item style before making the actual CSS style change to your pages with OA Personalization Framework.

To access the Item Style and Style Type Selection page:

1. Sign on to the Oracle E-Business Suite and select the System Administration responsibility.

2. Use the Oracle E-Business Suite Menus form to add the function FWK_CSS_LOOKUP to your System Administration menu.

To preview an Item Style with different CSS styles applied to it:

1. Sign on to Oracle E-Business Suite and select the System Administration responsibility.

2. Select FWK CSS Style Lookup from the menu.

3. In the Item Style and Style Type Selection page, there is a required Item Style poplist and a Style Type poplist. Use the Item Style poplist to select an item style for which a CSS Style may be applied. Use the Style Type poplist to select a CSS Style to apply. The Style Type poplist lets you select from all the CSS styles that have a selector defined in custom.xss. If you select All Styles, the selected item renders with all the available CSS styles applied.

4. Choose Go to apply the CSS style(s). The results are displayed in a table with two columns. The first column lists the name of the CSS style that has been applied and the second column renders the item style with the CSS style applied to it.