Can I Use Internal Css in Oaf Personalize Oracle R12

6/21

Personalizing OA Framework Applications

This affiliate covers the following topics:

• Branding
• Themes
• Customizing Look-and-Feel (CLAF)
• Icons
• Responsibilities and Menus
• Messages
• Lookup Codes
• Style Sheets

Branding

Every bit described in the Browser Look-And-Feel (BLAF) guidelines for branding on the Oracle Engineering science Network (OTN), every OA Framework page reserves the upper left-hand corner for one of the following:

• Basic (Not-Contextual) Branding - includes corporate (for example, "Oracle") and product make names

• In-Context Branding - includes user-selected contextual information in addition to the corporate and product brand names

All OA Framework pages must provide bones branding support. In-context branding may be used in cases where there is a specific need.

Bones (Not-Contextual) Branding

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

Basic branding (corresponds to BLAF "Regular" layout)

Personalizing the Corporate Branding Prototype

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

• To globally override the Oracle corporate branding image with your own corporate branding prototype, gear up the contour option Corporate Branding Image for Oracle Applications (FND_CORPORATE_BRANDING_IMAGE) to the name of an image file (GIF) that contains your corporate image. For instance, MyCompanyImage.gif. The prototype file MyCompanyImage.gif should be placed under the $OA_MEDIA directory. This profile option should exist fix at the Site level and does not accept a default value.

  Annotation that the Corporate Branding Image for Oracle Applications contour selection also controls the corporate branding image for JTF-based applications. Refer to the "Implementing the Oracle CRM Technology Foundation" chapter of the Oracle Eastward-Business organization Suite CRM Organisation Administrator's Guide for more than information.

  Notation: Beginning with Release 12.2.5, if you set a new corporate branding epitome with the profile Corporate Branding Prototype for Oracle Applications, you can specify alternative text (alt-text) to describe your prototype file past updating the Description field of the Corporate Branding Paradigm for Oracle Applications profile itself.

• To create an administrative-level personalization for a specific page, set the Image URI property on the corporateBranding page element to a dissimilar image file. This updates the image but for the specific usage on that page.

• If you are using the Consign to PDF feature for tables (introduced in Release 12.2.10), and then every exported PDF certificate carries the same corporate branding image as the base of operations page by default. If yous desire to apply a dissimilar corporate branding image, and then place the image file under the $OA_MEDIA directory, and set the profile option "FND: Export to PDF Corporate branding prototype location" (code FND_EXPORT_TO_PDF_CORP_BRANDING_IMG_LOC) to bespeak to the file proper name of the image in the $OA_MEDIA directory.

Warning: Do non attempt to globally override the corporate branding image by renaming your custom corporate branding image file as /OA_MEDIA/FNDSSCORP.gif. This would consequence in distortion of your corporate paradigm. When a folio is rendered, OA Framework checks whether a value is set for the profile option Corporate Branding Epitome for Oracle Applications. If no value is ready, information technology renders /OA_MEDIA/FNDSSCORP.gif as the corporate branding image and sets the image surface 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, information technology renders the content of the specified prototype file without specifying an image expanse size since the epitome size is as notwithstanding, unknown.

Personalizing Product Branding

The production branding is derived in 1 of iii possible ways:

• Default behavior - If your OA Framework page is launched from the Navigator in the East-Business Suite Personal Abode Page, OA Framework automatically sets the branding text for you based on the current selected responsibleness and page link. This ensures consistency between the options presented in the Navigator and the branding text displayed on the application page.

  Note: The default branding is set just if the FND:Framework Compatability Manner contour selection value is ready to xi.5.ten.

• Declarative branding behavior - A developer may gear up the product branding declaratively on the page itself and override the default branding behavior. If this is the case, you can personalize the product branding text past creating an administrative-level personalization for the folio which sets the Text property on the productBranding: formattedText page element to the product name y'all desire to brandish.

• OAPB override beliefs - A programmer may also define a course function and telephone call it using the OAPB URL parameter with the folio to specify the production branding text. When a developer specifies an OAPB parameter programmatically, information technology overrides both the default and the declarative branding behavior, if whatsoever. The only fashion to personalize the product branding text in this example is past logging into the Oracle E-Business Suite and updating the User Function Name value for that branding office, using the Class Functions screen.

In-Context Branding

The in-context make includes the corporate and product make images. Additionally, contextual information renders below the corporate and product information, equally shown in the following case.

Example of In-Context Branding

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

To personalize in-context branding, create an authoritative-level personalization for the page that sets the Text holding on the productBranding: formattedText folio element to the product proper noun you want to display. Then gear up the Text property on the inContextBranding: formattedText page chemical element to the context you wish to display. For example, the Text property of the inContextBranding: formattedText page chemical element displayed in the preceding case is "Customer <b>Company A - N America</b>".

Themes

A theme determines how Oracle Application Framework pages will look. You tin can cull a shipped theme or create your own using the Theme Editor feature.

