11.1 Using Themes

Use themes and theme styles to increase your productivity when building an application. Themes are collections of templates that define the layout and style of an application. If a theme includes themes styles, developers can can alter the appearance of an application using the Theme Roller Utility.

Topics:

11.1.1 About Themes

Themes are collections of templates that enable you to define the layout and style of an entire application. The idea behind a theme is to provide a complete set of templates that accommodate every UI pattern that may be needed in an application. Templates are organized first by template type and then by template class. Template types include page, region, report, list, button, label, and popup list of values (LOV).

Each template type has a number of template classes. A template class defines the purpose of a template within a template type. For example, a region template can be classified as a form region template, a report region template, and so on. These classifications enable Oracle Application Express to map templates among themes, making it easy to quickly change the entire look and feel of an application.

Oracle Application Express ships with an extensive theme repository. Administrators can add themes to the theme repository as follows:

Workspace Themes - Workspace administrators can create themes that are available to all developers within the workspace. See "Managing Workspace Themes."
Public Themes - Instance administrators can create public themes by adding them to the Oracle Application Express Administration Services. Once added, these public themes are available to all developers across all workspaces in an instance. See "Managing Public Themes" in Oracle Application Express Administration Guide.

Newer themes, such as Universal Theme - 42 and Mobile - 51, include theme styles. A theme style is a CSS style sheet that is added to the base CSS. Developers can change the appearance of an application by altering the theme style using the Theme Roller utility.

See Also:

"Using Theme Styles"

11.1.2 About Responsive Design

Responsive design enables you to design web pages so that the layout fits the available space regardless of the device on which page displays (for example, a desktop computer, laptop computer, tablet, or smartphone). By implementing a responsive design, the user gets the full experience on larger screens. On smart phones and tablets, the layout can also adjust to the size of the specific device. During this resizing process, elements shift position, re-size, or become hidden. The goal of responsive design is to present all essential content in a user friendly way for all possible screen sizes. Universal Theme - 42 is an example of a responsive user interface theme.

Keep in mind, that responsive design is not just a matter of picking one set of templates. As the application developer, you are responsible for using the templates in theme and design a page to facilitate a truly responsive design. Converting an existing application to the Universal Theme requires you review all the application pages to ensure you have defined the appropriate template and layout.

Oracle Application Express provides responsive user interface themes that enable you to build applications that can scale to any screen size. Universal Theme - 42 is a responsive Desktop theme. Developers can use this theme to build applications that work well on a variety of different screen sizes.

Mobile Theme - 51 enables you to build applications that are optimized for the use on mobile devices such as smartphones and tablets. Pages built with the Mobile theme are smaller and lighter weight than Desktop pages and provide support for touch-events and orientation-change.

Tip:

See "Utilizing Packaged Applications" to view applications using Universal Theme - 42

11.1.3 About Grid-based Themes

Oracle Application Express applications define the position of regions and items on a page using grid settings. Older themes, such as such as Theme 26 - Productivity Applications, use a table-based grid. In table-based themes, regions can be positioned next to each one another and forms can have two or more items in a single row. Newer themes, such a Universal Theme - 42, use a DIV-based grid. Pages using a DIV-based grid offer the following advantages:

Easier to maintain and update. DIV-based pages have less code and therefore less complexity.
Faster loading. Pages using a DIV-based grid generally load faster.

If you switch from a table-based theme to a DIV-based theme, you need to configure the Reset Grid option, Reset fixed region position in the Switch Theme Wizard. Selecting Reset fixed region position removes existing settings and renders all regions and items stacked vertically.

See Also:

"Switching Themes"

11.1.4 Using Theme Styles

Newer themes, such as Universal Theme - 42 and Mobile - 51, include theme styles. A theme style is a CSS that is added to the base CSS. Using the Theme Roller utility, developers can change the appearance of an application.

Topics:

11.1.4.1 About Theme Styles

