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 function apex.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.

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

See Also:

• Creating a Theme Style
• Editing a Theme Style
• Using the Theme Roller Dialog

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.

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. Out-of-the-box themes cannot be overwritten but can be saved as a new theme and modified accordingly.

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.

To use the Theme Roller dialog:

1. Preview the page by running it.

   The Runtime Developer toolbar displays at the bottom of any editable running page.

2. On the Runtime Developer Toolbar, click Customize and then select Theme Roller.
   
   Description of the illustration customize_menu.png

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

   
   Description of the illustration theme_roller.png
3. To search for an attribute, enter search terms in the Search field at the top of dialog. Only attributes that contain the search term appear.

   Tip:

   To navigate the Theme Roller dialog using keyboard shortcuts, press Ctrl+Fn+M and then release. Then, press Tab to navigate.
4. To select or modify a theme:
   1. Theme, Select Theme - Select a theme from the drop-down list. In the next illustration, the Theme is set to Redwood Light.
   2. Expand or collapse sections by clicking on the section name.
   3. Modify the attributes.

      When you modify an attribute the following buttons become active at the bottom of the dialog: Undo, Redo, and Reset.

5. Custom CSS - Enter CSS or or LESS-compatible code in the Code Editor. If you are including LESS-compatible code, you must enable the Enable LESS Compilation switch.
   
   Description of the illustration theme_roller_custom_css.png
6. Save the theme by clicking one of the following:

   • Save - If the theme is editable, Save saves any style change and sets the theme as the application's current style.

   • Save As - Click Save As to save the theme as a new style and sets it as the application's current style.

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

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.

As shown in the following image, selecting the Redwood Light theme style includes a number of unique class options:

• 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 the illustration theme_roller_redwood.png