1. Absorb Help Center
  2. Absorb LMS Knowledge Base
  3. Learner Experience

Color Variable Guide

Updated

With Templates & Themes allowing for granular control over LMS colors, the following reference guides will provide you with information about which LMS elements are affected by which theme color setting.

Accessibility Advisory

When selecting colors for web content, we advise that they meet the WCAG AA compliance guidelines. This means that text and interactive elements should have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Tools like the WebAIM Contrast Checker can assist in verifying that color choices are accessible. This not only helps those with visual impairments but also improves the overall user experience. For more detailed guidelines, the Web Content Accessibility Guidelines (WCAG) provide comprehensive information.

 

The Color Picker

Color can be assigned to variables by entering a hexadecimal color code into the text field or use the Eyedropper button to select a color from the pallet tool. The palette tool can also be used to enter an RBG value by using the arrow button to switch from HEX to RBG.

When selecting a color, the picker will auto-generate a darker version of the variable that is previewed in the swatch. This darker version will be used for button rollovers and other interface elements.

color-picker.png

Branding

The Branding section of the Theme control panel contains color customization options for the base colors for your LMS portal such as the background, header, footer, and menu top bar colors.

Accordion: Branding: Base

Base

Learner Interface elements affected by the Base color variable are shown below in purple:

Branding_color-variables-0011.png

Header

  • Top bar of the interface
  • Top of the main navigation menu (Dark Version) 

Branding_color-variables-0012.png

 

Footer

Branding_color-variables-0013.png

 

Login

  • Background (Dark Version)

Branding_color-variables-0014.png

 

Preloading Splash Screen

  • Before the interface loads (Dark Version)

Branding_color-variables-0016.png

 

Lesson Player

  • Top header bar for lessons, assessments, etc. when the full screen lesson player is launched.

Branding_color-variables-0018.png

Branding_color-variables-0019.png

 

 

Accordion: Branding: Highlight

Highlight

Learner Interface elements affected by the Highlight color variable are shown in pink:

Branding_color-variables-0002.png

 

Header

  • Shopping Cart item count
  • Message Menu > message type active tab indicator

Branding_color-variables-0000.png

 

Dashboard

  • Tiles > Inbox tile large
  • Container Ribbon > Cards with Sessions or Course Bundles

Branding_color-variables-0003.pngBranding_color-variables-0001.png

 

Catalog / My Courses

  • Category back arrow button
  • Category breadcrumb arrow
  • Category folder item count
  • Cards with Sessions or Course Bundles

Branding_color-variables-0015.pngBranding_color-variables-0007.png

 

Course Details

  • Session Calendar > previous/next month arrows > item count

Branding_color-variables-0008.png

 

Transcript

  • Print Transcript button

Branding_color-variables-0004.png

 

Profile > Inbox tab

  • Priority Messages tab > List Item > Profile Picture > Priority Icon

Branding_color-variables-0005.png

 

Polls & Surveys

  • Poll radio button of the winner

Branding_color-variables-0009.png

Leaderboards

  • Back Arrow button
  • Filter active tab indicator

Branding_color-variables-0010.png

 

Learner Experience

The Learner Experience section of the Theme control panel contains color customization options for buttons, tools, ratings, and status messaging.

Accordion: Learner Experience: Primary

Primary

Learner Interface elements affected by the Primary color variable are shown in blue:

LE color-variables-0026.png

 

Dashboard

  • Header top bar > Shopping Cart Menu > View Shopping Cart button
  • Billboard > Video > Play Icon button
  • Large Tiles > Leaderboards, Inbox, FAQs, Polls & Surveys > list items and buttons
  • Container Ribbon > Cards:
    • Progress Bar
    • Price button
    • Added to Cart button
    • Enroll button

LE color-variables-0020.png

LE color-variables-0021.png

LE color-variables-0052.pngLE color-variables-0022.png

 

Public Dashboard

  • Top Header:
    • Login buttons
    • Sign Up button
    • Keep me logged in check mark
    • Active Field
  • Container Ribbon > Cards:
    • Progress Bar
    • Price button
    • Added to Cart button

LE color-variables-0036.pngLE color-variables-0037.png

 

Catalog / My Courses / My Calendar

  • View Selector > Current Selected View
  • Refine Filter Sidebar:
    • Show Categories toggle
    • Filter check boxes
  • Cards View:
    • Progress Bar
    • Price button
    • Added to Cart button
    • Enroll button
  • Detailed View:
    • Progress Bar
    • Price button
    • Added to Cart button
    • Enroll button
  • List View:
    • Progress Bar
    • Status Icon
    • Price button
    • Added to Cart button
    • Enroll button
  • Calendar View:
    • Calendar Month/Year button
    • Calendar weekdays
    • Calendar day selected
    • ILC Progress Bar
    • ILC Price button
    • ILC Added to Cart button
    • ILC Enroll button
    • ILC View button
    • ILC Session Calendar Date Month/Year

