Personalizing OA Framework Applications

This chapter covers the following topics:

Branding

As described in the Browser Look-And-Feel (BLAF) guidelines for branding on the Oracle Technology Network (OTN), every OA Framework page reserves the upper left-hand corner for either of the following:

All OA Framework pages must provide basic branding support. In-context branding may be used in select cases.

Basic (Non-Contextual) Branding

Basic branding includes the display of corporate ("Oracle") and product brand names. It displays the product branding as text drawn from one of several possible sources. The global buttons are displayed as text links only. It supports a regular layout style, as in the following example.

Basic branding (corresponds to BLAF "Regular" layout)

the picture is described in the document text

Personalizing the Corporate Branding Image

Every page contains a corporateBranding page element that has an Oracle corporate image file assigned to it. That image file is /OA_MEDIA/FNDSSCORP.gif, which contains the Oracle corporate image. You can change the corporate branding image that appears on your pages in one of two ways:

Warning: Do not attempt to globally override the corporate branding image by renaming your custom corporate branding image file as /OA_MEDIA/FNDSSCORP.gif. This results in distortion of your corporate image. When you render a page, OA Framework checks whether a value is set for the profile option Corporate Branding Image for Oracle Applications. If no value is set, it renders /OA_MEDIA/FNDSSCORP.gif as the corporate branding image and sets the image area size to 134 x 23 (which is the actual size of the image in FNDSSCORP.gif). If this profile option has a value set, it renders the content of the specified image file without specifying an image area size since the image size is as yet, unknown.

Personalizing Product Branding

The product branding is derived in one of three possible ways:

In-Context Branding

The in-context brand includes the corporate and product brand images. Additionally, contextual information renders below the corporate and product information, as shown in the following example.

Example of In-Context Branding

the picture is described in the document text

Note: This style of branding is intended to be used only for cases where the user makes a contextual selection when starting work that remains unchanged for the life of the application or task.

To personalize in-context branding, create an administrative-level personalization for the page that sets the Text property on the productBranding: formattedText page element to the product name you want to display. Then set the Text property on the inContextBranding: formattedText page element to the context you wish to display. For example, the Text property of the inContextBranding: formattedText page element displayed in the preceding example is "Customer <b>Sun Microsystems - Menlo Park</b>".

Customizing Look-and-Feel (CLAF)

Oracle E-Business Suite applications are currently shipped with Oracle’s corporate Browser Look-and-Feel (BLAF), which supplies a rich set of components for web-based applications. Although OA Personalization Framework provides you with the ability to change the look of a page by changing user interface (UI) component properties, adding UI components, and so on, it does not allow you to create and apply an entirely new Look-and-Feel to an application.

The Customizing Look-and-Feel (CLAF) feature addresses this issue by providing a self-service based UI to modify the Look-and-Feel of an application. The feature enhances OA Personalization Framework by allowing personalization administrators to:

UIX currently provides OA Framework with the following LAFs, which can be used directly in web applications:

You can build custom LAFs by extending Base LAF, Simple LAF, or another custom LAF.

Note: You cannot extend BLAF or MLAF.

Infrastructure of a Look-and-Feel

A Look-and-Feel is defined by three major components: style sheets (XSS), icons, and renderers.

Style Sheets

A style sheet document (.xss extension) lists the styles for the Look-and-Feel. Styles control the color and font of HTML components. For a complete discussion of style sheets and styles, please refer to the Style Sheets topic in this chapter. Style sheets are located in /OA_HTML/cabo/styles.

See also the list of global styles provided by UIX later in this chapter.

Icons

Some web beans are composed of one or more icons that control the web bean's Look-and-Feel. Icons are identified by a name. For example, the Hide/Show web bean consists of the "disclosed" icon. Icons are present in the LAF configuration file. For additional information, refer to the Icons topic in this chapter.

Renderers

A renderer controls how a web bean lays out its children and generates HTML. If the layout of the LAF you wish to create is different from the standard layout provided by Oracle, you will have to write new renderers for those components that differ in their layout. You define renderers declaratively as templates (.uit extension). Following is an example template definition for a sidebar component:

