Crescendo Theming: A Step-by-Step Guide

Crescendo lets you customize how your content looks inside the app. You can change backgrounds, colors, icons, logos, and more to match your brand or presentation needs.

This article guides you step by step through the process.

Background Theming	Theme Color Guide	Icon Theming
Personalize your Crescendo by adding your own background and cover graphics.	Change colors of all labels, buttons, and UI elements.	Choose different icons for folders, files, and bookmarks.

Create a Theme Folder

Most visual customizations in your Crescendo Case require placing visual assets into a special folder called Crescendo App Theme. This folder should be created directly inside your Crescendo Case. Its contents are used for styling purposes and are never visible to app users.

Let’s start by creating this folder

• Open your cloud storage (Box, Google Drive, SharePoint, or OneDrive).
• Go to your Crescendo Case folder.
• Create a new subfolder called: Crescendo App Theme

Once created, your theme can be reused across multiple Crescendo Cases. Simply copy the Crescendo App Theme folder and its contents into another Crescendo Case.

Background, logo & layers

Let’s start by explaining how Crescendo layers images on top of each other. You don’t need to define an image for every layer. Simply add the layers required to achieve your desired visual design.

There are four commonly used elements: background, logo, top background, and bottom background. To define an image for a layer, create an image using the recommended dimensions, name it according to the required naming convention, and upload it to your Crescendo App Theme folder.

Logo	Background
Filename: logo@2x.png Recommended resolution: 600×250 px The logo is top-centered and appears above on top of 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 is top-centered and optional in the Crescendo theme.	Filename: background-bottom@2x.png Recommended max width: 2048 px The bottom background is bottom-centered and optional in the Crescendo theme.

If your background, top, or bottom background is a single color, don’t upload an image. Instead, set the color for the relevant key: background, headerBackground, or footerBackground. Details are explained later in this guide.

How to pick an image that looks great

Crescendo automatically fits the background and cover image to different screen ratios and orientations – iPhone portrait, iPad landscape and portrait, web, and Android. The image is centered, resized and trimmed if needed.

Use square images for backgrounds and covers to avoid unnecessary resizing. Avoid having important elements or text near the edges, as they may be trimmed.

We recommend avoiding busy or distracting images. Users should focus on folder icons and documents, not the background.

Cover

The cover visually represents your Crescendo Case in the multi-case view. By default, the case background is used as the cover. You can set a custom cover, either a static image (.png) or a short video (.mov or .mp4) that is different from the background.

• Prepare a cover image (cover@2x.png, 1440×1440 px) or a cover video (cover-mov@2x.mov or cover-mov@2x.mp4).
• Upload the file to the Crescendo App Theme folder.
• Sync the app to apply and see the updated cover.

Colors of UI elements

Colors for UI elements such as labels, buttons, and navigation can be customized. To change them, assign a color to each element in the theme.json file and upload it to your Crescendo App Theme folder. Theme.json file uses JSON format. Basic knowledge of JSON can be helpful, but it’s not required for simple changes.

The structure of theme.json is explained below. You can use HTML color names, RGB, RGBA or Hex codes as values. RGBA is useful when you need transparency, which is sometimes useful for elements like itemTitleBackground or listItemBackground.

• Create a new theme.json file or download the sample theme.json, then edit the color values using any text editor.
• Save your changes and upload the theme.json file to your Crescendo App Theme folder.
• Sync the app to apply and view the updated colors.

Default Folder Icon

Each new folder will automatically use this icon unless a custom icon is set for that folder. To set a default folder icon, place folder-icon@2x.png (recommended 250×250 px) in your Crescendo App Theme folder.

folder-icon@2x.png

Custom folder icons

Each folder can have its own custom icon. To set one, place an icon@2x.png file (250×250 px) directly inside the folder.

icon@2x.png

Custom file icons

Like folder icons, you can set custom icons for individual files. Place the icon in the same folder as the file. Use the following naming convention:

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

Example: report.pdf → report.pdf-icon@2x.png

Compact assets for phones

You can create phone-specific versions of any image in the Crescendo App Theme folder by adding -compact to the filename, for example: logo-compact@2x.png or background-compact@2x.png. These assets help optimize your theme for narrow screens, though not all themes require this.

Web specific assets

You can also create web-specific versions of your assets, which are used only by Crescendo Web. Use the naming convention background@web.png or cover@web.png. Not all cases require this. If you’re unsure, you probably don’t need it.
 

Congratulations!

You’re ready to deploy your own polished Crescendo themes! We recommend reviewing your corporate branding guidelines with your marketing team.

Done well, theming makes Crescendo look like a custom presentation or sales enablement platform built just for your company.

If you have any questions, don’t hesitate to contact the Crescendo support team.

Happy theming!