Implementation Guide for Oracle Billing Insight > About Customizing Oracle Billing Insight >

Customizing the Default UI CSS

Oracle Billing Insight uses Cascading Style Sheets (CSS) as a mechanism for adding style, such as fonts, colors, and spacing, to Web documents. You can modify the default CSS file, swan.css, for use by all defined classes.

The user interface of Oracle Billing Insight uses industry standards, including consistent page layout, navigation bars, bread crumbs, and logically labeled controls to make a consistent and intuitive user experience. The use of Cascading Style Sheets ensures separation of style from presentation.

The page layout of the Oracle Billing Insight application consists of the following body areas:

• Pagewrap elements:
  • Top_page
  • Logo
  • Userlinks
  • Tabbar and tabs
  • Subtabbar and subtabs
  • Sidecontent
    • Quicklink (Header and Quicklinklist)
    • Reportcontext (Header and Reportcontextlist)
  • Maincontent
    • Breadcrumb
    • Pageheading
    • Pagetabs (When applicable)
    • Errormessage
    • successmessage
    • Subtitle (Repeats at the top of each module)
    • Buttonbar downloadPrint (When applicable)
    • Buttonbar (When applicable)
    • Contextbox
    • Infomessage (When applicable)
    • Buttonbar (When applicable)
• Clearline
• Footer

Oracle Billing Insight calls the CSS file from the main templates, which are in the _templates directory. The JSP file names are:

• simplelayout.jsp
• simplelayout1.jsp
• popupLayout.jsp
• paymentLayout.jsp
• dashBoardLayout.jsp

To customize the default UI CSS

1. If you configured the dynamic CSS file feature during installation, then go to the following directory:
   • UNIX. EDX_HOME/config/_assets/
   • Windows. EDX_HOME\config\_assets/

     Otherwise, explode the Oracle Billing Insight EAR file, and go to the /_assets directory in the WAR file.

2. Copy and rename the default swan.css file to a new directory, such as /_assets/MyDefault/MyDefault.css.
3. Edit the new default CSS file for the preferred look and feel.
4. Add any new images linked in the CSS file to the new directory.
5. Modify the CSS_REFERENCE field in the EDX_SYS_BRAND table in the OLTP schema to point to the new default directory.

   The default swan.css file is referenced by the default brand key value in the CODE field of the EDX_SYS_BRAND table.

6. Redeploy the EAR file, if necessary.