Introduced in Release 12.ii.vii, the Theme Editor for Oracle E-Business organization Suite is a lightweight UI-driven tool that enables like shooting fish in a barrel customization of OAF applications' look and feel.

The Theme Editor reduces the personalization skills and efforts needed to customize the look and feel of Oracle East-Business Suite. For case, users with trivial or no knowledge of cascading style sheets (CSS) will still be able to create and edit themes that suit the needs of their specific installations. A further do good of the Theme Editor is that customized themes created using information technology tin can be applied on-the-fly, without requiring a restart of the application services.

To employ the Theme Editor, you must have the Functional Ambassador responsibleness.

Themes are reflected in pages congenital with Oracle Application Framework and also in pages congenital with other underlying technologies in the following products:

• Oracle CRM Technology Foundation (JTT)

• Oracle Applications Manager

• Oracle Web Applications Desktop Integrator

In the following products, pages use an underlying engineering for which themes are non supported. Therefore, themes are non reflected in the following:

• The eKanban application in the Discrete Manufacturing product family unit

• Oracle iStore

• The Oracle E-Business Suite online help pages

Customizable Properties

Themes in Oracle Due east-Business Suite tin can be used to specify the following properties for a page, to provide a distinctive theme:

• Folio edge color

• Push background color

• Text color (for tip text, for example)

• Link text colour

• Button text color

• Prompt text color (that is, for text labeling input fields)

• Global Header and Footer text color

• Header and subheader text color

• Global Header icon color

The post-obit figure illustrates examples of where the properties can exist applied:

Examples of Elements Using Customizable Theme Properties

1. Page edge color

2. Global Header and Footer text color

3. Link text color

4. Global Header icon color

5. Text colour

6. Button background colour and push button text colour

Note that themes you create in this way practice not affect the following page elements:

• Table headers

• Dropdown menus

• Nearly modal and inline popular-up windows (for case, Attachment popular-up windows, Navigator, Favorites, Settings, Worklist, and Preferences)

Accessing the Themes Pages

1. Log in equally a user with the Functional Administrator responsibility.

2. Navigate to Functional Administrator > Home.

3. Navigate to Personalization > Themes.

Searching for Themes

Y'all can search past Theme Name or Source. For Source, the options are Oracle (shipped with Oracle E-Business Suite), Custom (customer-created), or All (leave the field bare).

Themes Search with Oracle Source

Previewing a Custom or Oracle Theme

To preview an existing theme, click the Preview icon for the theme.

Creating and Editing a Custom Theme

Create Theme Page

To create a new theme:

1. Select the Create Theme button.

2. Enter a Theme Name and optional clarification for your theme.

3. Choose colors for page properties using the color picker. If yous accept the profile FND: Enable JET ColorPicker ready to Aye (the default), the advanced color picker is shown. If it is fix to No, so the classic colour palette is used.

   With the advanced JET color picker, you lot can:

   • Choose from a predefined palette of colors

   • Use the Custom Colors... to think a color value from a saturation spectrum with hue and opacity sliders.

   • Select your final-used color or another recently-used color

   Yous can also enter a colour hex code directly into a field.

   Choose colors for the post-obit properties:

   • Page border color

   • Button background color

   • Text color (for tip text, for example)

   • Link text color

   • Push text color

   • Prompt text color (that is, for text that precedes input fields)

   • Global Header and Footer text color

   • Header and subheader text colour

4. Select a Global Header icon color.

   Note: For branding: With seeded themes, the color of Oracle logo is based on this property. However, for custom themes, y'all need to set the profile selection Corporate Branding Epitome for Oracle Applications (FND_CORPORATE_BRANDING_IMAGE) to set up the appropriate logo.

5. Select an Icon style (Square or Circular).

6. You can preview your theme using the Preview button. This button opens a page displaying components in your selected colors. To exit the Preview window, click the '10' icon at the top right. Y'all volition exist taken back to the Create Theme folio where you can change your colour choices if you want.

7. When you are finished creating your theme, click Salve.

Annotation that if you get out a field blank, the Alta colour scheme is used for that field.

To implement your new theme, activate it as described beneath.

Updating a Custom Theme

From the results table on the Themes page, click the Update icon for the theme you wish to update. You lot tin can so make your updates in the Edit Theme page.

Duplicating a Custom or Oracle Theme

From the results tabular array on the Themes page, click the Duplicate icon for the theme you wish to copy. The Create Theme folio will display from which you can edit the copy of the original theme.

Deleting an Existing Custom Theme

Click the Delete icon for the theme you wish to delete. Deleting an active theme restores the default Alta Await-and-Feel.

Note: Yous cannot delete the Oracle seeded themes.

Activating a Custom or Oracle Theme

To activate a theme for your instance, select the theme name and click the Actuate Theme button. A flag icon will appear side by side to the theme name.

Activated Nighttime Gray Theme with Flag Indicator

Oracle Awarding Framework application pages will so apply this theme's styles.

Note: Refer to the overview of this section for a list of exceptions.

