Oracle Application Express 18: Universal Theme (1 of 4) - Modifying the Theme Style, Header, and Footer

Before You Begin

This 15 minute tutorial shows you how to customize the style of your application using the Runtime Developer toolbar and Theme Roller in Oracle Application Express 18. In this tutorial you learn how you can change the theme style of your application from the Themes page on Oracle Application Express 18.

This is the first tutorial in the series Oracle Application Express 18: Universal Theme. Read in the tutorials in sequence:

• Oracle Application Express 18: Universal Theme (1 of 4) - Modifying the Theme Style, Header, and Footer
• Oracle Application Express 18: Universal Theme (2 of 4) - Creating Custom Styles
• Oracle Application Express 18: Universal Theme (3 of 4) - Exporting the Theme Style
• Oracle Application Express 18: Universal Theme (4 of 4) - Modifying the Page Layout

Background

Oracle Application Express is a rapid web application development tool for the Oracle Database. Using only a web browser and limited programming experience, you can develop and deploy professional applications that are both fast and secure. Oracle Application Express is available with the Oracle Database, whether it's on-premises or in the Oracle Cloud.

In this tutorial, you use Oracle Application Express Release 18 to customize the style of your application using Theme Roller. Theme Roller is a live CSS editor that enables developers to quickly change the colors, rounded corners, and other attributes of their applications without touching a line of code.

What Do You Need?

Before starting this OBE series you should:

• Prerequisite: Complete the OBE series, Oracle Application Express 18: Create Application Wizard.
• Download and unzip files.zip into your working directory.
• Access to Oracle Application Express Release 18.1 or later.

Accessing Your Development Environment

How you sign in and access Oracle Application Express  depends upon where Oracle Application Express resides. Oracle Application Express may reside in a local on-premises Oracle Database or in a hosted environment, such as the Oracle Cloud. The sign in credentials you use to sign in differ depending upon the installation type.

• Free Workspace: Give Oracle Application Express a test run by signing up for a free workspace. To request an evaluation workspace, go to apex.oracle.com, and click Get Started for Free.
• Oracle Cloud: Develop and deploy applications without worrying about infrastructure, repair, and downtime. Oracle Application Express is available in Exadata Express Cloud Service and Database Cloud Service. However, you need to manually customize your databases to install and enable Oracle Application Express. To learn more, see Oracle Database Cloud Service.
• Oracle Application Express On-premises: Install Oracle Application Express directly within any Oracle Database and then sign in to your workspace using your sign in credentials. For details on your sign in credentials, contact your administrator or see Oracle Application Express Installation Guide.
• Oracle Application Express Pre-Built VM: Install a Pre-Built Virtual Machine (VM) which includes an Oracle Database and Oracle Application Express 18. To learn more, see Hands-On Labs.
  • Click the big red circle labeled Start .
  • Click the APEX shortcut, or enter the following URL: http://localhost:8080/ords/f?p=4550:1
  • When prompted to sign in, enter the sign in credentials (unless given other credentials to use):
  • Workspace: obe
  • Username: obe
  • Password: oracle

  Note your Application ID may be different when compared to the screenshots in this tutorial. Your Application ID is assigned automatically when you create the application.

Change the Theme Style

A theme style defines a CSS style sheet that is added to the base CSS to alter the look and feel of an application. Use theme styles to switch to a different color scheme. To change the theme style of an application that is already available in Oracle Application Express, from Vita - Red to Vita - Dark, follow the steps below:

1. Sign in to your development environment.
2. From the Oracle Application Express home page, click App Builder.
3. Select the application that you created following the Oracle Application Express 18: Create Application Wizard series.
4. Click Shared Components.

   

5. Under User Interface, click Themes.

   

6. Click Universal Theme - 42 *

   

7. Click the Styles tab and select Vita - Dark.
8. Click the Settings tab and select Yes for Is Current field.

   

9. Click Apply Changes to save the changes.
10. Click the Run Page icon in the upper right corner on the Themes page.

    

11. If a Sign In dialog appears, enter your workspace username and password and click Sign In. A rendered version of page appears.

    

    Your application now has a new theme style called Vita - Dark.

    Note: Given the original application included the Theme Style Selection feature, then administrators of the application can also change the theme style in the runtime environment.

Add a Logo to the Application Header

You can customise the header of the application to display your own logo. Firstly, you must have access to the custom logo as per the What Do You Need section. To add the logo in the header of your application, follow the steps below:

1. Click Application ID in the Runtime Developer Toolbar at the bottom of the screen for your application.

   

2. If you are prompted to open the App Builder page in this window, click OK.
3. Click Shared Components.
4. Under Files, click Static Application Files.

   

5. Click Upload File .
6. In the Upload Static Application File(s) dialog:
   • File(s): Navigate to the location where you downloaded and unzipped Files.zip and select Oracle-logo.png.
   • File Character Set: Accept the default, Unicode UTF-8.
• Unzip File: Select No.
• Click Upload.

Oracle-logo.png appears under Static Application Files and a reference value is generated.

7. From the Reference column, copy #APP_IMAGES#Oracle-logo.png .

   

8. Navigate back to the Shared Components page. Click the Shared Components breadcrumb.
9. Under User Interface, click User Interface Attributes.



10. Select the Logo tab and update the values as follows:
• For Logo Type, select Image.
• For Logo, paste the image reference value that you copied in step 7 :

#APP_IMAGES#Oracle-logo.png.

• For Logo Attribute, click the arrow button next to the field and select Image Attribute from the Search dialog.



11. Click Apply Changes.
12. In the Applications page, click Run Application.
13. If a Sign In dialog appears, enter your workspace username and password and click Sign In.

    

    You should now see the Oracle logo appearing in the header of the application.

Add a Footer

To add the Oracle copyright information to the footer of your application, follow the steps below:

1. In the running application, scroll down to the bottom of your application and notice the default footer for your application.
2. Click Application ID on the Runtime Developer Toolbar.
3. Click 0 - Global Page - Desktop to edit the attributes.

   

4. Find the Regions tab in the Gallery at the bottom of the window.
5. Right click Static Content, select Add To and select Footer.

   

6. The new Static Content region appears in both the Rendering tab (left pane) and the Layout tab (central pane), under Footer region .
 



7. In the Property Editor, find Header and Footer. In Footer Text, enter the following:

   © 2018 Oracle

   

8. In the Property Editor, find the Appearance region. For Template, select Blank with Attributes.

   

9. Click Save.
10. Return to the Application home page. Click Application ID breadcrumb.
11. Click Run Application.
12. If a Sign In dialog appears, enter your workspace username and password and click Sign In.

    

    You should now see the Oracle copyright information in the footer.

Next Tutorial

Oracle Application Express 18: Universal Theme (2 of 4) - Creating Custom Styles