Tile Style Guide

Use the power of design to enhance your data-driven insights. 

Create more than just a dashboard and effectively communicate data-driven insights with stylized Storyboards. Use colors, styles and designs to express your company brand and foster strong emotional connections across teams. Make all of your Storyboards the same, make each one different, change a tile here and there, perhaps on a page or two, the possibilities for creativity are endless.  

Not that creative or short on time? We have you covered with pre-designed styles that reflect your company brand that you can apply to individual tiles, pages or entire Storyboards in just a few clicks. 

Permissions

There are two permission levels;

  1. Admin 
    1. Administrators with the Application Access Permission 'CanConfigureCompany' can create the custom Tile Style Templates.
  2. User
    1. Users with the Application Access Permission 'CanCreateDashboard' and the Storyboard Permission 'Can View & Edit' can apply the Tile Style templates to a Storyboard, Storyboard pages, or individual tiles within a Storyboard. 

To both create and apply the Tile Style template, you will need all of the following permissions; 

  • CanConfigureCompany,
  • CanCreateDashboard, and 
  • Can View & Edit

Where to find 

Elements of Tile Style are found in three different sections;

  1. Under the Admin tab
  2. Under Edit Mode in a Storyboard, and 
  3. Under Edit Mode then Tile settings. 

1. Admin tab

This is where Admins with the permission CanConfigureCompany can create, edit or delete the Tile Style templates. Only the system default template and gallery templates cannot be edited or deleted. 

To create a new template:

  1. Go to Admin>Branding>Tile Style
  2. Click on a template to show the three action dots
  3. Click on the three dots and select Copy from the dropdown menu
  4. The Copy of…  will be added to the bottom of the list of Tile Style templates. 
  5. Make changes in the right hand menu:
    • Style Settings
      • Text - style, size and color
      • Header Style - deco bar on/off, deco bar color, deco bar size, header background color, header divider line, header divider line color
    • Tile Style
      • Tile Background color
      • Tile border - right, right color, right size
      • Tile border - bottom, bottom color, bottom size
      • Tile border - left, left color, left size
      • Tile border radius - top left, top right, bottom left, bottom right
    • Save - as template, as Primary Template
      • Naming - titles and subtitles -users can name it whatever they want and can even insert unicode which includes classic emojis.

To edit a template:

  1. Go to Admin>Branding>Tile Style
  2. Click on a template to show the three action dots
  3. Make changes in the right hand menu:
  • Style Settings
    • Text - style, size and color
    • Header Style - deco bar on/off, deco bar color, deco bar size, header background color, header divider line, header divider line color
  • Tile Style
    • Tile Background color
    • Tile border - right, right color, right size
    • Tile border - bottom, bottom color, bottom size
    • Tile border - left, left color, left size
    • Tile border radius - top left, top right, bottom left, bottom right
  • Save - as template, as Primary Template

 To delete a template:

  1. Go to Admin>Branding>Tile Style
  2. Click on a template to show the three action dots
  3. Select Delete

Note that there is no Delete confirmation. Your selection will be immediately and permanently deleted on clicking Delete.

2. Applying your templates - Edit Mode in a Storyboard

 

To apply your Tile Style to an entire Storyboard, across all pages: 

  1. Open your Storyboard
  2. Click on the pencil icon at the top right of your screen to enter Edit Mode
  3. Click on the Storyboard Tile Style Templates icon at the top right of the screen, between the + and the save buttons.
  4. Find and select your Tile Style template
  5. The Template will be applied to your entire Storyboard
  6. Save your changes or exit without saving to discard

Note: There is a hierarchy of ordering that applies to changes made at the tile and Storyboard levels. Changes to an entire Storyboard will apply to all tiles EXCEPT those tiles with individual tile styles applied.

3. Applying your templates - Edit Mode in a Tile

To apply your Tile Style to an individual tile: 

    1. Open your Storyboard
    2. Click on the pencil icon at the top right of your screen to enter Edit Mode
    3. Go to the tile you want to apply the template
    4. Hover above the title to reveal the tile menu
    5. Click on the Tile Style icon
    6. Find and select your Tile Style template
    7. The Template will be applied to your individual tile
    8. Click outside the tile to close the menu
    9. Save your changes or exit without saving to discard

Note: There is a hierarchy of ordering that applies to changes made at the tile and Storyboard levels Changes to an entire Storyboard will apply to all tiles EXCEPT those tiles with individual tile styles applied.

Sharing 

Sharing your Storyboards and your tiles, remains unchanged. You simply share the Storyboards and export the tiles the same way. View this article for more information about sharing your Storyboards.  One thing to be aware of is that changes to the primary template including edits will apply to ALL users. 

Additional notes:

    • Gallery Tile Styles are available for you to use as a starting point for building out your own tile styles. They are only available in the branding space for Admins to use when building styles. If you would like to make these available to users within Storyboards as a style option from Storyboard Settings, you would have to create a copy of the Gallery Tile Style and give it a new name.

    • Tile Style Background Color settings support both solid and gradient styles
      • Solid Color:
        • You can input a Hex color code or use RGBA.
        • Use the color picker to select a value from the pop-up color picking tool.
        • Adjust the color using a main palette slider and control opacity with the opacity slider.
      • Gradient Color:
        • Similar to the solid color option, you can use Hex, RGBA, or the color picker tool.
        • Additionally, you can define the gradient angle (as a percentage or from the middle).
        • Customize the number of gradient stops for more complex color transitions.

     

Was this article helpful?

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.