The theme proper noun will be saved in profile FND: User Theme (FND_USER_THEME). This contour value can also be ready at the site, application, responsibility, or user level, as described beneath.

Deactivating a Custom or Oracle Theme

To deactivate a theme, use the Deactivate Theme button. The default Alta Look-and-Experience is restored.

Setting a Theme at the Site, Application, Responsibility, or User Level

While you lot can activate a theme to be the default for Oracle Application Framework pages using the Themes page, you can as well choose to override this pick on the site, application, responsibility, or user level using the FND: User Theme (FND_USER_THEME) profile.

Also, users tin can view and update this contour, so they tin can select which pre-defined themes to utilize.

For example, a user can:

1. Navigate to the Personal Profiles window.

2. Query the profile proper name 'FND: User Theme'.

3. Set the user value to 'Bright Blue Theme'.

4. Save the changes.

Notation that for the user to see the updated theme, the contour option cache must exist cleared by a system administrator. To do this, navigate to the Functional Ambassador (seeded responsibleness) > Core Services > Caching Framework, select the cache object 'PROFILE_OPTION_VALUE_CACHE' , and click the Clear Enshroud button.

Later the profile selection cache is cleared, the user can log in and run across the new theme.

Gear up-to-Utilize Themes

Oracle E-Concern Suite includes the following fix-to-use themes:

• Bright Blue

• Crisp Green

• Dark Gray

• Calorie-free Blue

• Redwood

• Steel Gray

• Vanilla

If the capabilities offered by the Theme Editor are insufficient for all your needs, you can customize more than extensively using the Customizing Look-and-Feel (CLAF) characteristic, equally described in the next section.

Customizing Look-and-Feel (CLAF)

Oracle E-Business concern Suite applications are currently shipped with Oracle's corporate Browser Look-and-Feel (BLAF), which supplies a rich set of components for spider web-based applications. Although OA Personalization Framework provides you with the ability to modify the look of a page by changing user interface (UI) component properties, adding UI components, and and then on, information technology does not let y'all to create and apply an entirely new Look-and-Feel to an application.

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

• Create a new Look-and-Experience (LAF).

• Register the new LAF.

• Employ the LAF at the Application, Responsibility, Site, Organization or User levels.

• Update a custom LAF.

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

• Base Look-and-Feel - the root of all LAF implementations.

• Uncomplicated Await-and-Experience (SLAF) - a LAF built on acme of Base Await-and-Feel to offer more customization features, and to serve as an analogy of how to create LAF extensions on meridian of a base LAF.

• Browser Await-and-Feel (BLAF) - the default LAF, which conforms to Oracle's corporate UI guidelines.

• Minimal Wait-and-Feel (MLAF) - a simplified version of BLAF with a lightweight UI.

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

Note: Yous cannot extend BLAF or MLAF.

Infrastructure of a Look-and-Feel

A Await-and-Feel is divers by iii major components: style sheets (XSS), icons, and renderers.

Manner Sheets

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

See too the listing of global styles provided by UIX later in this chapter.

Icons

Some web beans are equanimous of one or more icons that control the web bean's Await-and-Feel. Icons are identified past a name. For example, the Hide/Show web bean consists of the "disclosed" icon. Icons are present in the LAF configuration file. For additional data, 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 yous 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. Yous define renderers declaratively as templates (.uit extension). Following is an case template definition for a sidebar component:

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

Y'all 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.

Of import: You can use a template renderer to customize the layout of some - merely not all - components. Post-obit is a list of the components with customizable layouts:

• borderLayout

• breadCrumbs

• bulletedList

• button

• contentContainer

• flowLayout

• footer

• globalButtonBar

• globalHeader

• header

• hideShow

• link

• messageComponentLayout

• pageButtonBar

• pageLayout

• printablePageLayout

• rowLayout

• sideBar

• sideNav

• stackLayout

• subTabBar

• subTabLayout

• tabBar

• tableLayout

• tip

• train

Look-and-Feel Extension (Custom Skins)

When you lot define a new Expect-and-Experience, you can too alter the layout of its inherited Expect-and-Feel, thereby creating what is chosen a custom skin. To complete the creation of a custom skin, y'all must annals any custom renderers, custom facet renders, and custom icons for that skin, on your custom Expect-and-Feel using the Customizing Look-and-Experience 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 exist implemented as a facet by excluding superfluous navigation and personalization controls that are not necessary for printed output.

For more than data, run into Custom Renderer and Custom Icon Standards.

Instance

The following code is an instance of content in a LAF extension XML that defines a new skin. This instance represents a LAF identified by a family chosen customlaf. Since it extends the simple.desktop LAF, it inherits all the styles from the UIX Simple Expect-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 folio when you run the folio in printable page mode) and some custom icons.