<!-- Template used by sample LAF for side bar. -->
<templateDefinition
      xmlns="http://xmlns.oracle.com/uix/ui"
      xmlns:ui="http://xmlns.oracle.com/uix/ui"
      xmlns:html="http://www.w3.org/TR/REC-html40"
      targetNamespace="http://www.example.org/demo/templates"
      localName="sidebar">
  <content>
  …
  </content>
</templateDefinition>

You should have one template renderer for each component that has a custom layout. The section between the <content> and </content> tags contains the desired UI layout and any references to other UI components. The UI layout is represented in uiXML and HTML.

Important: You can use a template renderer to customize the layout of some - but not all - components. Following is a list of the components with customizable layouts:

Look-and-Feel Extension (Custom Skins)

When you define a new Look-and-Feel, you can also alter the layout of its inherited Look-and-Feel, thereby creating what is called a custom skin. To complete the creation of a custom skin, you must register any custom renderers, custom facet renders, and custom icons for that skin, on your custom Look-and-Feel using the Customizing Look-and-Feel UI.

Note: A facet is an optimized variation of a LAF, usually created for a specific output medium. For example, a printable version of a page can be implemented as a facet by excluding superfluous navigation and personalization controls that are not necessary for printed output.

OA Framework will provide a set of skins or web page layout themes that extend the base and simple LAFs from UIX. You can use these skins to change the way Oracle E-Business Suite application pages lay out their content. These skins may be applied at the Site, Responsibility, Application, Organization or User level by setting the profile option Oracle Applications Look and Feel (APPS_LOOK_AND_FEEL). The skins that OA Framework will provide are under development.

For more information, see Custom Renderer and Custom Icon Standards.

Example

The following code is an example of content in a LAF extension XML that defines a new skin. This example represents a LAF identified by a family called customlaf. Since it extends the simple.desktop LAF, it inherits all the styles from the UIX Simple Look-and-Feel (SLAF). This custom LAF overrides the renderer for page layout by providing its own template-based renderer for page layout. It also provides a custom printable facet page layout renderer (which is initiated to render the page when you run the page in printable page mode) and some custom icons.

<lookAndFeel xmlns="http://xmlns.oracle.com/uix/ui/laf"
             xmlns:ui="http://xmlns.oracle.com/uix/ui"
             id="customlaf.desktop"
             family="customlaf"
             extends="simple.desktop"
             styleSheetName="customlaf-desktop.xss">

  <!-- Custom Renderers -->
  <renderers>
    <!-- Register a custom pageLayout Renderer -->
    <renderer name="ui:pageLayout">
      <template name="pageLayout.uit"/>
    </renderer>
  </renderers>

  <!-- Facet custom Renderers -->
  <renderers facets="printable">
    <!-- Register a custom pageLayout Renderer -->
    <renderer name="ui:pageLayout">
      <template name="printablePageLayout.uit"/>
    </renderer>
  </renderers>

  <!-- Custom Icons -->
  <icons>
    <!-- Provide some icon -->
    <icon name="ui:tabBarStart">
    <contextImage uri="images/laf/customlaf/tbs.gif" 
      width="8" height="26"/>
    </icon>
  </icons>

Customizing Look-and-Feel (CLAF) User Interface

The Customizing Look-and-Feel feature provides a self-service user interface that allows you to create a new Look-and-Feel, as well as update an existing Look-and-Feel. It does not, however, provide a user interface to create custom template renderers. You must first create/write any custom template renderers that you require before you can create the look and feel.

Prerequisites

Accessing the CLAF UI

The Customizing Look-and-Feel user interface can be accessed in one of two ways:

When you select the Customize Look and Feel icon in the HGrid for a specific page element, you navigate to the second page of the CLAF UI (Customize Styles and Icons ) for that page element.

Creating a New LAF

Aside from creating custom template renderers yourself, the CLAF UI provides all the other features needed to create a new look and feel. The UI allows you to:

The following steps outline how to create a new custom LAF or skin using the CLAF user interface:

  1. Evaluate a good sampling of pages in the web site for which you want to create a new Look-and-Feel or skin. Determine whether the overall layout and component order as specified in BLAF is sufficient for the new skin. If it is, then you do not need to create a new LAF, but simply need to modify certain styles or icons. If it is not, that is, the layout and component order differs from that of BLAF, you will need to define renderers for each of those components.

  2. Log in as a user with access to the Customizing Look and Feel Administrator responsibility. Select the menu option Customizing Look and Feel Administrator to initiate the CLAF UI.

  3. In the Look and Feel Configuration page, select the Create Look and Feel radio button.

    Creating a LAF in the Look and Feel Configuration page

    the picture is described in the document text

  4. Specify values for the following parameters, then select Next:

    • Name - (Required) A unique name for the LAF, in all lower case, following the naming standard <lookAndFeelFamilyName>-<device>.

      Caution: The name of your new LAF must not contain upper case letters. Although you can enter a name with upper case letters, the OA Personalization Framework converts them to lower case in the filename when saving the LAF. If you try to update this LAF later, the system will not be able to find it, and will generate an error.

      OA Framework automatically generates an internal .xml file and an .xss file using this name. For example, if you name your LAF custom-desktop, OA Framework automatically generates the Look-and-Feel configuration file $HTML_TOP/cabo/lafs/custom-desktop.xml, and the stylesheet file $HTML_TOP/cabo/styles/custom-desktop.xss.

    • Family - (Required) The family under which this LAF is being created. Specify the family as all lower case. For example, the custom LAF family can have two LAFs named custom-desktop and custom-pda.

    • Description - (Optional) Enter text to describe the LAF that you are creating.

    • Base Look and Feel - (Required) The base LAF that the LAF you are creating will extend. The set of existing LAFs in your environment is displayed in the poplist.

    Note: You cannot extend the Oracle corporate BLAF (Browser Look-and-Feel) or the MLAF (Minimal Look-and-Feel).

  5. In the Customize Styles and Icons page that appears, the set of global named styles is displayed by default. The Component poplist also displays global by default to indicate that the page is currently displaying the global named styles that affect more than one component. You can also choose the Selectors or Icons sub tabs to display any global selectors or global icons.

    Customize Styles and Icons page.

    the picture is described in the document text

  6. Modify named styles or selectors - In the Named Styles or Selectors sub tabs, identify the style you want to change. Styles control color or font properties. You can add a new custom style by selecting Add Style or delete a custom style by selecting the Delete icon.

    Select Show to expand the detail region for a style or selector to make any of the following modifications:

    • Add a new property or included style to a style or selector by choosing Add Property and using the Type poplist to specify the type of property to add.

    • Change the value of any existing property.

    • Delete any property or included style from a style or selector .

    Note: You cannot directly update an included style. To replace an included style, delete the existing one, then add a new one using the Add Property button.

    Expanded detail region of the DarkAccentBorder global named style.

    the picture is described in the document text

  7. Modify icons (icons may either be text-based or GIF image-based). Select the Icons sub-tab and identify the icon you want to modify. Select Show to expand the detail region for the icon to make any of the following modifications:

    • Alter the icon's properties, such as height or width.

    • Replace the existing icon with a different icon (such as replacing a text icon with an image icon).

    Expanded detail region of the global required icon.

    the picture is described in the document text

  8. If you wish to add or modify named styles, selectors or icons that are specific to a component, use the Component poplist to select the component you wish to customize. Once you select a component, the page refreshes with a preview of the component beneath the Component poplist.

    Customize Styles and Icons page with a preview of the contentContainer component

    the picture is described in the document text

    Repeat Step 6 if you wish to modify the component's named styles/selectors or Step 7 to modify the components named icons. Repeat this step for all the components you want to customize. Select Next when you are done.

    Note: Any custom template renderers you defined are registered here.

  9. In the Review and Submit page, select Go if you wish to preview your new custom LAF against the Toolbox Tutorial Home Page that is shipped with OA Framework.

    Alternatively, you may specify your own page to preview, using the format OA.jsp?param1=value1&param2=value2&... in the Page Preview URL field and selecting Go.

    Review and Submit page

    the picture is described in the document text

  10. If you are satisfied with the previewed changes, select Finish to save your changes and create/register your new custom LAF, otherwise select Back to return to the previous pages in the CLAF flow to make additional modifications.

  11. To run your Oracle E-Business Suite applications pages with your custom LAF, log in to the Oracle E-Business Suite and set the profile option Oracle Applications Look and Feel (APPS_LOOK_AND_FEEL) to the custom LAF that you created, as it appears in the poplist.

  12. Bounce your web server, then run your application pages to see the new LAF take effect.

