LMS Customization Guidelines - Dashboard Tiles

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


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.


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.


Mobile Tile Background Images

Please not that when a Tile Background image is used, it will not display as expected in a mobile browser viewed in portrait mode. For this reason, we recommend ensuring Tile Icons are visible and not transparent, as this will be the primary identifying attribute for the Tile in a mobile browser.


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



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



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.




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.


Was this article helpful?
2 out of 7 found this helpful



Article is closed for comments.