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 the Redwood Light Theme Style
  The Redwood Light theme style features a number of unique class options in Theme Roller.
• Importing and Exporting Theme Styles
  Import and export theme styles by selecting Import and Export from the Theme Roller Additional Options menu.
• Style Compatibility
  Learn about Vita theme and Redwood Light theme compatibility issues.
• 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

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.

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

   4. Reset a Theme Style - To revert any unsaved theme style changes, select Reset from the Additional Options menu . The Additional Options menu is located next to the Save As button at the bottom of the dialog.
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. Export or Import - Export or import theme style changes directly from the Theme Roller dialog. Select Export or Import from the Additional Options menu located next to the Save As button at the bottom of the dialog.
7. 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 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

11.1.4.4 Importing and Exporting Theme Styles

Import and export theme styles by selecting Import and Export from the Theme Roller Additional Options menu.

You can export and import style changes directly from Theme Roller by selecting options from the Additional Options menu: Import, Export, and Reset. When importing and exporting, the supported file format is JSON.

To import and export Theme Styles:

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.

   The Theme Roller dialog appears displaying the styles for your application. You can export and import style changes directly from Theme Roller by selecting the following options from the Additional Options menu: Import, Export, and Reset.

   
   Description of the illustration theme_roller_add_options.png

   Tip:

   To navigate the Theme Roller dialog using keyboard shortcuts, press Ctrl+Fn+M and then release. Then, press Tab to navigate.
3. To import theme styles:
   1. From the Additional Options menu, select Import.
      A File Browser appears.
   2. Navigate to the appropriate file to set to set the custom CSS code, variable style changes, add classes and LESS compilation configuration to be applied to the current theme style.

      When importing a file, the following JSON key-values are required:

      {
          "classes": [],
          "vars": {},
          "customCSS":"",
          "useCustomLess":""
      }

      The expected values are described in the following table.

      Key	Type	Value(s)
      classes	JSON array	List of comma-separated class names that are added to the page.
      vars	JSON object	Theme style variables with values.
      customCSS	String	Custom CSS code.
      useCustomLess	String	"Y" if the theme style should be compiled using LESS or "N" for no.

4. To export theme styles:
   1. From the Additional Options menu, select Export.
      This option exports the current style configuration into a JSON file.
5. To reset theme styles:
   1. From the Additional Options menu, select Reset.
      This option reverts any unsaved theme style changes.

11.1.4.5 Style Compatibility

Learn about Vita theme and Redwood Light theme compatibility issues.

The Vita theme and Redwood Light theme are not currently compatible because their variables are not present in each other's theme files.

When an export from the Vita theme is imported into Redwood Light, no changes display because the Vita theme variables are not present in the Redwood Light theme. The same is true for the reverse scenario. When an export from Redwood Light is imported into the Vita theme, no changes display because the Redwood Light variables are not present in the Vita theme.

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