Updating a LAF

You can also use the CLAF UI to update an existing Look-and-Feel. The UI allows you to:

The following steps outline how to update a LAF or skin using the CLAF user interface:

  1. Access the CLAF UI using one of these two methods:

    • Log in as a user with access to the Customizing Look and Feel Administrator responsibility, and select the menu option Customizing Look and Feel Administrator to initiate the CLAF UI.

    • In the Page Hierarchy Personalization page of the Admin Personalization UI, select the Customize Look and Feel (pen) icon in the Customize Look and Feel column of the Page Hierarchy HGrid. You can access the CLAF UI using this method if the appropriate conditions are met.

  2. In the Look and Feel Configuration page, select the Update Look and Feel radio button.

    Updating a LAF in the Look and Feel Configuration page

    the picture is described in the document text

  3. Specify the name of the Look-and-Feel that you want to update, then click Next.

  4. Refer to Steps 5 and on in the Creating a New LAF section for the remaining steps that are also common to updating a LAF.

Deleting a LAF

You can use the CLAF UI to delete an existing custom Look-and-Feel.

To delete a custom Look-and-Feel:

  1. Access the CLAF UI using one of the following methods:

  2. On the Look and Feel Configuration page, select the Delete Look and Feel radio button.

    Deleting a LAF on the Look and Feel Configuration page

    the picture is described in the document text

  3. Select the name of the custom Look-and-Feel that you want to delete, then click Delete.

  4. On the Confirmation page that appears, click OK.

Custom Renderer and Custom Icon Standards

The following naming and directory standards must be followed:

Global Styles

The following tables list description of the global styles that are provided by UIX.

