12.1.3 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
- Creating a Theme Style
- Editing a Theme Style from the Themes Page
- Editing a Theme Style from the User Interface Page
- Enabling Users to Select a Theme Style
- Using Theme Roller
Parent topic: Using Themes
12.1.3.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 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 "Understanding Page Types, Features, and Settings."
-
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."
Parent topic: Using Theme Styles and Theme Roller
12.1.3.2 Creating a Theme Style
To create a theme style:
Parent topic: Using Theme Styles and Theme Roller
12.1.3.3 Editing a Theme Style from the Themes Page
To edit a Theme Style:
Parent topic: Using Theme Styles and Theme Roller
12.1.3.4 Editing a Theme Style from the User Interface Page
To edit a Theme Style from the User Interface page:
Parent topic: Using Theme Styles and Theme Roller
12.1.3.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:
- Edit the User Interface Details.
- Click the Edit icon adjacent to the appropriate user Interface (for example, Desktop).
- Under Attributes, set Enable End Users to choose Theme Style to Yes.
- Click Apply Changes.
- Edit each theme style and set the Is Public attribute to Yes.
Parent topic: Using Theme Styles and Theme Roller
12.1.3.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:
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:
Parent topic: Using Theme Styles and Theme Roller