A theme style defines a CSS style sheet that is added to the base CSS to alter the look and feel of an application. Newer themes such as Universal Theme - 42 and Mobile - 51 can have a base CSS file plus the theme style CSS file. The theme style CSS file are referenced in the page template using the #THEME_STYLE_CSS# substitution string. The Application Express engine replaces this substitution string with the CSS file references defined in the theme style attributes. Use theme styles to customize themes, to switch to a different color scheme, apply a flat look, or make a theme responsive. A theme can have multiple theme styles with one style set as active. You can modify a theme style CSS file using Theme Roller.

Once defined, developers can select a theme style by:

Editing the Theme Styles attribute when running the Create Application Wizard. See "Using the Create Application Wizard."
Editing the User Interface. See "Editing a Theme Style from the User Interface Page."
Accessing the Create/Edit Theme page. See "Editing a Theme" and "Creating a Theme Style."

11.1.4.2 Creating a Theme Style

To create a theme style:

Navigate to the Themes page:
1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. Click Shared Components.
4. Under User Interface, select Themes.
Select a theme and click the Styles tab.
Click Add Style.

The Theme Styles page appears.
For Settings:
1. Name - Provide a short descriptive name for the theme style.
2. Is Current - Select whether this style is the current style used by the theme.
3. Is Public - Select whether this style can be chosen by end users.
4. File URLs - Select whether this style is the current style used by the theme.
To learn more about an attribute, see field-level help.
For Theme Roller Attributes:
1. Read Only - Select Yes to prevent any updates to the theme style. Select No to enable the theme style to be edited and overwritten using Theme Roller.
2. Input Parameter File URLs - Enter the LESS file URLs that will be used to generate this theme style when using Theme Roller.
3. Output CSS File URL- Enter the URL for the CSS file that will be generated by Theme Roller for this theme style. .
4. Theme Roller JSON Configuration, JSON Configuration - The JSON configuration is generated by Theme Roller when the theme style is saved.
  
  Oracle does not recommend manually updating the configuration. However, you can copy a JSON configuration from another theme style, such as a theme style in another application, to manually update the configuration.
Click Create.

11.1.4.3 Editing a Theme Style from the Themes Page

To edit a Theme Style:

Navigate to the Themes page:
1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. Click Shared Components.
4. Under User Interface, select Themes.
Click the theme name.
Select a theme and click the Styles tab.
Select a theme style.

The Theme Styles page appears.
To make changes to the current theme style, edit the appropriate attributes and click Apply Changes.

To learn more about an attribute, see field-level help.
To delete the current theme style, click Delete.
Click Create.

11.1.4.4 Editing a Theme Style from the User Interface Page

To edit a Theme Style from the User Interface page:

Navigate to the User Interface page:
1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. Click Shared Components.
4. Under User Interface, click User Interface Attributes.
  
  The User Interface page appears.
Locate the user interface (for example, Desktop) and click the Theme Style name.

The Theme Styles page appears.
To make changes to the current theme style, edit the appropriate attributes and click Apply Changes.

To learn more about an attribute, see field-level help.
To delete the current theme style, click Delete.
Click Create.

11.1.4.5 Enabling Users to Select a Theme Style

Developers can enable users to select a theme style in a running application. Once enabled, a Customize link appears in the running application, typically in the lower left corner. When the user clicks the Customize link a pop-up displays listing available theme styles. When a user selects a theme style, the theme style is stored persistently as a user preference and will be retained during future sessions.

To enable users to select a theme style:

Create an application which has at least two theme styles.
Go to the application User Interface page:
1. Click Shared Components.
2. Under User Interface, click User Interface Attributes.
  
  The User Interface Attributes page appears. Defined User Interfaces display at the top of the page.
Edit the User Interface Details.
1. Click the Edit icon adjacent to the appropriate user Interface (for example, Desktop).
2. Under Attributes, set Enable End Users to choose Theme Style to Yes.
3. Click Apply Changes.
Edit each theme style and set the Is Public attribute to Yes.
1. On the User Interface page, click the theme style name (for example, Vita).
2. Under Settings, set Is Public to Yes.
3. Click Apply Changes.
  
  The User Interface page reappears.

11.1.4.6 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. Theme Roller displays in the Runtime Developer Toolbar if at least one of your theme styles has the Input Parameter File URLs attribute defined.

Tip:

Install and run a packaged application that uses the Universal Theme - 42 to see an example of Theme Roller. See "Utilizing Packaged Applications."

To use Theme Roller:

Preview the page by running it.

When a developer run a desktop application, the Runtime Developer toolbar displays at the bottom of any editable running page.

Description of the illustration GUID-997B3C83-EAA3-48EE-A43E-8661897579BB-default.png

Tip:

Theme Roller only displays in the Runtime Developer Toolbar if theme styles have been defined. See "Editing a Theme" and "Styles."
Click Theme Roller on the Runtime Developer Toolbar.

Theme Roller fetches the styles for your application and loads them in the editor.

Description of the illustration GUID-C0AC3DEF-BF10-4F2E-865D-0BB9B48A951F-default.png

Hover over active icons and menus to view their names.
You can expand or collapse sections by clicking on the section names. Primary control include:
- Show Common - Displays all attributes.
  
  Tip:
  
  Altering the Custom CSS section can override the theme style of Universal Theme. Be careful with the selector you use in this section. Hiding or obscuring content may degrade your user's experience.
- Show All - Displays all attributes.
- Undo - Reverts the currently edited theme to the previous action. This feature will not work if you have switched themes.
- Redo - Dismisses the current Undo revision and goes to the next one in the history. This feature will not work if you have switched themes.
- Search - Search for properties, groups, and colors. As you search, Theme Roller automatically displays only properties that match your search string.
- Reset - Reverts the selected theme to the last version saved on the server. After resetting your theme and reloading your page, you can use Undo and Redo to restore your changes.
- Help - Displays a Help window.
From Style, select a new style, choose an existing style from the list.
Under Global Colors, click the color swatch to select new colors.
To edit a specific component, expand a group and select new colors or styling of the component you wish to edit.

For attributes that support the selection of foreground and background colors, the check box preceding the two color selections indicates color contrast information based on Web Content Accessibility Guidelines (WCAG) 2.0. A higher calculated contrast score indicates that the color combination is more accessible.

Tip:

to set the theme style you are working as the current one for the application, click Set as Current.
To set the theme style you are working as the current one for the application.
Click Save to commit your changes to the server. If the selected theme is read only, then click Save As to save your changes as a new theme.

11.1.5 Understanding Template Options

Template options provide a declarative way for developers to apply different styles to components on an Oracle Application Express page.

Topics:

11.1.5.1 About Template Options

Template options enable developers to declaratively apply CSS modifiers to the templates they have chosen for pages, regions, reports, lists, breadcrumbs, items and buttons. A CSS modifier is a reference to a CSS class defined in a CSS style sheet. CSS modifiers enable a developer to use the same HTML markup but present it in a variety of different styles simply by applying a CSS. Template options reduce the need to have a large number of nearly identical templates defined in a theme in order to achieve different styles for button colors, region widths, font settings, item label markup, and so on.

Examples of how developers can use template options include:

Applying different colors or accents
Applying different spacing and padding
Rendering buttons in different styles, with and without icons
Displaying form fields with different alignments.

Without template options, applying these variations would require a large number of nearly identical templates, or in-depth knowledge of CSS. Components that support template options include: pages; regions; classic reports; breadcrumbs; lists; items and labels; and buttons.

11.1.5.2 About Default Template Options

Developers can select template options that are not part of a template option group to be the default for a template. App Builder automatically applies default template options by rendering the component that references the template. Default template options are not written to an actual component. Instead, a #DEFAULT# substitution string is defined for the component, thus enabling developers to centrally modify the template option defaults.