<lookAndFeel xmlns="http://xmlns.example.com/uix/ui/laf"              xmlns:ui="http://xmlns.instance.com/uix/ui"              id="customlaf.desktop"              family="customlaf"          extends="uncomplicated.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 proper name="ui:pageLayout">       <template proper noun="printablePageLayout.uit"/>     </renderer>   </renderers>    <!-- Custom Icons -->   <icons>     <!-- Provide some icon -->     <icon name="ui:tabBarStart">     <contextImage uri="images/laf/customlaf/tbs.gif"        width="8" superlative="26"/>     </icon>   </icons>

Customizing Await-and-Feel (CLAF) User Interface

The Customizing Look-and-Feel feature provides a self-service user interface that allows you lot to create a new Look-and-Experience, as well as update an existing Look-and-Feel. It does not, however, provide a user interface to create custom template renderers. Yous must outset create/write any custom template renderers that y'all crave earlier you can create the wait and feel.

Prerequisites

• Yous should take a good knowledge of UIX web beans and be able to identify which specific UIX component maps to a given component in your web site.

• You should have a practiced understanding of UIX XSS infrastructure and be able to identify what colour and font styles are associated with each component. Refer to the Mode Sheets topic and the Global Styles table for additional information.

• You must ensure that y'all take write permission on the file system where OA Personalization Framework is running. If write permission is non granted before you attempt to create or update a Look-and-Feel, the UI will throw an exception.

• You demand to write a template renderer only if a component has a layout and children that are different from that of the Browser Expect-and-Experience (BLAF). If you need to annals a new template renderer, follow these steps earlier proceeding to the Accessing the CLAF UI department following:

  1. Name your custom template renderer file equally <webBeanType>.uit. For example: sideBar.uit, tabBar.uit, or pageLayout.uit.

  2. Create a folder named <lookandFeelId> under $HTML_TOP/cabo/templates, where <lookandFeelId> would exist a LAF name, such as custom-desktop.

  3. Identify the <webBeanType>.uit file in the folder $HTML_TOP/cabo/templates/<lookandFeelId>. For example to register a new template renderer for tabBar, motion tabBar.uit so that resides every bit $HTML_TOP/cabo/templates/custom-desktop/tabBar.uit, where custom-desktop is the <lookandFeelId> binder.

  4. Continue with the Accessing the CLAF UI and Creating a New LAF sections to create new LAF.

  Important: To ensure that your template renderer registers properly, make certain the new LAF you create has the same LAF proper name equally the <lookandFeelId> folder you created in the second stride.

  To update an already registered template renderer, first supersede the old <webBeanType>.uit file with your new modified version of the <webBeanType>.uit file. Next, proceed to the Accessing the CLAF UI and Updating a LAF sections. Make sure y'all supervene upon <webBeanType>.uit in the advisable <lookandFeelId> folder.

Accessing the CLAF UI

The Customizing Look-and-Feel user interface tin can be accessed in 1 of two means:

• Using the Oracle E-Concern Suite Users window, add the responsibility FND_CLAF_ADMINISTRATOR to the user who should exist given permission to create new LAFs. Make sure you bounce your web server after saving the change so that the setting takes outcome. A Customizing Expect and Feel Administrator responsibility should now be bachelor for the user. After selecting that responsibility, the user should then select Customizing Look and Feel Administrator to navigate to the first page of the CLAF UI.

• In the Page Hierarchy Personalization page of the Admin Personalization UI, the Page Hierarchy HGrid displays a column called Customize Look and Feel. A Customize Look and Feel (pen) icon appears in the cavalcade if the following 2 weather are met:

  • The application page'south current Await-and-Feel is customizable. For example if the current Look-and-Experience is BLAF, an icon will never announced because BLAF is not customizable.

  • The component is LAF customizable. This means that only a component associated with a manner or icon tin can have the Customize Look and Feel icon enabled. If a personalization administrator does not take access to the Customizing Wait and Feel Administrator responsibility when the administrator selects the icon, OA Framework returns an error.

When you select the Customize Look and Experience icon in the HGrid for a specific folio element, yous navigate to the 2nd page of the CLAF UI (Customize Styles and Icons ) for that page chemical 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 lot to:

• Specify the new Look-and-Feel identifier or proper noun. The identifier must be unique, all lower case, and must follow the standard <lookAndFeelFamilyName>-<device> naming convention, where <device> is either desktop or pda.

• Specify the family under which the Look-and-Feel belongs (in all lower case). Multiple LAFs for different devices can exist under the aforementioned family. For example, myclaf-desktop and myclaf-pda both exist nether the myclaf family. The family name should exist unique for a detail Look-and-Feel.

• Specify the base of operations Look-and-Feel that your new custom Expect-and-Experience shall extend. All styles, icons, and renderers are inherited from this base look and feel, and can exist overridden.

• Modify the styles inherited from the base Look-and-Feel to adjust the colors and fonts of the new Look-and-Feel you want to create.

• Change the icons inherited from the base Wait-and-Feel to conform the new await and feel you want to create.

• Become immediate feedback on the changes being made to styles and icons using the preview page.

• Register any custom template renderers yous define for any web beans.

