LMS Customization Guidelines - Dashboard Tiles

Follow

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.

In This Article

By Default

All learning portals have Standard Tiles available. Mercury Tiles are available for organizations that opted to add the Mercury module. You can customize a tile's icon, text, color & background.

default.png

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.

tile-background.pngtile-icon.pngtile-text.png

Icons: Each tile has a default icon assigned to them. Standard tiles are available for use and additional tiles when the Mercury module enabled.

tile-dialog.png

Recommended Image Size

Small Image: 320 x 160px

smallsize.png

Large Image: 1280 x 320px

bigsize.png

Dashboard Tiles - Appearance on the LMS

NLE-Dashboard.png

Tile Default/Standard Layout

Desktop
Default-tile.png

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 Mercury 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
Mobile-tile.png

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 Mercury and Standard tiles will have different layouts before inheriting the default/standard layout.

3tile-layout.png

ListView-tile.png1item-tile.pngquestion-tile.png

*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".

Customize-Tile-Dialog.png

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.

tile-bg-sample1.png

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:

SVG-upload.png

Uploading a PNG example:

PNG-upload.png

 

Optimized Images

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

Optimized-Device-Images.png

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

Max-Screen-Width.png

Using Max Screen Width Using Full Responsive Width

maxscreenwidth-LMS.png

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

fullresponsive-LMS.png

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.

1tile.png

2tile.png

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

3tile.png

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

3tile-layout.png

Tips for Customizing Tiles

Examples

SVG PNG
svg1sample.png png1sample.png
svg2sample.png png2sample.png
svg3sample.png png3sample.png
svg4sample.png png4sample.png

 

Considerations

Proper Image Creation

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

notproperlyexported.pngproperlyexported1.png

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".

propercolorcontrast.pngnotpropercontrast.png

Scalability

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

properscalableicon.pngnotproperscalableicon.png

Screenshots

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

properscreenshotimage.pngnotproperscreenshot.png

Published on
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.