Global alignment styles provided by UIX
Alignment Styles Description
CenterTextAlign Sets the text-align property to "center" regardless of the reading direction.
RightTextAlign Sets the text-align property to "right" regardless of the reading direction.
LeftTextAlign Sets the text-align property to "left" regardless of the reading direction.
EndTextAlign Sets the text-align property to "right" for left-to-right reading direction and "left" for right-to-left reading direction.
StartTextAlign Sets the text-align property to "left" for left-to-right reading direction and "right" for right-to-left reading direction.
Global color styles provided by UIX
Color Style Description
LightAccentBorder The lightest border color in the accent color ramp.
MediumAccentBorder A slightly lighter border color in the accent color ramp.
VeryDarkAccentBorder The darkest border color in the accent color ramp.
DarkAccentBorder The primary border color in the accent color ramp.
LightBorder The lightest border color in the core color ramp.
MediumBorder A slightly lighter border color in the core color ramp.
VeryDarkBorder The darkest border color in the core color ramp.
DarkBorder The primary border color in the core color ramp.
DisabledLinkForeground The default foreground color for disabled links.
VisitedLinkForeground The default foreground color for visited links.
ActiveLinkForeground The default foreground color for active links.
LinkForeground The default foreground color for inactive, unvisited links.
ErrorTextForeground The foreground color for error text (red).
SelectedTextForeground The foreground color for selected/highlighted text, or text which is drawn on a dark background.
TextForeground The default text foreground color (black). See the Color Styles section in the Style Sheets topic for more information.
LightAccentForeground The lightest foreground color in the accent color ramp. This value is computed relative to the DarkAccentForeground color.
MediumAccentForeground A slightly lighter foreground color in the accent color ramp. This value is computed relative to the DarkAccentForeground color.
VeryDarkAccentForeground The darkest foreground color in the accent color ramp. This value is computed relative to the DarkAccentForeground color.
DarkAccentForeground The primary foreground color in the accent color ramp.
LightForeground The lightest foreground color in the core color ramp. This value is computed relative to the DarkForeground color.
MediumForeground A slightly lighter foreground color in the core color ramp. This value is computed relative to the DarkForeground color.
VeryDarkForeground The darkest foreground color in the core color ramp. This value is computed relative to the DarkForeground color.
DarkForeground The primary foreground color in the core color ramp.
TextBackground The default text background color (white). See the Color Styles section in the Style Sheets topic for more information.
LightAccentBackground The lightest background color in the accent color ramp. This value is computed relative to the DarkAccentBackground color.
MediumAccentBackground A slightly lighter background color in the accent color ramp. This value is computed relative to the DarkAccentBackground color.
VeryDarkAccentBackground The darkest background color in the accent color ramp. This value is computed relative to the DarkAccentBackground color.
DarkAccentBackground The primary background color in the accent color ramp. Also known as the Accent background color. See the Color Styles section in the Style Sheets topic for more information.
LightBackground The lightest background color in the core color ramp. This value is computed relative to the DarkBackground color.
MediumBackground A slightly lighter background color in the core color ramp. This value is computed relative to the DarkBackground color.
VeryDarkBackground The darkest background color in the core color ramp. This value is computed relative to the DarkBackground color.
DarkBackground The primary background color in the core color ramp. Also known as the Core background color. See the Color Styles section in the Style Sheets topic for more information.
Global font styles provided by UIX
Font Style Description
VeryLargeFont A very large version of the default font.
See the Font Size Styles section and the Font Size Styles for Microsoft Windows Explorer section in the Style Sheets topic for more information.
LargeFont A large version of the default font.
See the Font Size Styles section and the Font Size Styles for Microsoft Windows Explorer section in the Style Sheets topic for more information.
MediumFont A version of the default font which is slightly larger than the default size. This is used for medium sized text, such as level 2 headers.
See the Font Size Styles section and the Font Size Styles for Microsoft Windows Explorer section in the Style Sheets topic for more information.
SmallFont A small version of the default font. This style is used for text which is slightly smaller than the default, such as breadCrumb links.
See the Font Size Styles section and the Font Size Styles for Microsoft Windows Explorer section in the Style Sheets topic for more information.
VerySmallFont A very small version of the default font. This style is used for very small text such as inline messages, and copyright and privacy messages.
See the Font Size Styles section and the Font Size Styles for Microsoft Windows Explorer section in the Style Sheets topic for more information.
DefaultBoldFont A bold version of the default font.
DefaultFont Specifies the default font for the Look-and-Feel. This style defines both the default font family (as specified by the DefaultFontFamily named style) and the default font size.
See the Font Size Styles section and the Font Size Styles for Microsoft Windows Explorer section in the Style Sheets topic for more information.
DefaultFontFamily Specifies the default font family list ("font-family" property) for the Look-and-Feel. See the Font Styles section in the Style Sheets topic for more information.

Customizable Components

The following is a list of components whose Look-and-Feel may be customized using the CLAF UI:

Note: If a side navigation menu is created by adding functions with prompts to an HTML Sub Tab menu instead of an HTML sideBar menu, any look-and-feel changes using the CLAF tool on the sideBar component will not be supported on the menu.

Known Issues

See a summary of key CLAF issues with suggested workarounds if available.

Personalization FAQ

The Personalization FAQ includes a number of entries that cover Customizing Look-and-Feel issues.

Icons

For a detailed discussion of icons, refer to the BLAF Icon Specifications on the Oracle Technology Network (OTN).

If you need to develop new icons to support your customizations, refer to Icons in BLAF Applications and the BLAF Icon Naming Strategy on OTN.

You may also want to look at the Icon Repository for BLAF on OTN to find the base templates that were used to create icons.

