LMS Customization Guidelines - Dashboard Tiles

Updated April 21, 2022 16:05

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.

By Default

All learning portals have Standard Tiles available. Absorb Engage Tiles are available for organizations that opted to add the Absorb Engagemodule. 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 Engagemodule 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 1 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.

SVG vs PNG
SVG	PNG
Scalable Vector	Raster Image
Single color only	Can display multiple colors
Can select a color using "Tile Icon color"	Cannot customize the icon color in the LMS
Loads Faster: File size can be < 50kb	Loading Varies: Dependent on Colours and Dimensions
Uploading an SVG example:	Uploading a PNG example:

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.

Using Max Screen Width

Using Full Responsive Width

You use less screen real estate. Tiles and Dashboard content are more condensed.

You use less 100% of your browser width. Tiles and Dashboard content is expanded.

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 1 or 2 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:

Examples

SVG	PNG

Considerations

Proper Image Creation

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

Color Contrast

It is very important to make sure the text and icon color are distinct from the tile background.
Tip: You can hide an icon by assigning "Dashboard Tile Icon" the same color as "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.

In This Article