Dashboard Tiles are the building blocks for the Learner Dashboard and can be customized by Admins. Dashboard Tiles are the primary approach to customizing the Dashboard. It is used as a sales tool, engaging Learners on how to effectively use the LMS. This article covers what the default settings for Tiles are, as well as instructions and tips for Tile customization.

Default Tile Settings

All Absorb Portals include a standard set of Tiles, outlined in detail here. Absorb Engage Tiles are available for organizations that opted to add the Absorb Engage module. You can customize a Tile's Icon, text, Color & Background.

Colors: All Tiles have 3 global color variables assigned to them on the Theme tab (See images below for the hex default values). Use Customize Tile Theme to override the global Tile colors and default Icon of a Tile.

Icons: Each Tile has a default Icon assigned to them. Standard Tiles are available for use and additional Tiles when the Absorb Engage module enabled.

Recommended Image Size

Small Image: 320 x 160px

Large Image: 1280 x 320px

Dashboard Tiles - Appearance on the LMS

Tile Default/Standard Layout

Desktop
	By default, all Tiles will inherit this layout on a desktop. Tile content will only change when: You have more than one Tile set in a container Using maximum screen width Re-sizing the width of your browser. Viewing the LMS on a mobile device. Using Absorb Engage Tiles or Tiles that have a list view (e.g. FAQ, Messages, Polls) Note: Tile Icons on this layout are sized to 60 x 60px.
Mobile
	Tiles will inherit this layout: If you have a lot of Tiles set per container. When viewing the LMS on a mobile device. Note: Tile Icons on this layout are sized to 40 x 40px.

Expanded Tiles

Some Absorb Engage and standard Tiles will have different layouts before inheriting the default/standard layout.

Note: Tile Icons on this layout are sized to 30 x 30px

Customizing Tile Theme

Override the global Tile colors add a custom Icon and Background image by going to the specific Tile and enabling Customize Tile Theme.

Customizing Tile Background

You can change the Background of a specific Tile using the, Customize Tile Theme at a maximum file size of 300 KB and file dimensions of 320 x 160px or 1280 x 320px.

Customizing Icons

The Customize Tile Icon feature supports SVG and PNG files only, at a maximum file size of 50 KB and file dimensions of 60 x 60 px.

• Use an SVG if your Icon is a simple shape with only a single Color.
• Use a PNG if your Icon is complex or makes use of multiple Colors.

Optimized Images

Determine what is the most common desktop size your Learners will use (e.g. Standard Screen 1280px, Widescreen 1920px, Super Widescreen 2560px).

You can get away with using smaller images when you use the maximum screen width setting from the Dashboard layout.

Depending on how many Tiles are configured for a container, will determine if you have to use images 320x160px or 1280x320px. As a rule of thumb, the more Tiles you have in a container, the smaller the images you can upload.

if you have one or two Tiles per container upload images 1280 x 320px.

If you have 3 or more Tiles upload images 320 x 160px. 

Select Tiles have a different layout on some breakpoints. Make sure to use a subtle Background so that the Tile content is legible.

Tips for Customizing Tiles

• Choose colors with high contrast for good visibility.
• Choose Background images that are a subtle pattern or abstract image.
• Use opacity on the Background images to make Tile contents legible.
• Ensure text color (inside & outside) a Tile is legible.
• Feel free to use online tools to help you create your own color patterns like:
  • https://color.adobe.com
  • https://coolors.co/browser
  • https://color.hailpixel.com
  • https://www.materialpalette.com

Examples

SVG	PNG

Considerations

When customizing Dashboard Tiles, the following section contains information that may prove useful when determining how utilized assets are managed. Please reach out to your Client Success representative if you have additional questions concerning Dashboard Tile customization.

Proper Image Creation

If an SVG or PNG is not properly exported or created, Icon details may be overridden.

Color Contrast

It is important to make sure the text and Icon color are distinct from the Tile background.

Scalability

PNG files that are not exported to sufficient size (60 x 60px) or quality (50KB) may appear pixelated.

Screenshots

Screenshots will always contain Background colors as part of the image and must be trimmed carefully.