Templates & Themes

Follow

This article only applies to portals that have upgraded to the New Learner Experience.

Part of the New Learner Experience is the ability for System Administrators to update how the learner user interface appears to users before and after logging into Absorb LMS.

Contents

Overview

How It Works

System Admins can access Templates from the Setup menu while in the admin user interface. When accessing Templates for the first time, System Admins will find that their portal's Template report will have a pre-built template based off of their current design. Portal's that opted to create a different look and feel for specific departments will see additional templates as applicable. These Templates can be edited as needed, however it's important to note that there is no way to revert changes made to these themes back to how they were originally found. It is recommended that screenshots are taken of your existing settings before altering the themes, or to create a new template.

navigate-templates.png

Adding Templates

Templates can be added to Absorb by using the Templates workspace and the tabs outlined below. To retain your changes as you're working, ensure you click on Save before changing tabs. If System Admins do not click on Save prior to switching tabs, any work completed will be lost.

Public Dashboard Tab

public-dashboard.png

The Public Dashboard Tab is used by the System Admin to set up the dashboard as seen by Users who have not yet logged in, or signed up, to access your portal. The first two options available to System Admins appear as toggles: 

  • The toggle for Inherit Settings of Parent Department will only appear in this Public Dashboard tab if there is a Parent Department. If a Parent Department exists, the System Admin can select one for the Template being edited to inherit its settings from. With the toggle enabled, the Public Dashboard will inherit all settings of the Parent Department and prevent System Admins from making any changes to how it appears otherwise. 
  • The toggle labeled Enable Public Dashboard will allow System Admins to choose whether or not the dashboard can be viewed by users who have not yet been authenticated by the LMS. Disabling this toggle does not affect the visibility of the Private Dashboard which is only available to users that are logged in. With this toggle disabled, users will only be presented with a login page.

If the System Admin is working on a Public Dashboard for the Template of a Parent department, or has elected to create one that does not inherit settings from another, several additional options will be available. 

public-dashboard-sections.png

  1. The drop-down menu available in each container provides the option of selecting between either a Tile or a Ribbon which we will cover in this article shortly. 
  2. The Up/Down icons allows System Admins to reorder the containers within the dashboard.
  3. This carat will either expand or minimize the container depending on it's current state.
  4. The trash can icon will delete the container and it's contents from the dashboard.
  5. This is the area in which the container's contents will be visible and managed from.
  6. The Add New Container button will create an additional container below the current one.

Tile vs Ribbon Container

When adding a container to your dashboard, you have the option of choosing between a Tile or Ribbon container. A Tile container will allow you to add Standard Tiles, as well as Mercury Tiles for those organizations that have opted to add the Mercury Module for their portal. A Ribbon container allows Admins to showcase specific courses whether they be your from Featured, Pinned, or Mandatory courses, as well as those found in the Catalog, My Courses, or those to be resumed.

Tile Container Options

add-tiles.png

When opting for a Tile Container, all of the Standard and Mercury Tiles can be mixed together, with the exception of the Welcome Tile and the Billboard tiles. These two tiles can only appear individually in their own container, and System Admins will be prevented from adding additional tiles if either is selected. Further to this, these two tiles wont appear in the Add Tile(s) modal window (pictured above) if any other tiles were already added to the container. 

drag-tiles.png

Once you have added your Tiles to a container, you have the option of dragging and dropping them with the grip bar on the left of the tile, into the order you'd prefer. The trash can icon at the top right of each tile can be used to remove the tile from your container, and you can edit the settings for each by clicking on the Edit or pencil icon.

Tile Options
Catalog

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Category: This drop-down menu allows System Admins to select the category of which course content is to be pulled from.

Enrollment Key

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Key Name: Text entered here should match that of the Key Name of an existing Enrollment Key. Learners that click on this tile will automatically use the Enrollment Key linked to the Key Name.

FAQs

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Number of Items: The number that appears in this field will correspond to the number that appear on the tile for Learners.

Hyperlink

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Link: The URL entered into this field will be the one Learners are forwarded to.
Target: There are four options from this drop-down menu which determines how the Learner is forwarded to the URL entered in the Link field:

  • _blank will open the page in a new browser window, leaving the page with the referring link open behind it
  • _self loads the page within the same browser window
  • _parent loads the page within the immediate parent of a frame where nested frames are used in a page
  • _top causes the page to load in the full body of the page, breaking out of a frameset where applicable