Developers can choose not to use the template option defaults, which removes the #DEFAULT# substitution string from the component. If template option defaults are disabled, then developers can selectively apply available template options to a component. All template options that are selected directly when editing the component are written to the component's metadata, represented by their corresponding CSS classes string. At runtime, the selected template options and default template option are part of the default are combined with the component's CSS classes string and applied to the component.

11.1.5.3 About Template Option Groups and Presets

Developers can define the purpose of related template options by creating template option groups. Examples of template option groups include Button Size, Button Style, List Examples, List Style, and Form Label Position. When developers create a template option group, they can specify a template option preset at the template-level. For example, suppose you have a button template that has the template options Large and Small. If you define Small as the preset, then any new button referencing the template would automatically have the template option Small applied to it when is it created. Template options that are part of a group are optional unless a present is defined at the template-level.

11.1.6 Accessing the Themes Page

You manage themes on the Themes page.

Tip:

You can change the selected default templates for a theme on the Create/Edit Theme page. See "Editing Themes".

To access the Themes page:

On the Workspace home page, click the App Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.

The Themes page appears.
Click the View Report icon.

The Themes page appears as a report. A check mark in the Is Current column indicates which theme is selected.
Click the theme name.

The Edit Theme page appears.

11.1.7 Editing Themes

This section describes how to edit a theme attributes.

Topics:

See Also:

"Creating Custom Themes"

11.1.7.1 Editing a Theme

To review or edit a theme:

On the Workspace home page, click the App Builder icon.
Select an application.
Click Shared Components.
Under User Interface, select Themes.

The Themes page appears.
On the Themes page, click the View Report icon.
The Themes page appears as a report. A check mark in the Is Current column indicates which theme is selected.
Click the theme name.

The Create/Edit Theme page appears and is divided into sections.
Edit the appropriate Theme attributes as described in "Theme Attributes."
To save any changes, click Apply Changes.

11.1.7.2 Theme Attributes

This section describes the attributes on the Create/Edit Theme Attributes page. To learn more about an attribute and view examples, see field-level Help.

Topics:

11.1.7.2.1 Name

Table 11-1 describes the attributes under Name.

Table 11-1 Name

Attribute	Description
Application	Identifies the current application ID. See Also: "Editing Application Attributes"
Theme Number	Identifies the number of a theme. A theme is a collection of templates which define the user interface of an application.
Name	Enter a short descriptive name for the theme.
User Interface	Specifies the user interface for which the theme is designed. See Also: "User Interface Details Page"
Navigation Type	Identifies the selected Navigation Type. Valid options include: Tabs or List. See Also: "Creating Tabs" and "Creating Lists"
Navigation Bar Implementation	Identifies the selected Navigation Bar Implementation. Valid options include: Classic or List. See Also: "User Interface Details Page"
Description	Enter a description for the theme.

11.1.7.2.2 Theme Subscription

Displays themes to which this application subscribes. When an application subscribes to a theme, all theme attributes, subscribed template options, and subscribed templates are set to read-only.

See Also:

"Understanding Theme Subscriptions"

11.1.7.2.3 JavaScript and Cascading Style Sheets

Table 11-2 describes the attributes under JavaScript and Cascading Style Sheets.

Table 11-2 JavaScript and Cascading Style Sheets

Attribute Description

Attribute	Description
JavaScript File URLs	Enter JavaScript file URLs for code to be loaded on every page. Each URL has to be written into a new line. If you provide a minified version of your file, you can use the substitution string `#MIN#` to include `.min` or `#MIN_DIRECTORY#` to include `minified/` in your file URL for a regular page view and an empty string if the page is viewed in debug mode.JavaScript file URLs you enter here replaces the `#THEME_JAVASCRIPT#` substitution string in the page template To view examples, see field-level Help.
CSS File URLs	Enter Cascading Style Sheet file URLs to be loaded on every page. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string `#MIN#` to include `.min` or `#MIN_DIRECTORY#` to include `minified/` in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string `#APP_VERSION#` if you want to include the application's version in the file URL.File URLs you enter here will replace the `#THEME_CSS#` substitution string in the page template. To view examples, see field-level Help.

