LMS Customization Guidelines - Dashboard Background & Layout

Follow

Initial impressions are important for user engagement and adoption of your training portal. An element that can be customized and branded to increase the overall aesthetics and effectiveness of your learner experience is the Dashboard Background, which we will go into detail here.

In This Article

How to Modify

There are two ways to modify the dashboard background:

You can customize the background color on the manage template theme tab, the color variable will be named "Dashboard Background".

The second way is to navigate to the public/private dashboard and customize an image on the "Advanced" drawer.

You'll see several customization settings for the dashboard background:

  • Background Image Display: Set image to either Full Screen or Repeat.
  • Background Image Alignment: Configure the focal point of your image when re-sizing your browser or viewing the LMS in a different device other than a desktop. 
  • Background Image Opacity: Adjust the transparency of your image, note that when adjusted the image will overlay with the color variable "Dashboard Background" from the theme tab.

Dahboard-Background-Settings.png

By Default

Only a dashboard background with a hexadecimal color format of #eeeeee will be set on your LMS. You can change this by going to the Manage Template > Theme Tab > Dashboard Section > Dashboard Background.

Color-Variable.png

lightbulb_on.svg Tip:  Depending on how content heavy your dashboard is, a good choice for a dashboard background is a subtle image that will not interfere or collide with other elements in your dashboard as referenced in later on in this document.

Recommended Image Size

1920px x 860px, maximum of 1 MB file size.

Db-recommendedsize.png

Appearance on LMS

Another feature is the customization of the “Dashboard Layout”. By default your dashboard containers will be responsive, using 100% or maximum screen width of your browser. This setting lets you configure the width of your dashboard elements. Again, depending on how you organize the content of your dashboard the background can be more visible with the use of “Maximum Screen Width” settings found on your private/public tab on the Advanced drawer.

image2019-1-4_8_16_44.png

You can also override maximum screen width per-container type. This setting will be found on the "Content Drawer" on the Public/Private Dashboard Tab.

image2019-1-4_8_19_15.png

Using Caution

Images with a lot of text. Avoid background images with a lot of text. It will make the dashboard busy, overwhelming and distracting.

Using a group of people or faces as a background is not ideal. 

Don’t use images that don’t have the correct aspect ratio. Unproportional images will look stretched or get cut off.

Use image transparency. Applying image opacity to your dashboard background help separate the dashboard elements from the background, making it look less busy.

Be cautious of using background images set on repeat that does not connect/span flawlessly. Images set on repeat should seamlessly connect with all four edges to unify the background. Having an improperly trimmed image can cause the background image to look broken or puzzle pieces that don't fit together.

Use images that you own, have purchased, credit authors properly, ask permission for image usage or use creative commons license images with caution. Protect your content from copyright infringement.

 

Published on
Have more questions? Submit a request

0 Comments

Article is closed for comments.