Welcome

Link: The URL entered into this field will be the one Learners are forwarded to.
Target: There are four options from this drop-down menu which determines how the Learner is forwarded to the URL entered in the Link field:

  • Blank will open the page in a new browser window, leaving the page with the referring link open behind it
  • Self loads the page within the same browser window
  • Parent loads the page within the immediate parent of a frame where nested frames are used in a page
  • Top causes the page to load in the full body of the page, breaking out of a frameset where applicable

Background Image Display: A background image can be uploaded, with the option to have the image scaled to fill the entire space, or to repeat in a tiled format if it's not preferred.
Foreground Image Display: A foreground image can be uploaded which will appear above the background image as an overlay. 

Billboard

Interval: This is the time between Billboard transitions that occurs automatically if the Learner does not use the feature's built-in navigation controls.
Autoplay: When enabled, this will automatically start any Video appearing in a Billboard on the Learner's Dashboard as soon as they advance to that particular item. 
Tags: The default setting for the Learner Interface is to only display one set of Billboards at the top of the Dashboard page, which makes the tagging function unnecessary. However, if the Admin wishes to have more than one set of Billboards appear on a Learner's Dashboard then they will need to provide Absorb with the following information: the Tag names they have added and/or used while creating their Billboards; the desired Dashboard location for their additional set of Billboards; and, which Tags to associate with each Billboard location.

Facebook

Widget HTML:  This field is where you will enter in the code required for your Facebook widget to appear on the Dashboard. You can copy and paste the code below after updating the red text to your own Facebook account details.

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fabsorblms&tabs=timeline&width=500&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId"
width="500" height="500" style="border:none;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true"></iframe>

Hyperlink: https://facebook.com/absorblms

Latest News

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Number of Items: The number that appears in this field will correspond to the number that appear on the tile for Learners.

Twitter 

Widget HTML: This field is where you will enter in the code required for your Twitter widget to appear on the Dashboard. Simply enter your organization's account name/handle without the "@" symbol.

 

Ribbon Container Options

If you select Ribbon as your container type, you will be presented with only two options from the Label drop-down menu. The first is Featured Courses, and the second is My Catalog:

  • Featured Courses will display all of your portal's courses that have been elected to be featured as determined by the settings in each course, and are available to the general public.
  • My Catalog will display any courses that are available to the general public.

 

Private Dashboard Tab

The Private Dashboard is seen by Users who have logged in to your portal. The layout of the page under the Private Dashboard tab, and the options therein are similar to what you will have seen in the Public Dashboard Tab. However, they have a number of additional options only Learners that have authenticated themselves in Absorb LMS can see. We will cover each in detail here with the exception of those that we have discussed above in the Public Dashboard which are:

  • Catalog
  • Enrollment Key
  • FAQs
  • Hyperlink
  • Welcome
  • Billboard
  • Facebook
  • Latest News
  • Twitter

private-add-tiles.png

Tile Options
Admin

This tile does not contain any additional options for setup. It will forward the Learner to the Admin user interface if they have the correct permissions to access it.

Calendar

This tile does not contain any additional options for setup. It will forward the Learner to their calendar.

My Courses

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Category: This drop-down menu allows System Admins to select the category of which course content is to be pulled from.

Log Off

This tile does not contain any additional options for setup. It will log the user out of their current session.

Messages

Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Number of Items: The number that appears in this field will correspond to the number that appear on the tile for Learners.

Profile

This tile does not contain any additional options for setup. It will forward the Learner to their Profile.

Resources Title: This input can be used to create a customized title translation to be displayed on the tile.
Name Term: This input can be used to create a customized description (name) translation to be displayed on the tile.
Category: This drop-down menu allows System Admins to select the category of which course content is to be pulled from.
Resume

This tile does not contain any additional options for setup. It will forward the Learner to the last course they were progressing through.

