Theming Guide for Crescendo

Learn how to create your Crescendo theme on Box, Google Drive, Sharepoint or OneDrive.
Modify the look and feel of your Crescendo: backgrounds, colors, icons, etc.

Background Theming	Theme Color Guide	Icon Theming

Personalize your Crescendo by adding your own background and cover graphic to the app.	Change colors of all labels, buttons and other UI elements within the app.	Choose different icons for your folders, files and bookmarks.

Crescendo App Theme folder

To theme a Crescendo Case, place your visual assets (images, default folder icon, theme.json file, etc) to a special subfolder of your Crescendo Case named Crescendo App Theme. Crescendo hides this special folder and its contents in the app.

To create a Crescendo App Theme folder:

Open your cloud storage (Box, GDrive, Sharepoint, OneDrive) web interface and go to your Crescendo Case folder.
Create a new subfolder, name it Crescendo App Theme.

Once designed, your theming can be reused between multiple Crescendo Cases. Just copy the Crescendo App Theme folder with its contents to a different Crescendo Case.

Background layers

Crescendo background consists of several layers stacked on top of each other. You don't need to define all layers. Instead, define only the layers required to achieve your desired visual design:

Layers in Crescendo with various elements described.

Place following theme asset files in the Crescendo App Theme folder:

Logo	Background

Filename: logo@2x.png Recommended resolution: 200×350 px The logo image is anchored to the top-center of view and appears on top of all background images.	Filename: background@2x.png Recommended resolution: 2048×2048 px The background image is centered for both landscape and portrait orientations.
Top background	Bottom background

Filename: background-top@2x.png Recommended max width: 2048px The top background image is anchored to the top-center of view and is optional to the Crescendo theme.	Filename: background-bottom@2x.png Recommended max width: 2048 px Similar to the background top image, the background bottom image is anchored to the bottom-center of the view.

If your background, top background or bottom background is not an image but a single color, do not upload an image asset to Crescendo App Theme folder. Instead define a color for relevant key: background, headerBackground, footerBackground. This will be explained in detail further in this guide.

Cover

Cover is a visual representation of your Crescendo Case on the multi-case view. Your Crescendo Case background becomes the cover by default. You can set a custom cover, different than the background as a static image (.png file) or a short video (.mov or .mp4 file).

iPad with Crescendo in multicase view.

Prepare cover image file cover@2x.png (1440×1440 px) or a cover video (cover-mov@2x.mov or cover-mov@2x.mp4).
Upload the image or video file to the Crescendo App Theme folder.
Force sync in the app to see the cover changed.

Color Guide

Colors of the constant labels, buttons and other UI elements can be customized by uploading a theme.json file into your Crescendo App Theme folder. This file contains keys and color values of specific elements.

Create new or download the sample theme.json file, edit color values with any text editor.
Save changes and upload theme.json to your Crescendo App Theme folder.
Force sync in the app to see the colors changed.

Structure and keys of the theme.json are explained below. HTML color names, RGB, RGBA or Hex code can be used as values. It is worth noting that using RGBA allows for adding transparency, which is sometimes desired for such elements as itemTitleBackground or listItemBackground.

{
"colors": {
"tint": "white",
"navigationBar":"rgb(36,45,60)",
"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",
"listItemTitle": "white",
"listHeaderBackground": "white",
"listHeaderText": "white",
"listHeaderColumnSeparator": "white",
"listItemBackground": "white",
"listItemIcon": "white",
"listFolderDisclosureIndicator": "white",
"listItemColumnSeparator": "white",
"mainStatusBar": "black",
"mainSettingsButton": "#996731",<
"mainSependaLogo": "#996731",
"mainSyncStatus": "#4695a9",
"emptyFolder": "#000000"
}
}

← toolbars

← top toolbar

← top folder name

← folder icon text

← folder icon text background

← DEPRECATED, use "tint" and "navigationBar"

← DEPRECATED, use "listItemTitle"

Default Folder Icon

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

folder-icon@2x.png

Custom folder icons

Individual folders can have their own custom icons. To set a custom icon for a folder, place icon@2x.png file (250×250 px), directly inside the folder.

icon@2x.png

Custom file icons and Box bookmarks icons

Similar to folder icons, custom icon for every file or Box bookmark can be set.Place file icons (or bookmark icons ) in the same folder as the file (or bookmark). The naming convention is:

<filename>.<suffix>-icon@2x.png (250×250 px)

<bookmark name>-icon@2x.png (250 x 250 px)

<filename>.<suffix>-icon@2x.png

Examples:

Filename: report.pdf → Icon filename: report.pdf-icon@2x.png

Bookmark: Presentations → Icon filename: Presentations-icon@2x.png

Congratulations!

You are ready to deploy your own, beautiful Crescendo themes! We recommend to check out your corporate branding guidelines with the marketing team.

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

Do not hesitate to contact Crescendo support team if you have any questions.

Happy theming!