Theming Guide for Box, Google Drive, Sharepoint and OneDrive

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 your folders, files and bookmarks.

Crescendo App Theme folder

Theming of Crescendo is done by placing assets – such as background images, cover image, default folder icon and theme.json file ( which defines colors, more on this file later ) – in a special subfolder of your Crescendo Case ( what is Crescendo Case and how to create it – read this post ).

 

First step is to create the theming subfolder:

  • Open Box web interface and go to your Crescendo Case.
  • Create subfolder and name it Crescendo App Theme.

Crescendo App Theme folder is where all your theming assets are placed. Notice that Crescendo do not display this folder nor its contents in the app.

 

Once built, your theming can be easily reused between multiple Crescendo Cases – just copy the Crescendo App Theme folder with its contents to a new place.

Background Theming

The Crescendo Background theme is somewhat of a constant display for all your views in your Crescendo. Its elements include the following:

 


 

Place all theme files within the created Crescendo App Theme folder.

 

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 cover short video (cover@2x.mov or cover@2x.mp4).
  • Upload that file to your Crescendo App Theme folder.
  • Force sync in the app and see how the cover changes.

 

Theme Color Guide

In addition to image assets, Crescendo has the ability 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 folder. 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 folder.
  • Force sync in the app and see how the colors change.

 

 

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, place folder-icon@2x.png ( recommended at 250×250 px) to your Crescendo Theme Folder.

Folder icons can be ANY image.

 

icon@2x.png

 

 

Custom Folder Icons

 

Every folder can have its own, custom icon.

To set a custom icon for a specific folder, place icon@2x.png ( 250×250 px ) file to that folder.

Folder icons can be ANY image.

 

icon@2x.png

 

 

Custom File Icons and Box Bookmarks Icons

Similar to folder icons, Crescendo allows you to set custom icon for every file or Box bookmark.

File icons (and bookmark icons ) are placed in the same folder as the file (or bookmark ) whose icon you’re changing. The naming convention for is:

 

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

or

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

 

 

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

 

EXAMPLE:

Filename:   report.pdf
Icon name:   report.pdf-icon@2x.png
Bookmark:   Presentations
Icon name:  Presentations-icon@2x.png

 

Congratulations!

You are now ready to deploy your own, beautiful Crescendo themes! Do not forget to check out your corporate branding guidelines with the marketing team.

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