Using Theme Styles and Theme Roller

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. Universal Theme - 42 includes theme styles.

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

Creating a Theme Style

To create a theme style:

  1. 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.
  2. Select a theme and click the Styles tab.
  3. Click Add Style.

    The Theme Styles page appears.

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

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

  6. Click Create.

Editing a Theme Style from the Themes Page

To edit a Theme Style:

  1. 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.
  2. Click the theme name.
  3. Select a theme and click the Styles tab.
  4. Select a theme style.

    The Theme Styles page appears.

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

  6. To delete the current theme style, click Delete.
  7. Click Create.

Editing a Theme Style from the User Interface Page

To edit a Theme Style from the User Interface page:

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

  2. Locate the user interface (for example, Desktop) and click the Theme Style name.

    The Theme Styles page appears.

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

  4. To delete the current theme style, click Delete.
  5. Click Create.

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:

  1. Create an application which has at least two theme styles.
  2. 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.

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

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:

To see an example of Theme Roller, install and run a productivity or sample application that uses the Universal Theme - 42."Utilizing the App Gallery."

To use Theme Roller:

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

    Tip:

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

  2. Click Theme Roller on the Runtime Developer Toolbar.

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

    Hover over active icons and menus to view their names.

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

  4. From Style, select a new style, choose an existing style from the list.
  5. Under Global Colors, click the color swatch to select new colors.
  6. 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.

  7. To set the theme style you are working as the current one for the application.
  8. 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.