Theming Guide for Salesforce.com – beginner's guide

Learn How to Create your Crescendo Theme. 

Modify the look and feel of your Crescendo: the background, colors of various elements, icons of files and folders, and much more. 

 

Background Theming

Theme Color Guide

Icon Theming

You can personalize your Crescendo by adding your own background graphic to the app.

Crescendo allows you to change the color values of certain constant labels and images within the app.

You can choose different icons customized for folders, files and weblinks.

Explaining Crescendo App Theme library 

Theming of Crescendo is done by placing assets – such as background images, cover image, default folder icon and theme.json file ( which defines colors of various elements of the user interface ) – in a special library named Crescendo App Theme.

Assets in common Crescendo App Theme library will automatically be applied to every Crescendo Case.

If you do not know what Crescendo Case is, read Getting started with Crescendo for Salesforce first.

To create the common theming library:

  • Open SDFC web interface and go to Libraries tab.
  • Create new library and name it Crescendo App Theme.

 

Crescendo App Theme library is where all your common theming assets will be placed.

 

Folder-specific Crescendo App Theme library

 

Folder-specific Crescendo App Theme library contains theming assets specific for a particular Crescendo Case. Those assets have priority over the common Crescendo App Theme assets (if such library exist).

To create the folder-specific theming library:

  • Open SDFC web interface and go to Libraries tab.
  • Create new library and name it Crescendo App Theme (Crescendo Case name).

 

Background Theming

The Crescendo background theme is somewhat of a constant display for all your views in your Crescendo Case. It’s elements include the following:

 


 

Place all or some of the following theme files within the created Crescendo App Theme library.

 

Logo

Background top

logo@2x.png is recommended at 100 px and 250 px

The logo image is anchored to the top-center of view and appears on top of all background images.

background-top@2x.png 2048 px max resolution width

The background top image is anchored to the top-center of view and is optional to the Crescendo theme. Dimensions are at designer discretion.

 

Background

Background bottom

 

background@2x.png is recommended at 2048×2048 px

The background image is centered for both landscape and portrait orientations.

background-bottom@2x.png 2048 px max resolution width

Similar to the background top image, the background bottom image is anchored to the bottom-center of view and is optional to the Crescendo theme. Dimensions are at designer discretion.

Cover Theming

Cover is the visual representation of your Crescendo Case, visible in the multi-case view. By default your Crescendo Case background becomes the cover as well. However, you can set a custom cover, different from the background. It can either be a static image (.png file) or a short video (.mov or .mp4 file).


  • Prepare cover image file cover@2x.png (1440×1440 px) or a short cover video (cover@2x.mov or cover@2x.mp4).
  • Upload that file to your Crescendo App Theme library.
  • Force sync in the app and see how the cover changes.

 

Theme Color Guide

In addition to image assets, Crescendo allows you to change the color values of certain constant labels and images within the app.

This can be done by placing a file called theme.json into your Crescendo App Theme library. This file contains color values of specific elements on Crescendo's user interface.

  • Download the default theme.json file, edit the color values with any text editor.
  • Save the changes and upload theme.json to your Crescendo App Theme library.
  • Force sync in the app and see how the colors changed.

 

 

Please find the example of theme.json contents below – it is really simple. Note that you can use color names as well as RGB or Hex codes.

{

"colors": {

        "tint": "white",

        "background": "white",

        "cover": "white",

        "headerBackground": "white",

        "footerBackground": "rgba(0,0,0,0.2)",

        "title": "white",

        "itemTitle": "white",

        "itemTitleBackground": "white",

        "sependaLogo": "white",

        "syncStatus": "white",

        "backButton": "white",

        "searchButton": "white",

        "favoritesButton": "white",

        "settingsButton": "white",

        "salesforceButton": "white",

        "editOfflineButton": "white",

        "shareButton": "#4a4a4a",

        "layoutTypeControl": "white",

        "listHeaderBackground": "white",

        "listHeaderText": "white",

        "listHeaderColumnSeparator": "white",

        "listItemBackground": "white",

        "listItemIcon": "white",

        "listFolderDisclosureIndicator": "white",

        "listItemColumnSeparator": "white",

        "mainStatusBar": "black",

        "mainSettingsButton": "#996731",

        "mainSependaLogo": "#996731",

        "mainSyncStatus": "#4695a9"

}

}

 

Default Folder Icon

 

To set a default folder icon, upload folder-icon@2x.png ( recommended at 250×250 px) to your Crescendo App Theme library.

Folder icons can be ANY image.

 

folder-icon@2x.png

 

 

Custom Library and Virtual Folder Icons

 

Every library or virtual folder can have it's own custom icon.

To set a custom icon for a specific folder, place foldername@2x.png ( 250×250 px ) file to the App Theme Folder.

Folder icons can be ANY image.

Examples: forms@2x.png (actual library icon), eLearning@2x.png (virtual folder icon)

 

eLearning@2x.png

 

 

 

Congratulations!

You are now ready to deploy your own, beautiful Crescendo themes!

When done right, theming makes Crescendo look like a custom presentation and sales enablement platform specifically designed for your or your client's company.

Happy theming and do not hesitate to contact Crescendo support team if you have any problems or questions.

Related posts

Request a demo

Request a demo