JavaScript File URLs

Enter JavaScript file URLs for code to be loaded on every page. Each URL has to be written into a new line. If you provide a minified version of your file, you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode.JavaScript file URLs you enter here replaces the #THEME_JAVASCRIPT# substitution string in the page template

To view examples, see field-level Help.

CSS File URLs

Enter Cascading Style Sheet file URLs to be loaded on every page. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string #MIN# to include .min or #MIN_DIRECTORY# to include minified/ in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string #APP_VERSION# if you want to include the application's version in the file URL.File URLs you enter here will replace the #THEME_CSS# substitution string in the page template.

To view examples, see field-level Help.

11.1.7.2.4 Component Defaults

Table 11-3 describes the default templates by component type.

Table 11-3 Component Default Templates

Attribute	Description
Page	Identifies the default template for displaying pages. If a developer does not explicitly choose a template, then the Application Express engine uses the template specified here. See Also: "Display Attributes"
Navigation Bar List	Specifies the default navigation bar list template used when you define the navigation bar type as List in your application. If a developer does not explicitly choose a template, then the Application Express engine uses the template specified here. See Also: "Display Attributes"
Navigation Menu List Position	Specifies the default navigation menu list position.
Navigation Menu List (Top)	Specifies the default navigation menu list template used when you create a new list to be displayed on the top of the page.
Navigation Menu List (Side)	Specifies the default navigation menu list template used when you create a new list to be displayed on the side of the page.
Login Page	Specifies the default template for displaying pages. If a developer does not explicitly choose a template then the Application Express engine uses the template specified here.
Error Page	Optional. Specifies a page template to use for errors that display on a separate page as opposed to those that display inline. Leave this attribute blank if you do not wish to use a template designed to display errors. This setting only applies to Normal pages.
Printer Friendly Page	Identifies the template to be used when the Application Express engine is in printer friendly mode. When calling the Application Express to render a page, you have the option to identify a printer friendly attribute with values of Yes or No. If you select Yes, then the page displays using a printer friendly template. The Application Express engine displays all text within HTML form fields as text. The printer friendly template does not need to have the `#FORM_OPEN#` or `#FORM_CLOSE#` tags. The objective is to be able to display information with few tables and in a format suitable for printing.
Breadcrumb	Identifies the default breadcrumb template used when you create a breadcrumb.
Button	Identifies the default button template used when you create a button.
Legacy Calendar	Specifies the default calendar template used when you create a calendar.
Default Label	Specifies the default label template used when you create new label
Optional Label	Specifies the default optional label template used when you create new label.
Page Template Options	Template options allow for selecting a number of CSS customization settings to be applied to the current page template. Template options and their corresponding CSS classes are defined at the page template level. The page template needs to have the substitution string `#PAGE_CSS_CLASSES#` defined in either the page header or body. The string `#PAGE_CSS_CLASSES#` is substituted for any manually entered page CSS classes, which are combined with the CSS classes defined by the selected template options.
Required Label	Specifies the default required label template used when you create new label.
List	Specifies the default list template used when you create a list.
Region	Specifies the default region template used when you create a region.
Classic Report	Identifies the default region template used when you create a report.
Header Toolbar	Identifies the default header toolbar region template used when you create a new page that includes a header or footer tool bars.
Footer Toolbar	Identifies the default header toolbar region template used when you create a new page that includes a header or footer tool bars.

11.1.7.2.5 Region Defaults

Table 11-4 describes the default templates available under Region Defaults.

Table 11-4 Region Defaults