The following steps outline how to create a new custom LAF or peel 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-Experience or skin. Determine whether the overall layout and component club as specified in BLAF is sufficient for the new skin. If it is, then you lot 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 social club differs from that of BLAF, you lot 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 Expect and Feel Administrator to initiate the CLAF UI.

3. In the Expect and Feel Configuration folio, select the Create Look and Feel radio push.

   Creating a LAF in the Await and Experience Configuration page

   

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

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

     Caution: The name of your new LAF must not contain upper example messages. Although you tin can enter a proper noun with upper case messages, the OA Personalization Framework converts them to lower case in the filename when saving the LAF. If y'all try to update this LAF later, the system volition not exist able to find it, and volition generate an mistake.

     OA Framework automatically generates an internal .xml file and an .xss file using this proper noun. For instance, if y'all 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 unit - (Required) The family under which this LAF is being created. Specify the family as all lower case. For example, the custom LAF family unit can take two LAFs named custom-desktop and custom-pda.

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

   • Base Wait 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 lot cannot extend the Oracle corporate BLAF (Browser Expect-and-Feel) or the MLAF (Minimal Look-and-Feel).

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

   Customize Styles and Icons page.

   

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. Yous tin add a new custom fashion by selecting Add together Mode or delete a custom style by selecting the Delete icon.

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

   • Add a new belongings or included fashion to a style or selector past choosing Add together Belongings and using the Type poplist to specify the type of belongings to add.

   • Change the value of any existing property.

   • Delete whatsoever property or included mode from a fashion or selector .

   Annotation: Yous cannot directly update an included style. To replace an included style, delete the existing ane, then add a new i using the Add Property button.

   Expanded detail region of the DarkAccentBorder global named style.

   

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'southward backdrop, 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.

   

8. If you wish to add together or alter 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 folio with a preview of the contentContainer component

   

   Echo Stride half-dozen if you wish to alter the component'southward named styles/selectors or Step vii to change the components named icons. Echo this step for all the components you want to customize. Select Side by side when you are done.

   Note: Whatever custom template renderers you divers are registered here.

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

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

   Review and Submit folio

   

10. If yous are satisfied with the previewed changes, select Finish to save your changes and create/annals your new custom LAF, otherwise select Dorsum to render to the previous pages in the CLAF period 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, every bit it appears in the poplist.

12. Bounciness your spider web server, then run your application pages to see the new LAF take upshot.

Updating a LAF

Yous tin also utilize the CLAF UI to update an existing Look-and-Feel. The UI allows you to:

• Modify any styles or icons defined in the Look-and-Feel.

• Change whatsoever renderers registered with the Look-and-Feel.

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

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

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

   • In the Folio Bureaucracy Personalization page of the Admin Personalization UI, select the Customize Look and Feel (pen) icon in the Customize Wait and Experience column of the Page Bureaucracy 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 folio

   

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

4. Refer to Steps v and on in the Creating a New LAF department for the remaining steps that are also mutual to updating a LAF.

Deleting a LAF

You tin apply the CLAF UI to delete an existing custom Await-and-Feel.

To delete a custom Look-and-Feel:

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

   • Log in as a user with access to the Customizing Wait and Feel Administrator responsibility, and select the carte selection Customizing Look and Feel Ambassador to initiate the CLAF UI.

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

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

   

3. Select the proper noun of the custom Look-and-Feel that yous 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:

• All custom template renderer files should be named every bit <webBeanType>.uit. For case: sideBar.uit, tabBar.uit, or pageLayout.uit.

• All template renderer files should reside nether $HTML_TOP/cabo/templates/<lookandFeelId>/ where <lookandFeelId> would be a LAF name, such as custom-desktop.

• All custom icon files should reside nether $HTML_TOP/cabo/images/<lookandFeelId>/ where <lookandFeelId> would be a LAF proper noun, such as custom-desktop.

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-marshal property to "center" regardless of the reading management.
RightTextAlign	Sets the text-align belongings to "right" regardless of the reading direction.
LeftTextAlign	Sets the text-align property to "left" regardless of the reading management.
EndTextAlign	Sets the text-marshal 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-correct reading direction and "right" for right-to-left reading direction.

Global colour styles provided by UIX