Icons are stored as gif image files in the OA_MEDIA directory. You can change the image of an icon in one of two ways:

Responsibilities and Menus

For a detailed discussion of menus, responsibilities and other Oracle E-Business Suite security issues, refer to the "Managing Oracle E-Business Suite Security" chapter of the Oracle E-Business Suite System Administrator's Guide.

For a detailed discussion of menus in OA Framework pages, refer to "Menus" in the "Implementing the View" section of the OA Framework Developer's Guide.

Using the Oracle E-Business Suite Responsibilities screen, you can modify seeded responsibilities or define new ones to create the menu structure and business flows that match your business roles and requirements.

Menus serve two major purposes in the Oracle E-Business Suite:

Messages

For a detailed discussion of the Message Dictionary, refer to the Oracle E-Business Suite Developer's Guide. Also, the Oracle E-Business Suite User Interface Standards for Forms-Based Products guide has a nice summary of using messages, and contains useful general rules.

You can change messages for OA Framework-based applications in the same way that you change messages for Forms-based applications. If you wish to personalize an error message or other long text, such as a long tip message, you can edit the message in which the error message or long text is stored. To identify the name of the message used for a long tip on a given page, navigate to the Personalize page in the Admin-level Personalization UI to identify the values set for the Tip Message Name and Tip Message Appl Short Name properties.

Lookup Codes

Lookup codes which define the display values primarily seen in poplists are handled in OA Framework-based applications the same way that they are handled in Forms-based applications. You can use the Oracle E-Business Suite Lookups page to update or define new lookups and lookup codes. For further information, refer to the online help for the Lookups page. The lookups data is stored in the FND_LOOKUPS table, and you may extract the lookups from there.

Style Sheets

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:

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.

Note: You cannot extend BLAF or MLAF.

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.oracle.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:

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

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:

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.

Style Properties Description
DefaultFontFamily font-family = Arial, Helvetica, Geneva, and sans-serif Specifies the default font family list for the Look-and-Feel.

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:

Style Properties Description
DefaultFont includeStyle = DefaultFontFamily
font-size = 10pt		 Specifies the default font and default font size for the Look-and-Feel.

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:

Style Properties Description
VerySmallFont includeStyle = DefaultFont
font-size = -2pt		 A very small version of the default font. This style is used for very small text such as inline messages, and copyright and privacy messages.
SmallFont includeStyle = DefaultFont
font-size = -1pt		 A small version of the default font. This style is used for text which is slightly smaller than the default, such as breadCrumb links.
MediumFont includeStyle = DefaultFont
font-size = +1pt		 A version of the default font which is slightly larger than the default size. This is used for medium sized text, such as level 2 headers.
LargeFont includeStyle = DefaultFont
font-size = +3pt		 A large version of the default font. This is used for large text, such as level 1 headers.
VeryLargeFont includeStyle = DefaultFont
font-size = +6pt		 A very large version of the default font.

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.

Style Properties Description
DefaultFont font-size = x-small Overrides the default font size specifically for the Microsoft Internet Explorer (IE) browser.
VerySmallFont font-size = 67% A very small version of the default font specifically for IE.

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:

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:

Style Properties Description
TextForeground color = #000000 The default text foreground color (black).
TextBackground background-color = #ffffff The default text background color (white).
DarkBackground background-color = #336699 The primary background color in the core color ramp. Also known as the Core background color.
DarkAccentBackground background-color = #cccc99 The primary background color in the accent color ramp. Also known as the Accent background color.

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.

Item Style and Style Type Selection page

the picture is described in the document text

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 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.

Note: If the selected Item Style is Text Input or Static Styled Text, the results table displays three columns. The first column always lists the name of the CSS style that has been applied. For Text Input, the second column renders the Text Input with the applied CSS style, and the third column renders the Text Input as a multi-line Text Area with the applied CSS style. For Static Styled Text, the second column renders the Static Styled Text with the applied CSS style, and the third column renders the Static Styled Text as a URL with the applied CSS style.