Attribute	Description
Breadcrumb	Identifies the default breadcrumb template used when you create a breadcrumb.
Charts	Specifies the default chart template used when you create a chart.
Forms	Specifies the default form template used when you create a form.
Lists	Specifies the default region template used when you create a list.
Reports	Specifies the default region template used when you create a report.
Tabular Forms	Specifies the default region template used when you create a tabular form.
Wizards	Specifies the default region template used when you create a new wizard component.
Interactive Reports	Specifies the default region template used when you create an interactive report

11.1.7.2.6 Dialog Defaults

Table 11-5 describes the default templates available under Dialog Defaults.

Table 11-5 Dialog Defaults

Attribute	Description
Dialog Content Region	Specifies the default region template used when you create a content region on a Dialog using the Create Page Wizard and Create Application Wizard.
Dialog Button Region	Specifies the default region template used when you create a button region on a Dialog using the Create Page Wizard and Create Application Wizard.
Dialog Page	Specifies the default template for displaying modal or non-modal dialog pages. If a developer does not explicitly choose a template then the Application Express engine uses the template specified here. This template will also be used for errors that display on a separate page as opposed to those that display inline.

11.1.7.2.7 Transition Defaults

Transition Defaults is only visible for a Mobile theme. Table 11-6 describes attributes available under Transition Defaults.

Table 11-6 Transition Defaults

Attribute	Description
Page Transition	Specifies the transition which should be used when navigating to a new page or when the page is getting submitted.
Popup Transition	Specifies the transition which should be used when a popup is opened.

11.1.7.2.8 Global Templates Options

Global template options are defined at the theme-level and are available for all components of a given type.

11.1.7.2.9 Icons

Table 11-7 describes attributes under Icons.

Table 11-7 Icons

Attribute	Description
Library	Select the icon library that is loaded when Oracle Application Express displays a page. The icons within the library are also be listed in the picker for Region and Button Icon CSS Classes, implemented within Page Designer.
Custom Library File URLs	Enter Cascading Style Sheet file URLs for custom icons to be loaded on every page. Each URL has to be written into a new line. If you provide a minified version of your file you can use the substitution string `#MIN#` to include `.min` or `#MIN_DIRECTORY#` to include `minified/` in your file URL for a regular page view and an empty string if the page is viewed in debug mode. You also have access to the substitution string `#APP_VERSION#` if you want to include the application's version in the file URL.File URLs you enter here will replace the `#THEME_CSS#` substitution string in the page template. To view examples, see field-level Help.
Custom Classes	Specify a comma delimited list of CSS class names which is listed in the picker for Region and Button Icon CSS Classes, implemented within Page Designer.
Custom Prefix Class	Specify a CSS class that will at runtime prefix the Icon CSS Classes defined for Regions, Buttons and Lists, if they are not using a class of the Icon Library.
Date Picker Icon Name	Enter the name and location of the image to be used when items of type Date Picker are displayed. For example: #IMAGE_PREFIX#new_cal.bmp
Date Picker Icon Attributes	Enter the image attributes for the Calendar Icon. For example: width="16" height="16" alt="Display Calendar"

11.1.7.2.10 Image

Use the Custom Image attribute to specify whether this theme uses a default theme image or an uploaded theme image. Select Yes or No.

11.1.7.2.11 Styles

Displays theme styles available to the current theme. Theme Styles define the CSS for your application's theme and control the user interface of your application. Theme styles are referenced in the page template using the #THEME_STYLE_CSS# substitution string. The Theme Style currently used displays a check mark under Is Current.

See Also:

"Using Theme Styles"

11.1.7.2.12 Files

The File Prefix attribute displays the virtual path the Web server uses to point to the files of the theme. Do not specify anything to reference files which are stored with your theme definition in the database. For performance reasons you can also store your theme files on your Web Server. Use #IMAGE_PREFIX# or any valid URL to reference them under Styles.