11.1.4 Using Theme Roller
Use Theme Roller to quickly transform the appearance of an application without editing any code.
- About Theme Roller
Learn about the Theme Roller option available on the Customize menu on the Runtime Developer toolbar. - Using the Theme Roller Dialog
Access the Theme Roller dialog by clicking Theme Roller from the Customize menu on the Runtime Developer toolbar. - About Developer Console Integration
Use the exposed functionapex.utr.config();
in your web browser developer's console to get and set the custom CSS code and LESS compilation configuration - About the Redwood Light Theme Style
The Redwood Light theme style features a number of unique class options in Theme Roller.
Parent topic: Using Themes
11.1.4.1 About Theme Roller
Learn about the Theme Roller option available on the Customize menu on the Runtime Developer toolbar.
Theme Roller is a live CSS editor that enables you to quickly change the theme style, colors, rounded corners and other application attributes.
When you run an application from App Builder and view a page, the Runtime Developer toolbar displays at the bottom of any editable running page. To access the Theme Roller dialog, click Theme Roller from the Customize menu.
![Description of customize_menu.png follows Description of customize_menu.png follows](img/customize_menu.png)
Description of the illustration customize_menu.png
In order for Theme Roller to appear on the Runtime Developer toolbar:
- Theme styles must be defined.
- At least one theme styles must have the Input Parameter File URLs attribute defined.
Parent topic: Using Theme Roller
11.1.4.2 Using the Theme Roller Dialog
Access the Theme Roller dialog by clicking Theme Roller from the Customize menu on the Runtime Developer toolbar.
Note:
Concurrent use of the Live Template Options, Theme Roller, and Logo Editor is not supported.Tip:
Theme Roller displays on the Runtime Developer toolbar if theme styles have been defined and at least one theme styles has the Input Parameter File URLs attribute defined.Parent topic: Using Theme Roller
11.1.4.3 About Developer Console Integration
Use the exposed function apex.utr.config();
in your web
browser developer's console to get and set the custom CSS code and LESS compilation
configuration
Use the exposed function apex.utr.config();
in your web browser
developer's console to get and set the custom CSS code and LESS compilation
configuration.
To get styles, write apex.utr.config()
without parameters into
the console:
apex.utr.config();
Paste the following line of code into the JS console to load your current configuration into Theme Roller:
apex.utr.config({"classes":[],"vars":{},"customCSS":"","useCustomLess":"Y"});
![Description of dev_console_1.png follows Description of dev_console_1.png follows](img/dev_console_1.png)
Description of the illustration dev_console_1.png
To set styles, add less or css code in the customCSS object of the JSON configuration into the console:
apex.utr.config({"classes":[],"vars":{},"customCSS":"h1 { color: #111; font-family: 'Helvetica Neue', sans-serif; ... }", "useCustomLess":"Y"});
The custom CSS will be added to the theme roller Code Editor and applied to the page automatically.
Parent topic: Using Theme Roller
11.1.4.4 About the Redwood Light Theme Style
The Redwood Light theme style features a number of unique class options in Theme Roller.
-
Pillar - The Pillar class enables users to change the background and header images.
-
Layout - The Layout class enables users to switch the following layout options: Edge to Edge, Floating, or Contained.
-
Appearance - Attributes under Appearance include Header, Navigation, Body Header, and Background.
The following image shows Theme Roller with the Redwood Light theme style selected.
![Description of theme_roller_redwood.png follows Description of theme_roller_redwood.png follows](img/theme_roller_redwood.png)
Description of the illustration theme_roller_redwood.png
Parent topic: Using Theme Roller