Color Fashion	Clarification
LightAccentBorder	The lightest border colour in the accent color ramp.
MediumAccentBorder	A slightly lighter border color in the accent color ramp.
VeryDarkAccentBorder	The darkest border color in the emphasis color ramp.
DarkAccentBorder	The primary border color in the accent color ramp.
LightBorder	The lightest border color in the cadre color ramp.
MediumBorder	A slightly lighter border color in the core colour ramp.
VeryDarkBorder	The darkest border color in the core color ramp.
DarkBorder	The chief border color in the core color ramp.
DisabledLinkForeground	The default foreground color for disabled links.
VisitedLinkForeground	The default foreground colour 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 (ruddy).
SelectedTextForeground	The foreground colour for selected/highlighted text, or text which is drawn on a nighttime background.
TextForeground	The default text foreground colour (blackness). See the Color Styles section in the Fashion Sheets topic for more data.
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 emphasis color ramp. This value is computed relative to the DarkAccentForeground color.
VeryDarkAccentForeground	The darkest foreground color in the accent colour ramp. This value is computed relative to the DarkAccentForeground color.
DarkAccentForeground	The chief 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 colour in the core colour ramp. This value is computed relative to the DarkForeground color.
VeryDarkForeground	The darkest foreground color in the core colour ramp. This value is computed relative to the DarkForeground colour.
DarkForeground	The primary foreground color in the core color ramp.
TextBackground	The default text background colour (white). See the Color Styles department in the Way Sheets topic for more than data.
LightAccentBackground	The lightest background color in the accent colour ramp. This value is computed relative to the DarkAccentBackground colour.
MediumAccentBackground	A slightly lighter background colour in the accent color ramp. This value is computed relative to the DarkAccentBackground color.
VeryDarkAccentBackground	The darkest background color in the emphasis color ramp. This value is computed relative to the DarkAccentBackground color.
DarkAccentBackground	The primary background color in the emphasis color ramp. Also known as the Accent groundwork colour. See the Color Styles section in the Manner Sheets topic for more than information.
LightBackground	The lightest groundwork 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 colour.
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. Come across the Color Styles section in the Fashion Sheets topic for more than information.

Global font styles provided by UIX

Font Mode	Description
VeryLargeFont	A very large version of the default font. See the Font Size Styles section and the Font Size Styles for Microsoft Net Explorer section in the Style Sheets topic for more than information.
LargeFont	A large version of the default font. See the Font Size Styles section and the Font Size Styles for Microsoft Cyberspace Explorer section in the Way 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 Internet Explorer section in the Style Sheets topic for more information.
SmallFont	A pocket-sized 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 department and the Font Size Styles for Microsoft Net Explorer section in the Style Sheets topic for more than information.
VerySmallFont	A very small version of the default font. This way is used for very small text such as inline letters, and copyright and privacy messages. See the Font Size Styles section and the Font Size Styles for Microsoft Internet Explorer section in the Mode Sheets topic for more data.
DefaultBoldFont	A assuming 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 manner) and the default font size. See the Font Size Styles department and the Font Size Styles for Microsoft Net Explorer section in the Style Sheets topic for more than data.
DefaultFontFamily	Specifies the default font family list ("font-family" property) for the Look-and-Feel. Encounter the Font Styles section in the Style Sheets topic for more data.

Customizable Components

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

• applicationSwitcher

• breadCrumbs x train

• button

• colorField

• contentContainer

• dateField

• footer

• globalButton

• globalHeader

• hGrid

• header

• hideShow

• lovInput

• messageBox

• sidebar

• sortableHeader

• tabBar

• table

• train

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

Known Issues

See a summary of primal CLAF issues with suggested workarounds if bachelor.

Personalization FAQ

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

Icons

For a detailed give-and-take of icons, refer to the BLAF Icon Specifications on the Oracle Engineering science Network (OTN).

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

You may as well 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 every bit gif epitome files in the OA_MEDIA directory. You lot tin alter the image of an icon in one of two ways:

• You tin replace the appropriate prototype file with a file of the aforementioned proper noun that contains an updated icon. This updates all instances of that icon globally.

• You tin can create an administrative-level personalization for the page by setting the Epitome URI property on the prototype page chemical element to a different paradigm file. This updates the paradigm for that specific usage of the icon.

Responsibilities and Menus

For a detailed discussion of menus, responsibilities and other Oracle E-Business Suite security issues, refer to the "Oracle Awarding Object Library Security" chapter of the Oracle E-Business Suite Security 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'due south Guide.

Using the Oracle Due east-Business Suite Responsibilities screen, you can alter seeded responsibilities or define new ones to create the carte du jour structure and business organization flows that match your concern roles and requirements.

Menus serve two major purposes in the Oracle Due east-Business concern Suite:

• Oracle Due east-Business organisation Suite menus are a navigation tool for the user.

  The menus are fully contained of the underlying lawmaking, whether it is OA Framework-based or Forms-based. In fact, the same folio tin can be available from multiple menus, where the navigation paths can all vary substantially. You can employ the Oracle Eastward-Concern Suite Menus screen to change or define new menus.

• Oracle Due east-Business Suite menus are function of the Oracle E-Business Suite security model.

  A menu must exist assigned to a responsibility using the Oracle E-Business organization Suite Responsibilities screen, and a responsibleness must be assigned to a valid user using the Oracle E-Concern Suite Users screen. To see a given menu, you must be logged into the Oracle E-Business Suite as the appropriate user.

Messages

For a detailed discussion of the Message Dictionary, refer to the Oracle E-Business concern Suite Developer'due south Guide. Also, the Oracle Due east-Business organisation Suite User Interface Standards for Forms-Based Products guide has a nice summary of using letters, and contains useful full general rules.