LE color-variables-0027.png

LE color-variables-0025.png

LE color-variables-0024.png

LE color-variables-0031.png

 

Resources

  • View Selector > Current Selected View
  • Card View > Open button
  • Detailed View > Open button
  • List View > Open button

LE color-variables-0028.png

LE color-variables-0029.png

LE color-variables-0030.png

 

Course Details

  • ILC Session:
    • Calendar Month/Year button
    • Calendar weekdays
    • Calendar day selected
    • Session buttons
    • Session Calendar Date Month/Year
  • Online Course:
    • View Selector > Current Selected View
    • Radial Progress Bar
    • Status Icons
    • Buttons
  • Resources Tab > Buttons

LE color-variables-0035.png

LE color-variables-0034.png

LE color-variables-0033.png

LE color-variables-0032.png

 

Lesson Player

  • Next Activity button
  • Close Activity button
  • Progress Bar

LE color-variables-0050.png

 

Profile

  • Profile Picture > Edit Picture Icon
  • My Activity Tab > Edit Profile button
  • Inbox Tab > Message Type Tab
  • Profile Tab > Button

LE color-variables-0040.pngLE color-variables-0041.png

LE color-variables-0039.png

 

Polls & Surveys

  • Radio Button
  • Bar Graph
  • Button

new

color-variables-0042.pngcolor-variables-0043.png

Leaderboards

  • Leaderboard Titles
  • Button (Dark Version)
  • Your Position (Dark Version)
  • My Rank, Points, and Points to Next Rank Numbers
  • Rank and Points Numbers (Dark Version)
  • Results Per Page (Dark Version)
  • Profile Picture Border (Dark Version)

color-variables-0045.pngcolor-variables-0044.png

Shopping Cart

  • Progress Indicator
  • Buttons
  • Radio Buttons
  • Payment Type Icons

color-variables-0049.pngcolor-variables-0048.pngcolor-variables-0047.pngcolor-variables-0046.png

Accordion: Learner Experience: Default

Default

UI elements affected by this color variable are shown in teal blue

color-variables-0051.png

Dashboard

  • Container Ribbon > Cards:
    • Unrated / Unselected Stars
    • Progress Bar background

color-variables-0052.png

Catalog / My Courses

  • Refine Filter Sidebar:
    • Filter drop down arrow
    • Filter text input field arrow
  • Sort drop down arrow
  • Cards View:
    • Progress Bar Background
  • Detailed View:
    • Progress Bar Background
  • List View:
    • Radial Progress Bar Background
  • Calendar View:
    • Calendar days with Sessions
    • Progress Bar Background
  • Search Results > Filter Sidebar > Course Rating > Unselected Stars

color-variables-0056.pngcolor-variables-0055.pngcolor-variables-0054.pngcolor-variables-0053.png

Search Results

  • Search Results > Filter Sidebar > Course Rating > Inactive Stars

color-variables-0057.png

Course Details

  • Course / ILC status > Radial Progress background & percentage number
  • Session radial status background
  • Banner > Course Rating > Unselected Stars

color-variables-0060.pngcolor-variables-0060-1.png

Profile

  • Edit Profile > Form field drop down arrows
  • Inbox > Message modal > Default profile icon & date

color-variables-0061.pngcolor-variables-0062.png

Polls and Surveys

  • Bar Graph background
  • Percentages
  • Titles
  • Unselected Radio Buttons

color-variables-0058.png

Transcript

  • Courses > Status Pills

color-variables-0059.png

Shopping Cart

  • Progress Indicator background
  • Form field drop down arrows
  • Payment Method Radial button borders

color-variables-0246.pngcolor-variables-0245.pngcolor-variables-0244.png

 

 

 

Accordion: Learner Experience: Feedback

Feedback

UI elements affected by this color variable are shown in gold

color-variables-0063.png

Dashboard

  • Container Ribbon > Cards:
    • Rated Courses / Selected Stars
    • Pinned Courses
    • Pin button hover state

color-variables-0064.png

Catalog / My Courses

  • Cards View:
    • Rated Courses / Selected Stars
    • Pinned Courses
    • Pin button hover state
  • Detailed View:
    • Rated Courses / Selected Stars
    • Pinned Courses
    • Pin button hover state
  • List View:
    • Rated Courses / Selected Stars
    • Pinned Courses
    • Pin button hover state
  • Calendar View:
    • Pinned Courses
    • Pin button hover state

color-variables-0068.pngcolor-variables-0067.pngcolor-variables-0066.pngcolor-variables-0065.png

