DBA Hub

📋Steps in this guide1/6

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

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.

oracle miscconfigurationintermediate
by OracleDba
12 views
1

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

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. - Click the "Apply Changes" button.

Code/Command (click line numbers to comment):

1
2
3
#WORKSPACE_IMAGES#my-logo.png

#APP_IMAGES#my-logo.png
3

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

Code/Command (click line numbers to comment):

1
hgroup {background:#063940;}
4

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. - Click the "Apply Changes" button. The CSS should now be included in the page if you view the source.

Code/Command (click line numbers to comment):

1
2
3
<link rel="stylesheet" href="#WORKSPACE_IMAGES#my-apex.css" type="text/css">

<link rel="stylesheet" href="#APP_IMAGES#my-apex.css" type="text/css">
5

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

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: - Using Custom Cascading Style Sheets - Managing Workspace Themes - APEX Articles Hope this helps. Regards Tim...

Comments (0)

Please to add comments

No comments yet. Be the first to comment!