1
Advanced
Customization Guide
2
There is a number of default customi-
zation options to brand the TalentLMS
portal, however with custom coding you
can create a more immersive, fun-lled
and engaging learning experience.
To apply custom code in TalentLMS, login
as Administrator and navigate to
Account and Settings > Theme.
Choose the CSS or JavaScript tab and
paste the related code from this sheet
to style the targeted element.
Advanced
Customization Guide
3
CONTENTS
HOMEPAGE CUSTOMIZATIONS
1. Add the background image only on the login page - JS
2. Redirect users who click on your logo to a custom link - JS
3. Display a dierent logo on your homepage versus the logo in your portal - CSS
DASHBOARD CUSTOMIZATIONS
4. Change the colors of your root categories & subcategories - CSS
5. Remove the search bar from the header - JS
6. Hide the option for learners to view courses in a grid style - CSS
7. Change the color of the Discussion & Calendar alerts
8. Customize the learner view so upon login they see a list of collapsed categories - JS
9. Customizations for the Learner’s Dashboard - CSS
COURSES CUSTOMIZATIONS
10. Hide the option to share a course on social media,use the following code - CSS
11. Hide the print option once users have completed surveys & tests - CSS
12. Disable the ability to copy Question text in Test and Survey units - CSS
13. Change images for test, survey & empty results - CSS
14. Hide options to submit a reply in Assignments - CSS
15. Turn the join link of an ILT session to a button - CSS
16. Add new item to learner dashboard sidebar - JS
17. Add a note to the results page of a Test to indicate given answers - JS
18. Make the default pop-up “Add to LinkedIn”, so learners don’t have
to click “Share Certicate” to view this option - JS
19. Hide the “Get this course” button on a course from the Course Catalog - CSS
GENERAL PORTAL CUSTOMIZATIONS
20. Add a background image to your portal - CSS
21. Customize the internal announcement - CSS
22. Prevent all administrators to be able to login as another user - CSS
23. Change the header so that that logo sits at the top and the menu bar below - CSS}
24. Expand Users or Courses list to 20 records (instead of 10) - JS
25. Replace the group image - JS
4
Homepage customizations
1. Add the background image only on the login page - JS
if(!currentUserId){
$(‘.tl-body’).css({‘background’:’url(“https://d3j0t7vrtr92dk.cloudfront.net/images/themes/
paperboat@2x.png”) xed’,’background-size’:’cover’})
}
Before customization:
After customization:
Note: Make sure the
image you want to use
is uploaded on a hosting
site or your server. Copy
the code above in the
JavaScript tab of your
Theme and replace the
highlighted link with the
link of your hosted image.
5
2. Redirect users who click on your logo to a custom link - JS
Copy the code below in the JavaScript tab of your Theme.
$(‘.navbar .brand’).attr(‘href’,’http://www.example.com’);
3. Display a dierent logo on your homepage versus the logo
in your portal - CSS
Copy the code below in the CSS tab of your Theme.
#navbar-cms .nav-container > .brand > img{
content : url(‘https://d3j0t7vrtr92dk.cloudfront.net/images/themes/paperboa[email protected]’)
!important;
}
6
Dashboard customizations
4. Change the colors of your root categories & subcategories - CSS
/*1st level category*/
#tl-dashboard-course-wrapper li > .tl-tree-category{
background-color: #c90000 !important;
}
/*2nd level category*/
#tl-dashboard-course-wrapper li > ul > li > .tl-tree-category{
background-color: #54c900 !important;
}
/*3rd level category*/
#tl-dashboard-course-wrapper li > ul > li > ul > li > .tl-tree-category{
background-color: #00b5c9 !important;
}
Before customization:
After customization:
7
The customization works both in list and grid view. You can customize up to three levels of categories
(main and two subcategories). Copy the code below in the CSS tab of your Theme.
5. Remove the search bar from the header - JS
This applies only for the Learner view. Copy the code below in the JavaScript tab of your Theme.
if($(‘.dropdown-menu > #tl-administrator-option’).length === 0 && $(‘.dropdown-menu > #tl-
trainer-option’).length === 0){
$(‘.nav .tl-nav-spotlight’).hide();
}
6. Hide the option for learners to view courses in a grid style - CSS
Copy the related code below in the CSS tab of your Theme based on whether you prefer to apply the
change only on the Learner dashboard and/or the catalog.
TO HIDE THE GRID OPTION FOR THEIR DASHBOARD (EXISTING CODE):
.tl-learner-dashboard-box #tl-catalog-switcher {display:none;}
TO HIDE THE GRID OPTION FOR THE CATALOG (NEW CODE):
#tl-catalog-switcher{
display: none !important ;
}
7. Change the color of the Discussion & Calendar alerts
Copy the code below in the CSS tab of your Theme.
span.badge.tl-calendar-events-stats{background-color:#3a87ad;
color:#;}
span.badge.tl-discussions-stats{
background-color:#3a87ad; color:#;}
8. Customize the learner view so upon login they see a list
of collapsed categories - JS
Customize the Learner view to see a list of categories to expand individually to view the courses in list
and/or grid view. Copy the code below in the JavaScript tab of your Theme.
8
WHEN IN LIST VIEW:
//Collapse categories by default in List view
$(document).ready(function(){
if ($(“#tl-dynamic-tree”).length){
$(“#tl-dynamic-tree”).dynatree(“getRoot”) .visit(function(node){
node.expand(false);
});
}
});
WHEN IN GRID VIEW:
//Collapse categories by default in Grid view
$(document).ready(function(){
$(‘.tl-grid-dashboard-course-container .tl-tree-category:not(“.dynatree-expanded”)’).click();
});
9. Customizations for the Learner’s Dashboard - CSS
Copy the code below in the CSS tab of your Theme.
/* change the microstats bar colors */
.tl-microstats-section, .tl-microstats-section>.item {
background-color: #FFFFF0 !important;
color: #4682B4 !important;
border-color: #B0C4DE !important;
}
/* change the color of a selected microstats item */
.tl-microstats-section .item.active {
background-color: #e9f5db !important;
}
/*change the text color of the microstats stats value*/
.tl-microstats-section .item .item-data .item-value {
color: white !important;
}
/*change the text color of the microstats caption*/
.tl-microstats-section .item .item-data .item-caption {
color: blue !important;
}
/*change the color of the icons on Dashboard */
div.tl-icons-block i {
color: #;
}
.tl-icon-stack-background {
9
color: #b31315 !important;
}
.tl-icons-block:hover>.tl-icon-stack>.tl-icon-stack-content {
color: #63040e !important;
}
.tl-icons-block:hover>.tl-icon-stack>.tl-icon-stack-background {
color: #e0d2c3 !important;
}
/*Instructor’s sidebar icons - selected*/
/*circle bg*/
div.tl-icons-block.selected .tl-icon-stack-background,
div.tl-icons-block.selected:hover .tl-icon-stack-background {
color: #e0d2c3 !important;
}
/*selected icon color*/
div.tl-icons-block.selected .tl-icon-stack-content,
div.tl-icons-block.selected:hover .tl-icon-stack-content {
color: #63040e !important;
}
/*selected label color*/
block.selected .tl-icon-label a,
div.tl-icons-block.selected .tl-ellipsis a {
color: #63040e !important;
}
/* change the color of the links on Admin Dashboard */
#tl-admin-dashboard>.tl-icons-block>.tl-icon-label .hidden-phone a {
color: #B22222 !important;
}
/* Customize the gamication btn */
#tl-header-gamication-entrance {
background-color: red;
color: white;
background-image: none;
}
#tl-header-gamication-entrance:hover {
background-color: white;
color: red;
background-image: none;
}
10
Courses customizations
10. Hide the option to share a course on social media,
use the following code - CSS
Copy the code below in the CSS tab of your Theme.
.tl-catalog-social{
display : none !important;
}
11. Hide the print option once users have completed surveys & tests - CSS
Copy the code below in the CSS tab of your Theme.
#tl-print-survey{display:none;}
@media print{body{display: none;}}
12. Disable the ability to copy Question text in Test and Survey units - CSS
Copy the code below in the CSS tab of your Theme.
#tl-test-survey-form{-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-
select: none;-moz-user-select: none; -ms-user-select: none; user-select: none;}
13. Change images for test, survey & empty results - CSS
Copy the code below in the CSS tab of your Theme.
/*Replace the survey artwork*/
.tl-test-survey-header-img[src$=”/empty_surveys.svg”] {
content:url(“https://example.com/image.jpg”);
}
/*Replace the test artwork*/
.tl-test-survey-header-img[src$=”/empty_tests.svg”] {
content: url(“https://example.com/image.jpg”);
}
/*Replace the “empty results” dashboard image*/
.tl-search-empty-result .tl-empty-results-img {
content: url(“https://example.com/image.jpg”);
}
/*Replace the discussion artwork*/
#tl-discussions .tl-empty-results-img {
content: url(“https://example.com/image.jpg”);
}
11
14. Hide options to submit a reply in Assignments - CSS
Copy the code below in the CSS tab of your Theme.
/*hide Text Reply*/
.tl-assignment-usetextbox {
display: none!important;
}
/*hide Upload a le*/
.tl-assignment-showuploader {
display: none!important;
}
/*hide Record video*/
.tl-assignment-showrecorder {
display: none!important;
}
/*hide Record audio*/
.tl-assignment-showrecorder-audio {
display: none!important;
}
/*hide Record screen*/
.tl-assignment-showrecorder-screen {
display: none!important;
}
/*Hide the “modify answer” option*/
.tl-assignment-modify-answer {
display: none !important;
}
15. Turn the join link of an ILT session to a button - CSS
.tl-ilt-view-session-info-value a[title=”Join”] {
display: inline-block;
border-radius: 6px;
padding: 6px 10px;
color: #;
background-color: green;
}
12
Before customization:
After customization:
Note: The button will
be visible when the
Join link becomes
active, about 15
minutes before
the event is ready
to be joined. Copy
the code above in
the CSS tab of your
Theme.
16. Add new item to learner dashboard sidebar - JS
var heading = ‘Custom heading’;
var text = ‘Lorem ipsum dolor sit amet, consectetur adipiscing elit.’;
var link = ‘https://www.talentlms.com’;
var iconClass = ‘icon-info-circle’;
var append = ‘<div class=”tl-icons-block” onclick=”window.open(\’’+link+’\’)”>’;
append += ‘<span class=”tl-icon-stack”><i class=”icon-circle tl-icon-stack-background”></i><i
class=”tl-icon-stack-content ‘+iconClass+’”></i></span>’;
append += ‘<div class=”tl-icon-label”><div class=”tl-ellipsis tl-bold-link”><a
title=”’+heading+’”>’+heading+’</a></div><div>’+text+’</div></div>’;
append += ‘</div>’;
var $sidebar = $(‘.tl-body .tl-learner-dashboard-box .tl-content-sidebar’);
$sidebar.nd(‘.tl-icons-block’).last().after(append);
13
Before customization:
After customization:
Note: With this
customization you
can link to internal
tools, FAQ pages
or other resources
directly from the
dashboard of your
TalentLMS portal. If
you want to use
a dierent icon,
contact the Talent
LMS Support team.
Copy the code above
in the JavaScript tab
of your Theme.
17. Add a note to the results page of a Test to indicate given answers - JS
Here you can replace the content of the note with your own copy if you wish.
Copy the code below in the JavaScript tab of your Theme.
//Add a note with the test annotation
$(‘<span style=”font-size: 12px; text-align:left;”><ul><li>The correct answer is marked in
<b>bold</b></li><li>Your given answer is marked in <i>italics</i> (a red cross is added
next to it if it is incorrect)</li><li>If you provide the correct answer, it will be marked in
<b><i>bold italics</i></b> (a green checkmark is added next to it)</li></ul><br></span>’).
insertBefore(“#tl-test-completion-button”);
14
Before customization:
After customization:
15
18. Make the default pop-up “Add to LinkedIn”, so learners
don’t have to click “Share Certicate” to view this option - JS
Copy the code below in the JavaScript tab of your Theme.
if( $(‘#tl-course-completed-modal .tl-share-certicate’).length ){ $(“#tl-course-completed-
modal”).on(‘show’, function(){ $(‘#tl-course-completed-modal .tl-share-certicate’).click();});}
19. Hide the “Get this course” button on a course
from the Course Catalog - CSS
Copy the code below in the CSS tab of your Theme.
.tl-get-catalog-course{display:none;}
.tl-get-course{display:none;}
16
General portal customizations
20. Add a background image to your portal - CSS
.tl-body {
background-image:url(‘https://i.imgur.com/Nl1iUtX.jpg’) !important;
background-attchment:xed !important;
opacity:1;
}
.tl-unit-content {
background-color:#;
padding:5px;
opacity:0.95;
border-radius:6px
}
Before customization:
After customization:
Note: Make sure the image you want
to use is uploaded on a hosting site
or your server. Copy the code above
in the CSS tab of your Theme and
replace the highlighted link with the
link of your hosted image.
17
21. Customize the internal announcement - CSS
Copy the code below in the CSS tab of your Theme and change the colors as desired.
/* Customize the internal announcement */
#tl-internal-announcement {
background-color: #f3b0 !important;
border-color: #335c67 !important;
color: #540b0e !important;
font-size: 13pt;
}
/*Make the internal announcement non-dimissable*/
#tl-internal-announcement>a.close.hide-announcement,
#tl-internal-announcement .btn {
display: none !important;
}
22. Prevent all administrators to be able to login as another user - CSS
Copy the code below in the CSS tab of your Theme.
.tl-autologin-touser, a[onclick=”autoLoginUser()”]’{ display: none !important;}
23. Change the header so that that logo sits at the top
and the menu bar below - CSS
Copy the code below in the CSS tab of your Theme.
.navbar-inner:before {
background:url(“https://www.talentlms.com/wp-content/themes/talentlms2021/front-end/
src/assets/img/logo.svg”) no-repeat top;
height:89px;
background-color:#34b7eb;
width:100%;
background-size:contain !important;
}
.navbar-inner a.brand img{
display:none;
}
.navbar-inner{
background-color:#a500;
background-image:none;
}
18
Before customization:
After customization:
24. Expand Users or Courses list to 20 records (instead of 10) - JS
Copy the code below in the JavaScript tab of your Theme.
//expand users table to 20 records
$(function() {
if ($(‘#tl-users-grid,#tl-group-users,#tl-branch-users’).length) {
19
var mytable = $(‘#tl-users-grid,#tl-group-users,#tl-branch-users’).DataTable();
mytable.page.len(20).draw();
}
});
//expand courses table to 20 records
$(function() {
if ($(‘#tl-courses-grid,#tl-group-courses,#tl-branch-courses’).length) {
var mytable = $(‘#tl-courses-grid,#tl-group-courses,#tl-branch-courses’).DataTable();
mytable.page.len(20).draw();
}
});
25. Replace the group image - JS
To replace the group image you will rst need to have your image uploaded on a hosting site or your
server to use it. Copy the code below in the JavaScript tab of your Theme.
//Edit group image
$(“.tl-group-avatar”).attr(“src”,”https://example.com/image.jpg”);
Note: Users should expect that some of their custom rules will stop working correctly in the future, and
in extreme cases, this may cause issues with the user interface. TalentLMS is a work in progress and to
allow for continuous innovation, Epignosis cannot guarantee that the styled elements will not change.
20
www.talentlms.com