Oracle Fusion Theme Style for APEX

This blog provides a APEX Theme Style and instructions on how to make use of Redwood components in order to resemble Oracle Fusion. This is so that Oracle Fusion applications can be seamlessly extended with Oracle APEX.

The idea was inspired by watching an Ollie Waters presentation at UKOUG Discover ‘24. We spoke the following day and his help & sharing has been instrumental in the creation of this blog - many thanks.

You can see my demonstration application I constructed here.

Theme Style

You have your choice of two themes styles here, there are two provided which might suit your Oracle Fusion installation: Slate and Dark Brown.

To Import a Style, save the below to file and then use Theme Roller to import them

Slate

{
    "classes": [
        "rw-layout--fixed t-PageBody--scrollTitle",
        "rw-mode-nav--pillar",
        "rw-mode-body-header--dark",
        "rw-mode-header--pillar",
        "rw-layout--fixed t-PageBody--scrollTitle",
        "rw-mode-header--pillar",
        "rw-mode-nav--pillar",
        "rw-mode-body-header--dark",
        "rw-pillar--slate"
    ],
    "vars": {},
    "customCSS": "/* widen the Redwood Floating Container */\nbody {\n --ut-body-content-max-width: 120rem !important;\n}\n\n/*make the redwood h2 smaller */\n.t-ContentBlock-headerItems.t-ContentBlock-headerItems--title {\n --ut-content-block-header-margin: 1rem;\n --ut-content-block-header-font-size: 1.5rem;\n --ut-content-block-header-line-height: 1.5rem;\n}\n\n/* widen the Redwood Floating Container */\nbody {\n --ut-body-content-max-width: 120rem !important;\n}\n\n/*make the redwood h2 smaller */\n.t-ContentBlock-headerItems.t-ContentBlock-headerItems--title {\n --ut-content-block-header-margin: 1rem;\n --ut-content-block-header-font-size: 1.5rem;\n --ut-content-block-header-line-height: 1.5rem;\n}\n",
    "useCustomLess": "N"
}

Dark Brown

{
    "classes": [
        "rw-layout--fixed t-PageBody--scrollTitle",
        "rw-mode-nav--pillar",
        "rw-mode-body-header--dark",
        "rw-mode-header--pillar",
        "rw-layout--fixed t-PageBody--scrollTitle",
        "rw-mode-header--pillar",
        "rw-mode-nav--pillar",
        "rw-mode-body-header--dark",
        "rw-pillar--neutral"
    ],
    "vars": {},
    "customCSS": "/* widen the Redwood Floating Container */\nbody {\n --ut-body-content-max-width: 120rem !important;\n}\n\n/*make the redwood h2 smaller */\n.t-ContentBlock-headerItems.t-ContentBlock-headerItems--title {\n --ut-content-block-header-margin: 1rem;\n --ut-content-block-header-font-size: 1.5rem;\n --ut-content-block-header-line-height: 1.5rem;\n}\n\n/* widen the Redwood Floating Container */\nbody {\n --ut-body-content-max-width: 120rem !important;\n}\n\n/*make the redwood h2 smaller */\n.t-ContentBlock-headerItems.t-ContentBlock-headerItems--title {\n --ut-content-block-header-margin: 1rem;\n --ut-content-block-header-font-size: 1.5rem;\n --ut-content-block-header-line-height: 1.5rem;\n}\n\n.rw-mode-body-header--dark .t-Body-title,body:not([class*=rw-pillar--]).rw-mode-body-header--dark .t-Body-title {\n --ut-body-title-background-color: var(--rw-palette-neutral-170);\n}",
    "useCustomLess": "N"
}

The Breadcrumb must be of type Breadcrumb using the Title Bar template.

Use an Icon Button in the UP position of the Breadcrumb using the icon fa-chevron-left

Region Display Selector

This can be added as a region within the Breadcrumb Bar slot. Set the Template to Blank with Attributes and set CSS Classes to margin-bottom-sm

Step 1. Create a Menu list region

Create a List Region
Set the Region Template to Blank with Attributes
Set the Static ID to actions
Set the List Template for this region to Menu Popup

Step 2. Associate a Button to open the menu

Create a Button within the Next position of the Breadcrumb
Set the Button Template to Icon & the Icon to fa-ellipsis-v
Update Behavior to Defined by Dynamic Action
Update Custom Attributes to add data-menu="actions_menu"

Body

Use a Static Content Region with a Content Block Template & then place all other regions as sub-regions of this region

Body Regions

Add regions as a sub-region of your Content Block to suit your needs.

Redwood makes heavy use of the Content Row Theme Component with an Ellipse Icon Menu Button opening Menu Items.

ENJOY!

Whats the picture? The Stray, Harrogate. Not sure if I’ve already used this picture. Hey Ho… Visit Yorkshire