Search Result

  • Search Results > Filter Sidebar > Course Rating > Active Stars

color-variables-0069.png

Course Details

  • Banner > Course Rating > Selected Stars
  • Banner > Pinned button

color-variables-0070.png

 

 

Accordion: Learner Experience: Success

Success

UI elements affected by this color variable are shown in (color)

color-variables-0071.png

Dashboard

  • Container Ribbon > Cards:
  • Status Hat
  • Progress bar complete
  • Complete button

color-variables-0073.png

Catalog / My Courses

  • Card View:
  • Status Hat
  • Progress bar complete
  • Complete button
  • Detail View:
  • Status Hat
  • Progress bar complete
  • Complete button
  • List View:
  • Status Icon
  • Radial Progress bar complete
  • Complete button

color-variables-0079.pngcolor-variables-0078.pngcolor-variables-0077.png

Lesson Player

  • Progress Bar

color-variables-0072.png

Course Details

  • Radial Progress
  • Lesson Status Icon
  • Complete button
  • Points number
  • Credits number
  • Competency Links
  • Comments Tab > Unfollow & Helpful Thumbs Up Icon

color-variables-0075-01.pngcolor-variables-0075.png

Transcript

  • Courses > Status Pills

color-variables-0076.png

Share

  • Copied to Clipboard message

color-variables-0080.png

 

 

Accordion: Learner Experience: Failure

Failure

UI elements affected by this color variable are shown in red

color-variables-0081.png

Dashboard

  • Container Ribbon > Cards:
    • Progress Bar
    • Re-Enroll button
    • Failed button
    • Status Hat

color-variables-0129.png

Catalog / My Courses

  • Card View:
    • Status Hat
    • Progress bar failed
    • Complete button
  • Detail View:
    • Status Hat
    • Progress bar failed
    • Complete button
  • List View:
    • Status Icon
    • Radial Progress bar failed
    • Complete button

color-variables-0097.pngcolor-variables-0096.pngcolor-variables-0095.pngcolor-variables-0128.png

Login / Sign Up / Forget Password

  • Error Message box background
  • Form Field validation messages

color-variables-0084.pngcolor-variables-0083.pngcolor-variables-0085.png

Edit Profile

  • Form field validation messages

color-variables-0086.pngcolor-variables-0087.png

Transcript

  • Courses > Status Pills

color-variables-0082.png

Admin User Impersonation

  • Top Header > Main Menu > Hamburger Icon
  • Top Header > Main Menu > Main Navigation:
    • User profile "logged in as" message
    • Stop Impersonating button

color-variables-0094.pngcolor-variables-0093.png

 

 

 

Accordion: Learner Experience: Warning

Warning

UI elements affected by this color variable are shown in orange

color-variables-0105.png

Dashboard

  • Container Ribbon > Cards:
    • Progress Bar
    • Status Hat
    • Start button
    • Resume button

color-variables-0100.png

Catalog / My Courses

  • Card View:
    • Progress Bar
    • Status Hat
    • Start button
    • Resume button
  • Detail View:
    • Progress Bar
    • Status Hat
    • Start button
    • Resume button
  • List View:
    • Status Icon
    • Radial Progress Bar
    • Start button
    • Resume button
  • Calendar View:
    • Calendar Status Hat
    • ILC Status Hat
    • ILC Progress Bar
    • ILC Start button
    • ILC Resume button
    • ILC Session Calendar Date Month/Year

color-variables-0103.pngcolor-variables-0102.pngcolor-variables-0101.pngcolor-variables-0104.png

Lesson Player

  • Progress Bar

color-variables-0098.png

Course Details

  • Expires Message
  • Due Date Message
  • Radial Progress Bar

color-variables-0099.png

 

 

Accordion: Learner Experience: Danger

Danger

UI elements affected by this color variable are shown in brown

color-variables-0106.png

Profile

  • Edit Profile > Cancel button
  • Edit Profile Photo

color-variables-0107.pngcolor-variables-0109.png

Catalog / My Courses

  • Refine Filter Sidebar Remove "X" button

color-variables-0110.png

Course Details

  • ILC > View Sessions > Cancel Session button
  • Comments > Reply > Cancel button

color-variables-0111.pngcolor-variables-0118.png

 

 

 

Dashboard

Colors for the tiles, ribbons, and icons on your portal's dashboard.

Accordion: Details: Dashboard

 

 

 

 

Type

Colors for the typography of your portal such as body text, banner text, and hyperlinks.

Accordion: Details: Type

 

 

 

 

Icons

Colors for the icons in the header, menus, and buttons. Does not contain colors for your dashboard tile icons (for tile icon colors, see Dashboard Color Variables)

Accordion: Details: Icons

 

 

 

 

 

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Article is closed for comments.

Related articles