Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.





Panel

Table of Contents


Using CSS

Learn how to customize the look and feel of your Learner's UI using CSS from the various choices below.

Navigate to Setup → Look and Feel → Learner UI Configuration → Custom CSS

What it controlsWhat it doesCodeDisplay Before

Display After

@font-face

Ability to change font for the Dashboard experience.


Code Block
@font-face {
  font-family: 'Pacifico';
  src: url('https://sandbox.trainingrocket.com/static/fonts/Pacifico.ttf');
}

body {
  font-family: 'Pacifico';
}


.navbar-default

Add background color effect to the navigation bar.


Code Block
.navbar-default  {
  background-image: linear-gradient(to bottom, red, yellow, green);
}


.navbar-default ul.navbar-nav
Able to alter the Font and color attached to the nagivation bar menu items.


Code Block
.navbar-default ul.navbar-nav>li>a, ul.navbar-nav>li>a, #navigation .navbar-
right>li>a, .navbar-default ul.navbar-nav>li>a:active, ul.navbar-
nav>li>a:active, .navbar-default ul.navbar-nav>li>a:visited, ul.navbar-
nav>li>a:visited, .navbar-default ul.navbar-nav>li>a:focus, ul.navbar-
nav>li>a:focus {
  color: forestgreen;
  font-family: 'courier', sans-serif;
}


.navbar- default ul.navbar-nav>li>a:hover

Add background color effect to the selected item on the navigation bar and also works when hovering over a menu item prior to selection.


Code Block
.navbar-default ul.navbar-nav>li.active>a, ul.navbar-nav>li.active>a, .navbar-
default ul.navbar-nav>li>a:hover, ul.navbar-nav>li>a:hover {
  background-image: linear-gradient(to bottom, red, yellow, green);
  color: lawngreen;
}


#navigation #collapsible-navigation-links .navbar-nav

Add different color to the selected Navigation bar menu item.


Code Block
#navigation #collapsible-navigation-links .navbar-nav>li.active a, 
                    #navigation-second-level .container .navbar-nav>li.active a {
  color: goldenrod;
}


#banner.with-background-image .banner-background

Apply a blur effect on the background image by increasing the blur value.


Code Block
#banner.with-background-image .banner-background {
  -webkit-filter: blur(50px);
}


#banner.consumption

Aligns the text within the whitespace higher or lower depending on the height value.


Code Block
#banner.consumption {
    height: 250px;
}


.banner-background

Shortens or lengthens the height of the banner background depending on the height value.


Code Block
#banner.consumption .banner-background {
    height: 250px;
}


.banner-overlay

Removes the dark tint from the Banner.


Code Block
#banner.consumption .banner-overlay {
    height: 0px;
}


.banner-content

Aligns the banner content higher or lower, based on the value assigned to margin-top.


Code Block
#banner.consumption .banner-content {
   margin-top: 300px;
}


#consumption-content

Aligns the consumption content higher or lower based on the value assigned to magrin-top.


Code Block
#consumption-content {
    margin-top: 5px;
}


.section-container

Add/remove spacing between content containers.


Code Block
#consumption-content .section-container {
    margin-bottom: 0px;
}


well.launch-well (SCORM package launch button container)

Add styling to the SCORM Package Launch button.


Code Block
#consumption-content .section-container .section>.well.launch-well {
    padding: 10px;
    border: solid red;
    background: black;
    box-shadow: 10px 10px 5px #ff6666;
}


a.btn-launch (SCORM package launch button)

Resize the Launch button and its font.


Code Block
#consumption-content.e_learning_component .section-container .section .launch-well a.btn-launch {
    width: 100%;
    font-size: 20px;
}


#footer

Controls the size of the footer by raising or lowering it via the height variable.


Code Block
.course-pathway-consumption 
#user-content 
#footer 
#pathway-footer .prev-requirement, .course-pathway-consumption
#user-content 
#footer 
#pathway-footer .next-requirement {
    height: 200px;
    overflow: hidden;
}


a.show (Footer Navigation)

Allows resizing and alignment of the footer text via the font-size, position and top variables.


Code Block
.course-pathway-consumption 
#user-content 
#footer 
#pathway-footer .prev-requirement a.show-prev-section .requirement-section {
   font-size: 10px;
   position: absolute;
   top: 25px;
}


.resources (Downloaded Resources Page)

Allows user to hide or show the 'Download' Icon and also make the canvas area visible. This area could be used to add images or more Text.


Code Block
.download-prompt {
    display: inline;
    visibility: hidden;
}
 
.course-pathway-consumption .downloads-list .download-list-item .resource-access-link canvas {
    display: inline !important;
    visibility: visible !important;
}


.title-container

Remove the dark tint from the card view in the Learner Profile.


Code Block
languagecss
.tile-container .tile .outer.has-logo .inner {
  background-color: rgba(0,0,0,0) !important;
}


body.desktop-sidebar .body-outer .body-inner #desktop-sidebar