You tin change letters for OA Framework-based applications in the same way that yous 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 tin edit the message in which the mistake message or long text is stored. To identify the proper noun 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 fix for the Tip Message Proper noun 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 employ the Oracle E-Business Suite Lookups page to update or define new lookups and lookup codes. For further information, refer to the online aid for the Lookups page. The lookups data is stored in the FND_LOOKUPS table, and you may extract the lookups from there.

Way 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 every bit fonts and colors, to be separated from the HTML content to which the styles are applied. This enables you to maintain a consistent Await-and-Experience for the application, even so manage the customizations of styles for different target audiences.

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

Way 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 likewise referred to every bit creating a new skin. With the CLAF UI, you practice non demand to create or modify custom style sheets directly to change the styles in your Expect-and-Feel. Instead, yous use the CLAF UI to create or alter a custom Await-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 ascertain a new peel.

• 1 Expect-and-Feel tin extend another Look-and-Feel.

• Supported past UIX.

Although you do not take to work with XSS mode sheets directly, the content of this document provides important data near the concepts of XSS that you should know earlier you beginning modifying styles in the CLAF UI.

The BLAF (Browser Look-and-Experience) mode 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 prepare of visual styles to be applied to the Await-and-Feel of a spider web page. Styles control two fundamental aspects of HTML components - color and font. Following is an example of a base of operations style sail certificate:

<styleSheetDocument          xmlns="http://xmlns.instance.com/uix/manner"   version="2.0"> <!-- Style sail for our Custom UI --> <styleSheet>    <!-- Alter the dark color ramp to blue -->    <style name="DarkBackground">       <belongings proper name="background-color">#00619C</property>    </way>     <!-- Override global button text color/font -->    <style selector=".OraGlobalButtonText">       <holding proper noun="color">black</property>       <property proper name="font-weight">bold</property>       <belongings proper noun="font-size">fourscore%</property>       <property name="text-decoration">none</property>    </style> </styleSheet> </styleSheetDocument>

Style Sheets

Each style sheet is defined with a <styleSheet> element. Yous tin designate which end-user environment to employ a mode sail to by assigning attributes, also called "variants", to the <styleSheet> chemical element. XSS supports the following 5 variants:

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

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

• Browser (due east.g. browsers="Firefox" or "Internet Explorer")

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

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

A manner sheet that contains no variant attributes is known every bit a base style sail. The following instance shows a style sheet that defines styles for Internet Explorer users in the Japanese locale:

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

Styles

Each <styleSheet> chemical element contains one or more <style> elements. In full general, a way chemical element is identified past a proper name and a set of one or more than properties as shown below:

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

A holding is identified by a name and a value. It defines a facet for the style (for example, font size for a particular font manner) and is a CSS property. Generally, an XSS document would have about 100-250 style definitions. Each XSS style definition tin apply from 1 to five CSS properties. At that place are about 100 valid CSS backdrop bachelor 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-Experience.

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

Named Styles

Oftentimes, many style definitions share common properties, such equally a base font or standard background color. In XSS, y'all tin 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 fashion allows yous to make and maintain simple and concise customizations to the mode sheets.

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

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

Selectors

A <manner> chemical element tin likewise be identified past a selector, which associates the style with a particular spider web bean or set up of web beans in a HTML certificate. Selectors are defined by a list of properties and can also reference other named styles using the <includeStyle> element. The post-obit example shows the manner definition for the HTML OraFieldText chemical element:

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

In this example, the selector ".OraFieldText" indicates that the properties defined by this fashion should be practical to whatsoever 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, yous can utilize the <includeStyle> element in your style definition to include all the properties from another style in your fashion definition. You can also use the <includeProperty> chemical element to include only a specific property of another style in your style definition. For case, the following styleA is divers by a property chosen prop1, all the properties from styleB, and a property chosen prop3, which is derived from property prop2 of styleC.

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

Global Versus Component-Specific Styles

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

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

• Component-specific styles - touch on only one component. An example of a component-specific fashion 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 divers for them that can exist further customized.

Most customizations that you make to a mode sheet involve the gear up of forty-five Global named styles that control about ninety per centum of the Expect-and-Feel of the awarding.

Font Styles

One of the well-nigh mutual customizations you may wish to make to the await and feel of the Oracle East-Business Suite user interface is to modify the default font. Although a stylesheet may define many unlike styles that bear on font properties, all these styles refer to a single named style that defines the default font family. Equally a event, if yous wish to change the font family properties for all the styles defined in a way sheet, you need to brand but a unmarried manner override to the DefaultFontFamily style.

DefaultFontFamily Properties

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

For case, suppose you lot want to change the default font family for all styles to include only the CSS "serif" font family unit. In the Customizing Wait and Feel UI, you would update your Expect-and-Experience by modifying the global DefaultFontFamily style such that the value of its font-family unit holding 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:

DefaultFont Properties

Style	Properties	Clarification
DefaultFont	includeStyle = DefaultFontFamily font-size = 10pt	Specifies the default font and default font size for the Await-and-Experience.

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

