11.1.4 Using Theme Roller and Edit Logo

Use Theme Roller and Edit Logo to quickly transform the appearance of an application without editing any code.

Note:

Concurrent use of the Live Template Options, Theme Roller, and Logo Editor is not supported.

• About Theme Roller and Edit Logo
  Learn about the Theme Roller and Edit Logo options available on the Customize menu on the Runtime Developer toolbar.
• Using the Theme Roller Dialog
  Use the Theme Roller dialog to quickly change the appearance of an application without editing any code.
• 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.
• Using Edit Logo
  Use Edit Logo to quickly change the logo that displays at runtime.

11.1.4.1 About Theme Roller and Edit Logo

Learn about the Theme Roller and Edit Logo options available on the Customize menu on the Runtime Developer toolbar.

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. Clicking the Customize menu displays two menu options: Theme Roller and Edit Logo.

Description of the illustration customize_menu.png

Theme Roller is a live CSS editor that enables you to quickly change the theme style, colors, rounded corners and other application attributes.

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.

Edit Logo offers a quick way to add or edit the logo users see at runtime.

See Also:

• "Creating a Theme Style"

• "Editing a Theme Style"

• "Using the Theme Roller Dialog"

• "Using Edit Logo"

11.1.4.2 Using the Theme Roller Dialog

Use the Theme Roller dialog to quickly change the appearance of an application without editing any code.

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

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

11.1.4.5 Using Edit Logo

Use Edit Logo to quickly change the logo that displays at runtime.

To include a logo, your page template must include the #LOGO# substitution string.

Note:

You can also edit an application logo by editing the application User Interface attributes. See "Defining an Application Logo."

To use Edit Logo:

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 Edit Logo.
   
   Description of the illustration select_edit_logo.png

   The Edit Logo dialog appears.

3. Type - Select the type of logo. Options include:

   • None - No logo is shown in the app.

   • Text - Defnes a text only logo.

     • Type - Select Text.

     • Text - Enter the text that should be display as the application logo.

   • Image - Creates a logo based on a valid image file type and under 500 kb in size.

     • Type - Select Image.

     • Specify the image - Drag and drop the file, or click Choose File and navigate to the image.

   • Image and Text:

     • Type - Select Image and Text.

     • Specify the image - Drag and drop the file, or click Choose File and navigate to the image.

   • Custom define custom HTML to serve as the application's logo:

     Due to security concerns, however, this cannot be configured using Edit Logo. When you select Custom, the User Interface Attibutes button appears. Click User Interface Attibutes and add the Custom logo on the User Interface Attributes page.

   In following example, Type is set to Text and the Text reads IT Projects for My Company. Note that the revised logo, IT Projects for My Company, displays at the top of the page.

   
   Description of the illustration edit_logo_text.png
4. Click Save.

   The confirmation message appears:

   Logo saved successfully

5. Click Cancel to exit the dialog.