Skip to main content

Color Variable Guide - Learner Experience

Tony Mirasola

This article is part of the Color Variable Guide. The Learner Experience section of the Theme control panel contains color customization options for buttons, tools, ratings, and status messaging.

In This Article

Primary

UI elements affected by this color variable are shown in blue

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

color-variables-0020.pngcolor-variables-0021.pngcolor-variables-0022.pngcolor-variables-0023.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

color-variables-0036.pngcolor-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

color-variables-0027.pngcolor-variables-0025.pngcolor-variables-0024.pngcolor-variables-0031.png

Resources

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

color-variables-0028.pngcolor-variables-0029.pngcolor-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

color-variables-0035.pngcolor-variables-0034.pngcolor-variables-0033.pngcolor-variables-0032.pngcolor-variables-0038.png

Lesson Player

  • Next Activity button
  • Close Activity button
  • Progress Bar

color-variables-0050.png

Profile

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

color-variables-0041.pngcolor-variables-0040.pngcolor-variables-0039.png

Polls & Surveys

  • Radio Button
  • Bar Graph
  • Button

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

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

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

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

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

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

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

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk