13.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
A theme style is a CSS style sheet that is added to the base CSS to alter the look and feel of an application. - Creating a Theme Style
Create a theme style by selecting an existing style and selecting Add Style. - Editing a Theme Style from the Themes Page
Edit a theme style from the Themes page. - Editing a Theme Style from the User Interface Page
Edit a theme style from the User Interface page. - Enabling Users to Select a Theme Style
Enable users to select a theme style in a running application. - Using Theme Roller
Use Theme Roller to quickly the appearrance of an applications without editing any code.
Parent topic: Using Themes
13.1.3.1 About Theme Styles
A theme style is 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
13.1.3.2 Creating a Theme Style
Create a theme style by selecting an existing style and selecting Add Style.
To create a theme style:
Parent topic: Using Theme Styles and Theme Roller
13.1.3.3 Editing a Theme Style from the Themes Page
Edit a theme style from the Themes page.
To edit a theme style:
Parent topic: Using Theme Styles and Theme Roller
13.1.3.4 Editing a Theme Style from the User Interface Page
Edit 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
13.1.3.5 Enabling Users to Select a Theme Style
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:
- Enable users to choose a theme style:
- Under Attributes, set Enable End Users to choose Theme Style to On.
- Click Apply Changes.
Parent topic: Using Theme Styles and Theme Roller
13.1.3.6 Using Theme Roller
Use Theme Roller to quickly the appearrance of an applications without editing any code.
Tip:
To see an example of Theme Roller, install and run a productivity or sample application that uses the Universal Theme - 42. See "Utilizing the App Gallery."
Tip:
Theme Roller only displays in the Runtime Developer Toolbar if theme styles have been defined. See "Editing a Theme" and "Creating a Theme Style."
To use Theme Roller:
Parent topic: Using Theme Styles and Theme Roller