8i | 9i | 10g | 11g | 12c | 13c | 18c | 19c | 21c | 23ai | Misc | PL/SQL | SQL | RAC | WebLogic | Linux

Oracle Application Express (APEX) 4.2 Basic Themes and Cascading Style Sheets (CSS)

From APEX 5 onward Oracle recommend using the Universal Theme, which you can customise using the Theme Roller to create unique Theme Styles. If you are using APEX 5 or above, please don't follow the advice in this article!

This article covers some really basic information about APEX themes and CSS. It is meant as a quick pointer to help you start customizing your APEX look and feel.

Load a New Workspace Image
Reference a Logo Image
Load a CSS
Reference a CSS
Create a Workspace Theme
Using a Workspace Theme

Load a New Workspace Image

Workspace images are available for all applications to use. Application images are only usable by the specified application.

To create a new workspace image, do the following.

Application Builder > Application > Shared Components > Images
Click the "Create" button.
Use the "Choose file" button to browse for the image file, then click the "Upload" button.
Click on the resulting image.
Notice the application is set to "No Application Associated". This means it is a Workspace Image. Click the "Cancel" button.

To create an application specific image do the following.

Repeat the previous process, but in the "Edit Image Attributes" screen select the required application and click the "Apply Changes".

Reference a Logo Image

The application logo can be replaced by an image as follows.

Application Builder > Application > Shared Components > User Interface Attributes
Under the "Logo" section, select the Logo Type of "Image" and enter the URL of the image. If this is an uploaded image it will be something like this, depending on if it is a workspace or application image.
```
#WORKSPACE_IMAGES#my-logo.png

#APP_IMAGES#my-logo.png
```
Click the "Apply Changes" button.

Load a CSS

A custom cascading style sheet (CSS) can be used to alter the look and feel of APEX applications. A CSS is loaded as follows.

Application Builder > Application > Shared Components > Cascading Style Sheets
Click the "Create" button.
Use the "Choose file" button to browse for the CSS file, then click the "Upload" button. In this case my CSS file just contained the following to change the header background.
```
hgroup {background:#063940;}
```
Click on the resulting CSS.
You can edit the contents here and click the "Apply Changes" button. Alternatively, remove it using the "Delete" button and recreate it using an updated file.

Reference a CSS

Add a link to a custom CCS in your page templates as follows.

Application Builder > Application > Shared Components > Themes
Select the page you want to edit. In my case the default page is "One Level Tabs - No Sidebar", so I will click on that page to navigate to the "Edit Page Template" for that page.
Add the following type of link before the "</head>" tag, using the relevant location indicator. If the CCS is external to APEX, use the relevant URL.
```
<link rel="stylesheet" href="#WORKSPACE_IMAGES#my-apex.css" type="text/css">

<link rel="stylesheet" href="#APP_IMAGES#my-apex.css" type="text/css">
```
Click the "Apply Changes" button.

The CSS should now be included in the page if you view the source.

Create a Workspace Theme

Once you are happy with your theme, you can make it available to other applications in the workspace by using it to create a workspace theme.

Application Builder > Application > Shared Components > Themes > Manage Workspace Themes (Tasks)
Select the "Create" option and Click the "Next" button.
Select the theme you want to copy and click the "Next" button.
Specify a Theme Name and click the "Next" button.
Click the "Create Workspace Theme" button.

Using a Workspace Theme

When creating a new application, workspace themes are presented under the theme type of "Custom Themes". Once that option is selected the workspace themes are displayed and available for use as normal.

The following example explains how to switch themes to a workspace theme.

Application Builder > Application > Shared Components > Themes
Click the "Create" button.
Select the "From the Repository" option and click the "Next" button.
Accept the "Desktop" user interface by clicking the "Next" button.
Select the Theme Type of "Custom" and select the workspace theme of your choice. If you have clicked the checkbox you will have to click the "Next" button. If you have click the image you will be moved forward directly.
Click the "Create" button.
Click the "Switch Theme" button.
Select the current and new themes and click the "Next" button.
Check for any issue. If you are happy, click the "Next" button.
Click the "Switch Theme" button.

The application is now using the workspace theme.

For more information see:

Hope this helps. Regards Tim...

Back to the Top.