ClearCompany Learning: Themes

The Themes tool enables organizations to align their learner experience in the Learning system with their organization's brand identity. Admin users can create customized dashboards for different user groups, enhancing both functionality and visual appeal. This article provides an overview of themes, both creating and managing them.

In this article:
Themes Overview
Creating Themes
Managing Themes

Themes Overview

| Themes Overview | Navigation

Themes allow users to personalize the learning platform to reflect the company's brand. Themes defines features visible to both front-end and admin users. The following elements can be created and edited:

• Login Page
• Home Page
• Dashboard
• Gadgets
• Front-End
• Banners

To navigate from the Administration Dashboard, go to Settings > Themes.

---

Creating Themes

Please Note:

Images uploaded must be in .png file format.

| Creating New Theme | Settings | Groups | Custom Navigation Menu

1. From the Themes Dashboard, click “+Create Theme” at the top right of the screen.
2. Fill out the Theme fields below:
   
   1. Theme Name: Enter a name for the theme.
   2. Color Settings: Adjust primary and secondary colors.
      • Color 1- Sitewide Primary Color 
      • Color 2- Sitewide Secondary Color & Text Links
      • Color 3- Sitewide Main Logo Background Color
   3. Custom Dashboard Page:  Users can create a custom dashboard, two options are:
      • A link to an external URL page
      • A custom HTML page, to learn more check out ClearCompany Learning: Custom HTML Pages & ClearCompany Learning: Custom HTML Page Editor
        
   4. Default Font: Select a font type for the theme
   5. Hide Object Completion Percentage: Choose whether to display completion percentages.
   6. Custom Logout URL: This is the URL that will direct the user when they logout of the learning platform
   7. Dark Mode: Enable Dark Mode
   8. Active: When the Theme is active, it will be available to display for users/groups
3. Click Save, and a new window will open with additional settings

The settings above can be edited, and the additional settings can be adjusted.

1. Main Logo (max-width of 185px): The logo users will see when they are on their dashboard in the top-left-hand corner. 
2. Login Logo (max-width of 300px): The logo users will see on the login page.
3. Banner Image (max-width of 200px):  Banners display on the user's dashboard on the left side below the calendar link.
4. Front End Header Image (suggested width/height of 1920x86): The front end header image displays below the search box at the top of the page. The Learning platform recommends an image with a pattern or a solid color.
5. Site Background Image (suggested width/height of 1920x1080): The site background is the image that will be displayed in the background of the front end and administration side of the system.
6. Default Certificate Logo (max-width of 300px): The default certificate logo will display the completed training certificate users earn.
7. Banner URL: A Banner URL allows users to include an email or Link in the banner. When users click the link they will be redirected.
   • To add an email, add “mailto:[e-mail]” followed by the desired contact email address.
8. Click Save.

The Groups tab allows users to assign themes to specific groups and make the primary theme that will be displayed to users.

The Custom Navigation Tab allows users to customize the order of the navigation menu. This includes:

• Custom Buttons
• SubMenu Items
• Front-End Options
• Administration Options

---

---

Managing Themes

| Editing A Theme | Login Page | Login/Logout URL Cloning

1. Themes can be edited and updated by admin users and users with the Theme Edit Right.
2. From the Themes Dashboard, click the pencil tool on the theme that needs to be updated.
3. Update images or reset them to default.
4. Review the Groups and Custom Navigation tabs.
5. When done click Save.

Admin users can also customize the login page. Users can:

1. Go to Administration > Settings > Options.
2. Navigate to Configure Login Page.
3. Fill out the fields below:
   • Upload Background Image: Background image for the login page. (Must have .gif, .jpg, or .png file extension)
   • Upload Custom Favicon: A favicon is a small image in the tab of the browser. (Must have .ico file extension)
   • Upload Custom Apple Touch Icon: An Apple Touch Icon image is what is seen on Apple products. (Must have .png file extension)
   • Hide Forgot Password Link: This allows users to hide the password link within the login box.
   • Enable Custom Support Message: This allows users to display a custom message for users prior to logging into the LMS. (Note: The checkbox must be checked to see the editor.)
4. When done, click "Save Custom Support Message".

Admin users can also customize the message that is displayed on the login page. Users can:

1. Go to Administration > Settings > Options.
2. Navigate to Custom Login/Logout URL.
3. Fill out the fields:
   1. Custom Login URL: This is the URL that will direct the user to login to your learning platform.
   2. Custom Logout URL: This is the URL that will direct the user when they logout of the learning platform.
   3. Deep Link Variable: A deep link variable is a variable that captures information from a URL in a deep link.
      • A deep link is a URL that directs users to a specific location within a website.
      • Deep links are used to improve the user experience by allowing users to access a specific page directly. 
   4. Users have the option to include different login boxes:
      • Example:
        • Base URL: lms.brainier.com/#/login?gid=47
        • To identify a group ID, navigate to Users/Groups > Groups and find the id= parameter in the URL.
   5. For organizations utilizing Single-Sign-On (SSO), the URL will need to be modified to navigate to the correct page. The configured URL will display as:

      • https://companyname.brainier.com/#/login?noredirect=true&gid=47

Note: If redirected incorrectly while testing; add “/#/noredirect” at the end of the Learning platform URL, this elements navigates users back into the site allowing for the custom URL to be adjusted again.

Cloning allows users to themes that have already been created in the learning platform.

1. To clone a theme, select the Clone on the bottom right corner of the Settings Tab. Keep in mind once Clone is clicked it will create a duplicate theme and cannot be deleted.
2. The cloned Theme by default will be in Draft status.