Transcript This tile does not contain any additional options for setup. It will forward the Learner to their Transcript within their Profile.
Leaderboards Target: The drop-down list allows you to select a pre-existing Leaderboard from your portal to display in the tile. 
Polls & Surveys This tile does not contain any additional options for setup. It will forward the Learner to Polls & Surveys available in the portal.

 

Courses Tab

courses.png

The Courses Tab is used by the System Admin to determine the defaults for how course content appears, which is broken down into four sections.

Course Details

  • Banner Image
    The Banner Image will appear on the course details page for every course and curricula within the portal for the department that the template is assigned to. 
  • Enable Pre-enrollment
    The Enable Pre-enrollment toggle, when enabled, allows System Admins to choose what information is displayed to Learners that are not enrolled in course content. Any combination of Comments, Competencies and Badges, Syllabus, Resources, Recommended Courses, and ILC Location URL can be selected. When the toggle is disabled, Learners will not see this information.

Catalog

  • Always Hide Categories
    When this toggle is enabled, categories will not be visible to Learners in the Catalog. 
  • Always Hide Enrolled Courses
    When this toggle is enabled, Learners will not see any course content that they are enrolled in within the Catalog.
  • Default View
    System Admins can select between Card, Calendar, Detail, and List view as the default layout seen by Learners. Please note that if a Learner updates the default view in their profile, this will override the Default View selected here.
  • Default Sort Order
    Whichever option is selected from the drop-down menu will determine the default sort order of the catalog. System Admins can choose from Alphabetical, Rating, Newest, Price High to Low, Price Low to High, and Mandatory.

My Courses

  • Always Hide Categories
    When this toggle is enabled, categories will not be visible to Learners on the My Courses page.
  • Default View
    System Admins can select between Card, Calendar, Detail, and List view as the default layout seen by Learners. Please note that if a Learner updates the default view in their profile, this will override the Default View selected here.
  • Default Sort Order
    Whichever option is selected from the drop-down menu will determine the default sort order on the My Courses page. System Admins can choose from Alphabetical, Date Enrolled, Expiry Date, Recent Activity, and Mandatory.

My Courses and Catalog

  • Banner Image
    The image uploaded here will be displayed in the My Courses and Catalog pages. 
  • Hide Courses in Curricula
    When enabled, this toggle will ensure that any courses that are part of curricula do not appear in the My Courses or Catalog pages.
  • Hide Completed Courses
    When enabled, this toggle will ensure that any courses that have a completed progress status do not appear in the My Courses or Catalog pages.

Login Tab

login-tab.png

The Login Tab determines how the login page for the portal will appear for users attempting to gain access to the LMS. 

  • Background Image Display
    System Admins can select between having their image scaled to fit the full screen of the login page, or to retain it's original size and be tiled instead. 
  • Background Image
    The image that will be used for full screen or tiled on the login page is uploaded here.

Settings Tab

The Courses Tab is used by the System Admin to determine the portal defaults, which is broken down into five sections.

settings-tab.png

Header

  • URL
    The URL entered into this field is web address in which users will be redirected to when clicking on the logo found at the top left of your portal's design.
  • Target
    There are four options from this drop-down menu which determines how the Learner is forwarded to the URL entered in the Link field: Blank will open the page in a new browser window, leaving the page with the referring link open behind it; Self loads the page within the same browser window; Parent loads the page within the immediate parent of a frame where nested frames are used in a page; Top causes the page to load in the full body of the page, breaking out of a frameset where applicable.
  • Logo Image
    An image of your logo (suggested size of 200x54 pixels) can be uploaded to appear in the top left of your organization's portal design.
  • Favicon
    The image uploaded here will appear in a number of places from the tab icon in browsers, to bookmarks and shortcuts. Organization's typically use their logos, however any image can be uploaded here (suggested size of 16x16 pixels).

Menu Private

The private menu is the main drop-down menu that is only available to Learners that have logged in to the LMS, and allows for navigation to different areas of the LMS. System Admins can choose from the below options:

  • Admin
  • Calendar
  • Catalog
  • Choose your language
  • Courses
  • Custom
  • Dashboard
  • Enrollment Key
  • Frequently Asked Questions
  • Leaderboards
  • Logout
  • Messages
  • News
  • Polls & Surveys
  • Your Information
  • Resources
  • Transcript