Remove the sidebar of the Learner UI.


Code Block
body.desktop-sidebar .body-outer 
.body-inner 
#desktop-sidebar {
  display: none;
}


#consumption-content .section-container .launch-well.well

Allows the user to change the color of the Launch button and Sidebar selection.


Code Block
#consumption-content .section-container .launch-well.well a {
  background-color: #f7961d !important;
}

.course-pathway-consumption .requirements .requirement a .requirement-icon-bg.completed {
    background-color: #2ed276;
}

.course-pathway-consumption .requirements .requirement.active a:active, .course-pathway-consumption .requirements .requirement.active a:focus, .course-pathway-consumption .requirements .requirement.active a:hover, .course-pathway-consumption .requirements .requirement.active a:visited, .course-pathway-consumption .requirements .requirement.active a .requirement-duration {
  background-color: #f7961d;
}

.course-pathway-consumption .requirements .overview.active a {
  background-color: #f7961d;
}


.course-pathway-consumption #user-content #banner .back-link{ visibility: visible; }Allows the user to add a 'Back to My Learning' link in the Course Banner. Upon clicking, it will bring the Learner back to their Dashboard.


Code Block
.course-pathway-consumption #user-content #banner .back-link{ visibility: visible; }


#awards-filter-container.filter-containerHide bar to select badges.


Code Block
#awards-filter-container.filter-container {
    display: none;
}


div[class="show-when-empty display-block panel panel-default"] div[class="panel-body text-center"]Replace the text under My Learning.


Code Block
div[class="show-when-empty display-block panel panel-default"] div[class="panel-body text-center"]{
visibility: hidden;
}
 
div[class="show-when-empty display-block panel panel-default"] div[class="panel-body text-center"]::before{
color: red;
visibility: visible;
content: "You are not enrolled in any classes.";
margin: auto;
}


form#personalInfoHide the "Company" fields from the Learner UI profile page.


Code Block
form#personalInfo .form-group.clearfix:nth-of-type(3) {
    display: none;
}


#collapsible-navigation-links

This hides the cart icon from the Learner UI


Code Block
#collapsible-navigation-links > ul.nav.navbar-nav.navbar-right > li:nth-child(1) {
display: none;


body.consumption

This code hides the Icon and text from the Learner UI


Code Block
body.consumption .consumption.exam_component .banner-content .icon,
body.consumption .consumption.exam_component .banner-content .type-name,
body.consumption .consumption.e_learning_component .banner-content .icon,
body.consumption .consumption.e_learning_component .banner-content .type-name, 
body.consumption .consumption.content_component .banner-content .icon,
body.consumption .consumption.content_component .banner-content .type-name {
    display: none !important;
}


Warning

If you copy all of the above code, it will remove the Icon and Supporting text from Learner UI for ExamsAssessments, eLearning and Content.
ONLY copy the required portion of the code if you want to remove the Icon & supporting Text for the respective Component.



Learner Dashboard 

Learn how to customize the look and feel of your Learner's UI.

Configure a Custom Message in the Learner UI

When learners create accounts for themselves, the learner dashboard will not have any learning materials (if they have not purchased any). As an Administrator, you can configure a custom message to be displayed on the Learners UI for quick navigation.

Default Message 

Learndot provides a default message that will be displayed in the Learner Dashboard if there are no learning materials found. 

Custom Message

To configure a custom message: 

  • Login as an Administrator
  • Navigate to Setup > Look and Feel > Learner UI
  • Click Update Options


  • Enter your message that you want to display to your learners if they have not purchased learning materials or registered for any events

  • Press Save
  • Now, the Learner will see the Custom Message being displayed on their empty Dashboard

Configure the Logo link in the Learner UI

The aim is to allow Administrator's to specify the URL link for the Logo in the Learner UI in order to help the learner on his navigation through the Learner UI. To do this:

  • Login as an Administrator
  • Navigate to Setup > Look and Feel > Learner UI

  • The Logo File can be associated with a URL which helps the Learner with quick navigation
Note

You can set any link you want the Learner to be redirected to, common destinations include "/user", which brings back the learner to their dashboard upon clicking

  • Click the Update Options button and you will be brought to the edit page 
Note

You can also choose to replace the Logo File and the URL it points to at this stage. The recommended resolution for a Logo file is 600 x 150 px

  • Press Save to commit changes. 

View as a Learner

As a Learner, you can use the Logo link for quick navigation. This however depends on what the Administrator has set the Logo link to be. For instance:

  • Navigate to the Learner dashboard and look for the Logo at the top left corner

  • Clicking the Logo link will take the learner to the URL set by the Administrator. For instance:
    • If the logo was set to "/user" > the learner will get redirected to the Learner page
    • If the logo was set to "/catalog" > the learner will get redirected to the Catalog page
    • If the logo was set to "http://www.google.com" > the learner will get redirected to http://www.google.com - You have to put the full URL if you want to redirect the user outside of Learndot


...