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
- Recommended Image Size
- Appearance on the LMS
- Customizing Tile Theme
- Customizing Tile Background
- Customizing Icons
- Optimized Images
- Tips for Customizing Tiles
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.
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 Mercury 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
By default, all tiles will inherit this layout on a desktop. Tile content will only change when:
*Note: Tile Icons on this layout are sized to 60 x 60px
Tiles will inherit this layout:
*Note: Tile Icons on this layout are sized to 40 x 40px
Some Mercury 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.
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|
|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:
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:
Proper Image Creation
If an SVG or PNG is not properly exported or created, icon details may be overridden.
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".
PNG files that are not exported to sufficient size (60 x 60px) or quality (50KB) may appear pixelated.
Screenshots will always contain background colors as part of the image and must be trimmed carefully.