Menu Public

The public menu is the main drop down menu that appears for Learners that are not logged in to the LMS, and allows for navigation to different areas of the LMS. System Admins can choose from the below options:

  • Catalog
  • Choose your language
  • Custom
  • Dashboard
  • Enrollment Key
  • Frequently Asked Questions
  • News

Privacy Policy

The Privacy Policy section offers a multi-line text area with a built in WYSIWYG formatting bar. The policy can be edited and formatted as needed within the text area to include any information required for your organization's Privacy Policy.

Footer

Similar to the Privacy Policy section, the Footer section contains three multi-line text areas with built-in WYSIWYG formatting bars. The three text areas are labelled Custom Text 1, Custom Text 2, and Custom Text 3. These labels indicate the order in which they will be visible within the footer of your portal's page. For a larger screen layout, Absorb will order them numerically from left to right, each with a width of 33% of the portal design. On smaller screen sizes, these areas are stacked vertically in numerical order. 

Theme Tab

The Theme Tab is used by the System Admin to select the colors used throughout their portal. A short description below each color swatch provides information on where you can expect the color to appear.

theme-tab.png

 

 

Actions

System Admins will be able to create a new Template for which the below actions available for use:

Element Description
Add+ This button will add a new Template within the department selected from the drop-down menu.
Add Template This button will launch the Template workspace where the new Template can be created.
Save This button will save the new Template and return back to the Template Report page where the newly created Template will now appear in alphabetic order by Department.
Cancel This button will cancel the newly created Template without saving it in the LMS (which the System Admin will be prompted to confirm) and return the System Admin back to the Template Report page.

 

Editing Templates

Templates can also be modified in Absorb using the same Templates resources. When working with a previously saved Template the Actions available for use by the System Admin are:

Element Description

Edit

This button will relaunch the Templates workspace where any selected Templates from the Report can be updated and re-saved.
Delete This button will erase any Template(s) selected from the Templates Report (which the Admin will be prompted to confirm). Any Template(s) deleted here is permanently removed from the LMS and cannot be recovered.

Once the existing Template is re-saved the System Admin can decide to run a filtered report based on the Templates residing in the LMS.

Templates Report

Absorb's Templates tool will launch using the standard Report layout as its starting point where an Admin can: create a new Template; work on an existing Template; and/or, run a custom Templates Report. The basic Templates Report can be customized to provide data on any of the following parameters:

Element Description
Department ‡ This column displays the department for which the Template has been created for, and seen by.
ID This column displays the Template identifier automatically assigned by the LMS and can be used in creating deep links in Absorb.
Parent Department ‡ This column displays the department in which the selected department is a child of.

(‡ - Columns shown automatically as part of the default report view.)

 

Portal Images & Recommended Sizes

There are a variety of areas where images can be uploaded for use in the learner user interface via the admin user interface. Below is a list of the images that can be uploaded, and what their recommended sizes are, where applicable:

  • Header Logo
    • Max height 54px
    • Width will automatically adjust to retain logo proportions
    • 300KB max size
  • Fullscreen ​Login background
    • Recommended size 1920 x 1200px
    • 1MB max size 
    • (Image will stretch to fill this area)
  • Tiled Login Background 
    • Any size will work here
    • Image will repeat to fill the background
  • Billboards
    • Recommended Size - 768 x 360px
  • Welcome Tile Background
    • Recommended size 1920 x 360px
    • 300KB max size
    • (Image will stretch to fill this area)
  • Welcome Tile Foreground
    • Recommended size 768 x 360px 
    • 300KB max size 
    • Image will display over top of the welcome backgorund 
    • Image can be aligned left center or right on the screen
  • Course & Catalog Banner
    • Recommended size 1920 x 360px ​​
    • 300KB max size Image will stretch to fill this area​
  • Course Details Banner
    • Recommended size 1920 x 360px
    • 300KB max size
    • Image will stretch to fill this area
  • Course Posters
    • up to 5 poster images per course
    • 720 x 300px
  • Course Thumbnails
    • 229 x 173px
  • Favicon
    • 16 x 16px
    • 300KB max size​
Published on
Have more questions? Submit a request

0 Comments

Article is closed for comments.