Style sheets may also brand utilize 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 and so on. Each of the different font sizes may be defined in style sheet, every bit shown:

Font Styles and Their Properties

Mode	Properties	Description
VerySmallFont	includeStyle = DefaultFont font-size = -2pt	A very pocket-size version of the default font. This mode is used for very pocket-size 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 big version of the default font.

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

Font Size Styles for Microsoft Cyberspace Explorer

The DefaultFont mode may exist defined twice, in one case in a generic style sheet as described previously, and once in an surround-specific style sheet. The latter style sheet overrides the default font size specifically for the Microsoft Internet Explorer (IE) browser, to have 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 signal units, simply does work with sizes specified using the CSS "absolute size" keywords. Hence, the IE-specific style sheet uses the "ten-modest" keyword for its default font size, which is rendered as 10 point text by default. The size is scalable, and so the other font sizes defined for IE are specified equally a percentage of the default font size.

Font Styles for Microsoft Internet Explorer

Fashion	Properties	Description
DefaultFont	font-size = ten-modest	Overrides the default font size specifically for the Microsoft Internet Explorer (IE) browser.
VerySmallFont	font-size = 67%	A very minor version of the default font specifically for IE.

To change the default font size for IE, employ the Customize Await-and-Feel UI to update the Wait-and-Experience for the IE browser. Modify the DefaultFont manner such that the value of its font-size property is changed to something similar pocket-sized.

Color Styles

The Browser Expect-and-Feel makes employ of 4 colors that you may potentially want to alter:

• Text foreground color - Color used for near all text. The default is blackness.

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

• Core background color - This is the default blueish colour that appears throughout the user interface. For example, the color is used as the groundwork color for the selected link in the level one tab bar, too as the background color of the global header and footer. A way sail may derive a colour ramp that includes lighter and darker shades based on the cadre background color. For example, a Look-and-Feel may take a calorie-free 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 instance, the color is used as the background color for the unselected links in the level i tab bar. As with the core groundwork color, style sheets may derive a colour ramp based on the accent background colour. For example, the dark brown foreground color used for hypertext links, as well as the lighter yellowish colors used for action push backgrounds may be variations of the accent background color.

As is the case with fonts, fashion sheets may apply the <includeStyle> element to share the set of color-related named styles with other defined styles. Then if you wish to change the colors in the user interface, you demand just override these four named styles using the Customize Look-and-Experience UI (CLAF). These iv color styles are defined every bit follows:

Four Named Styles for CLAF and Their Backdrop

Style	Properties	Description
TextForeground	color = #000000	The default text foreground color (black).
TextBackground	background-color = #ffffff	The default text background color (white).
DarkBackground	background-colour = #336699	The primary background color in the core color ramp. Also known every bit the Core background color.
DarkAccentBackground	background-color = #cccc99	The primary background color in the emphasis color ramp. As well known equally the Accent groundwork colour.

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

If you make up one's mind to customize the colors for the user interface, yous should endeavour to maintain the contrasts betwixt the text foreground and background colors, besides as between the core and accent colors.

In general, attempt to select colors from the web condom colour palette, as these colors take the most consistent results across the widest range of browsers and platforms. The web prophylactic color palette is a set of 216 colors, where each red, light-green, or blueish 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 colour. Equally a result, selecting very nighttime or very calorie-free color values may result in less distinction between various darker or lighter shades in the color ramp.

CSS Style Lookup

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

Detail Manner and Fashion Type Pick folio

To access the Item Style and Fashion Type Pick page:

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

2. Utilize the Oracle E-Business organization Suite Menus form to add the function FWK_CSS_LOOKUP to your Organization Administration menu.

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

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

2. Select FWK CSS Style Lookup from the card.

3. In the Item Manner and Style Type Selection folio, there is a required Particular Style poplist and a Mode Type poplist. Utilize the Item Style poplist to select an detail style for which a CSS Style may be practical. Use the Style Type poplist to select a CSS Style to apply. The Fashion Type poplist lets y'all select from all the CSS styles that accept a selector divers in custom.xss. If you select All Styles, the selected item renders with all the available CSS styles applied.

4. Cull Go to utilize the CSS style(s). The results are displayed in a tabular array with ii columns. The first column lists the name of the CSS style that has been applied and the 2nd column renders the item way with the CSS style applied to information technology.

Note: If the selected Item Style is Text Input or Static Styled Text, the results tabular array displays three columns. The kickoff column always lists the name of the CSS style that has been applied. For Text Input, the 2d cavalcade renders the Text Input with the applied CSS style, and the tertiary column renders the Text Input equally a multi-line Text Area with the applied CSS style. For Static Styled Text, the 2d column renders the Static Styled Text with the practical CSS style, and the third column renders the Static Styled Text as a URL with the applied CSS style.

hernandezhatimor.blogspot.com

Source: https://docs.oracle.com/cd/E26401_01/doc.122/e22031/T406873T410703.htm

Share this post