Introduction
In Oracle APEX, visual consistency and branding play an essential role in user experience. APEX Style Templates allow developers to define custom visual themes and reusable CSS styling across pages, regions, buttons, and more. If you want to elevate the look of your application or apply a consistent UI pattern across many components, creating your own APEX Style Templates is the way to go. This blog post walks through how to build and apply custom style templates effectively inside Oracle APEX.
How to Create APEX Style Templates
-
Navigate to Shared Components
Open your APEX app and go to the Shared Components section. Under User Interface, choose Templates. -
Choose Template Type
Click Create to begin. APEX will prompt you to choose the template type. You can create templates for:-
Pages
-
Regions
-
Report Rows
-
Report Columns
-
Buttons
-
Lists
-
Breadcrumbs
-
Popup LOVs
Select the appropriate type for your customization. For example, to build a new region look, select Region Template.
-
-
Create a Custom Template
-
Choose From Scratch to create a completely new template, or Copy Existing if you want to modify an existing one.
-
Provide a name and optional comments describing your template's purpose.
-
Define the Template Class and assign default values.
-
-
Design the Template Markup
Under the Template Definition, you'll provide HTML structure using template substitution strings.
For example, a region template may include:<div class="custom-region #REGION_CSS_CLASSES#"> <h2>#TITLE#</h2> <div class="content">#BODY#</div> </div>Use built-in placeholders such as
#TITLE#,#BODY#,#REGION_STATIC_ID#, etc. -
Define Template Options
Template Options make your templates flexible. Add toggles, colors, or layout options that developers can choose later when using the template.
For example, you might define:-
Background Color: Light / Dark
-
Padding: Small / Medium / Large
These options are defined as named values in the template and referenced using#OPTION_NAME#in the HTML.
-
-
Assign CSS Classes and JavaScript
-
Apply standard APEX classes, your own custom classes, or both.
-
You can include default JavaScript Initialization Code if needed.
-
Add CSS rules either in the page, app-level CSS, or directly referenced via external files.
-
-
Apply the Template
-
Once saved, go to any page component (Region, Button, Report, etc.).
-
Under Appearance > Template, choose your new custom template.
-
Apply any Template Options as needed.
-
-
Preview and Adjust
-
Run your application and verify how the template looks on different screen sizes.
-
Use browser dev tools to inspect layout, styles, or spacing.
-
Make updates in Shared Components if changes are needed.
-
Tutorial: How to Create and Use APEX Style Templates
Oracle APEX provides a flexible way to create visually consistent applications through APEX Style Templates. These templates allow you to apply pre-built or custom styles to various components in your application, such as reports, forms, and regions, without needing to manually write CSS for each component.
This tutorial will guide you through the process of creating and using APEX Style Templates in your Oracle APEX application. By the end, you'll understand how to apply these templates to regions and components, customize them, and take advantage of pre-defined styles in APEX.
Step 1: Understanding APEX Style Templates
An APEX Style Template is a set of CSS styles and predefined visual components that you can apply to different parts of your APEX application, such as:
Regions (e.g., report, chart, calendar)
Forms (e.g., create, edit, update forms)
Buttons
Charts
Cards
APEX offers a collection of predefined styles such as Classic, Universal, Minimal, and more, which can be easily applied to give your application a modern and consistent look.
Step 2: Create a New Application (if you don't have one already)
Log in to your Oracle APEX workspace.
From the App Builder, click on Create.
Choose New Application and follow the steps to create a basic application with a few pages (e.g., a form and a report).
After the application is created, navigate to the App Builder.
Step 3: Explore and Use Predefined APEX Style Templates
APEX comes with a collection of predefined themes and templates that you can apply to your application components. These templates are part of the Theme you select for your application.
Navigate to Shared Components:
In the App Builder, go to Shared Components.
Under User Interface, click on Themes.
Select a Theme:
APEX provides a set of predefined themes. Choose a theme that suits your application (e.g., Universal, Classic, Redwood, etc.).
Click on the theme name (e.g., Universal).
Assign a Theme to Your Application:
After selecting the theme, click on Assign to Application to apply this theme to your entire application.
You can also customize the theme further by choosing Theme Styles or Theme Stylesheets from the Theme Settings page.
Step 4: Apply Predefined Templates to Regions
Now that your application has a theme, you can apply APEX Style Templates to specific regions. Regions are the building blocks of your application’s UI, such as reports, charts, forms, and cards.
Example 1: Apply a Style Template to a Report Region
Create a Report Region:
In App Builder, navigate to the page where you want to create the region (e.g., a report page).
Click Create > Region.
Choose Classic Report as the region type.
Set the SQL Query for the report.
Click Save.
Assign a Style Template to the Region:
Go to the Attributes tab of the report region.
Under Region Template, select one of the predefined templates. For example, choose Report - Classic or Report - Simple.
Click Save.
Example 2: Apply a Style Template to a Form Region
Create a Form Region:
In App Builder, go to the page where you want to create the form region (e.g., a create/edit form).
Click Create > Form > Form on a Table.
Select the table or view you want to create the form for and follow the steps to configure the form.
Click Save.
Assign a Style Template to the Form Region:
Under the Attributes tab of the form region, locate the Region Template dropdown.
Choose a template that fits your form’s needs. For example, select Form - Clean or Form - Standard.
Click Save.
Step 5: Customize APEX Style Templates
You may want to further customize the templates to match your application's branding. You can achieve this by modifying Theme Styles or adding your own custom CSS.
Example 1: Modify Theme Styles
Modify Theme Styles:
Navigate to Shared Components > Themes.
Click on Theme Styles.
Select the Style you want to modify (e.g., Universal Theme).
Customize the background color, font size, buttons, and other aspects of the style.
Click Save.
Example 2: Add Custom CSS
Navigate to the Page’s CSS:
In App Builder, go to the page where you want to apply custom styles.
Under the Page Attributes section, locate the Inline CSS field.
Write Custom CSS: You can write your custom CSS directly in this section. For example:
.t-Button {
background-color: #4CAF50;
color: white;
}
.t-RegionHeader {
font-size: 18px;
color: #2c3e50;
}
Save your changes, and preview the application to see the new styles in action.
Step 6: Use APEX Style Templates with Cards
Oracle APEX also allows you to use Card Regions, which are very flexible for displaying data in a visually appealing way. You can apply a style template to these cards to ensure they are consistent with the rest of your application’s theme.
Example: Apply a Template to a Card Region
Create a Card Report Region:
In App Builder, click Create > Region.
Choose Card Report as the region type.
Define the SQL Query for the cards, such as:
SELECT employee_id, first_name, last_name, job_title, department_name FROM employees
Assign a Style Template:
In the Region Attributes section, find the Region Template dropdown.
Select Card - Simple or any other predefined card template.
Save and Run the page to see the cards with the applied template.
Step 7: Advanced Customization of APEX Style Templates (Optional)
If you need more advanced customizations, you can define your own custom templates or themes:
Create a Custom Theme:
In Shared Components, under Themes, click Create to create a custom theme.
Choose a Parent Theme to base your custom theme on (e.g., Universal).
Modify the CSS, HTML structure, or JavaScript to fit your needs.
Use the Custom Theme:
Once the custom theme is created, assign it to your application by navigating to App Builder > Shared Components > Themes, and assign the custom theme to your app.
Advanced Templates:
Conclusion
Creating APEX Style Templates gives you complete control over the appearance and behavior of UI elements in your application. By leveraging shared templates, you can enforce consistency, reduce redundancy, and deliver a professional and branded user interface. With Oracle APEX's support for template options and substitution strings, even complex styling scenarios can be managed cleanly and efficiently. Use custom templates to make your APEX apps not only functional—but beautiful.
