Oracle by Example brandingOracle Application Express 18: Universal Theme (3 of 4) - Exporting the Theme Style

section 0Before You Begin

This 10 minute tutorial shows you how to export your custom Theme Style and import the Theme Style to another application.

This is the third tutorial in Oracle Application Express 18: Universal Theme series. Read them sequentially.

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:

  • Complete the preceding tutorials in this series.
  • Access to Oracle Application Express Release 18.1 or later.

section 1Export the Theme Style

To export the custom style that you created in previous tutorial, follow the steps below:

  1. Right click anywhere on your running application and select Inspect to open the Browser's developer tools.
  2. Click the Console tab.
  3. Type the following code and press Enter:

    apex.utr.config();

  4. The console responds with the code similar to the following:

    Paste the following line of code into the JS console to load your current configuration into Theme Roller:

    apex.utr.config({"customCSS":".t-Header-logo-link span {font-weight: bold;}\n.a-TreeView-content {\n box-shadow: 4px 0 0 rgba(0,0,0, 0.25) inset;\n}\n.a-TreeView-content.is-selected {\n box-shadow: 4px 0 0 rgba(0,0,0, 0.5) inset;\n}\n.a-TreeView-content.is-selected .a-TreeView-label {\n font-weight: bold;\n}","vars":{"@g_Accent-BG":"#a72a30","@g_Body-Title-BG":"#034660","@g_Body-Title-FG":"#4471e3","@g_Nav-Active-BG":"#526684","@g_Body-Text":"#ffffff","@g_Actions-Col-Text":"#ffffff","@g_Region-Header-FG":"#3a343a","@menu_Tabs-Active-Text":"#df1fc9","@g_Color-Palette-14-FG":"#34373b","@g_Color-Palette-6-FG":"#dede32","@g_Region-FG":"#fcf9fc"}});

  5. Copy the code and paste in any text editor. You will use this code in the Import the Theme Style to your Application section.

section 2Create an Application

You must create an application to import the Theme Style. To create a simple application with a Dashboard page and all features, follow the steps below:

  1. Navigate to the App Builder home page and click Create.
    Create
    Description of the illustration app_builder_create.png
  2. In the Create an Application page, select New Application and click Next. The Create an Application page opens.
    New Application
    Description of the illustration create_new_app.png
  3. For Name, enter Create App Import Style.
  4. In the Pages section, click Add Page and select Dashboard.
    Add Page
    Description of the illustration create_app_add_page.png
  5. In the Add Dashboard Page, accept the defaults and click Add Page.
    Dashboard
    Description of the illustration create_app_add_page_dashboard.png
  6. In the Features section, click Check All.
    All features
    Description of the illustration create_app_features_check_all.png
  7. Click Create Application.
  8. Click Run Application to see the application.
    Run Application
    Description of the illustration create_app_run_app.png
  9. If a Sign In dialog appears, enter your workspace username and password and click Sign In.

section 3Import the Theme Style to your Application

To import the Theme Style to the new application that you created, follow the steps below:

  1. In the Create App Import Style application, click Theme Roller on the Runtime Developer Toolbar.
    Theme Roller
    Description of the illustration theme_roller.png
  2. Right click anywhere on your application and select Inspect to open the Browser's developer tools.
  3. Click the Console tab and paste the code that you copied in section 1, Export the Theme Style :

    apex.utr.config({"customCSS":".t-Header-logo-link span {font-weight: bold;}\n.a-TreeView-content {\n box-shadow: 4px 0 0 rgba(0,0,0, 0.25) inset;\n}\n.a-TreeView-content.is-selected {\n box-shadow: 4px 0 0 rgba(0,0,0, 0.5) inset;\n}\n.a-TreeView-content.is-selected .a-TreeView-label {\n font-weight: bold;\n}","vars":{"@g_Accent-BG":"#a72a30","@g_Body-Title-BG":"#034660","@g_Body-Title-FG":"#4471e3","@g_Nav-Active-BG":"#526684","@g_Body-Text":"#ffffff","@g_Actions-Col-Text":"#ffffff","@g_Region-Header-FG":"#3a343a","@menu_Tabs-Active-Text":"#df1fc9","@g_Color-Palette-14-FG":"#34373b","@g_Color-Palette-6-FG":"#dede32","@g_Region-FG":"#fcf9fc"}});

    Import Style
    Description of the illustration import_style.png

    This imports the custom style in the Custom CSS region of the Theme Roller editor.

  4. Close the browser's developer tools.
  5. Click Save As in the Theme Roller editor.
  6. For Style Name, enter Exported Theme and click Save.
    Exported Style
    Description of the illustration exported_theme.png
  7. A success dialog appears that your theme style is created. Click OK.
  8. In the Theme Roller editor, click Set as Current.
    Apply as current theme
    Description of the illustration set_as_current.png
  9. A success dialog appears that the selected theme is your application's current theme. Click OK. You have successfully imported the Theme Style to your application.

next stepNext Tutorial

Oracle Application Express 18: Universal Theme (4 of 4) - Modifying the Page Layout