We receive a large number of requests for elements that can be customized in SAP Litmos using the Theme > Custom Header Custom Footer, Custom CSS or Custom JavaScript features. Below are some of the more frequently requested customizations that we have received and the Custom CSS or JavaScript code required.
View the How do the CSS and HTML customizations work? article for more information on using Custom CSS.
- Increase Logo Size
- Relabel the "Start Course" button and other elements
- Relabel the "News" widget heading
- Hide the"Delete User" button for Admins
- Hide the "Username" field on Login page
- Hide the "Password" field on Login page
- Hide the "Login Button" on Login page
- Hide the "Forgot Password Link" on Login page
- Add a custom repeating Background Image
- Hide "Recent Achievements" from a course on Learner View
- Hide "Recently Viewed" in Content Library on Learner View
- Hide "Popular Categories" in Content Library on Learner View
- Hide "Categories List" in Content Library on Learner View
- Hide the "Always show the Welcome Message" tick box option on the Learner Dashboard Home Page
- Hide the "People" navigation link
- Hide "Add a new person to this team" down to Add a new team under this team
- Hide the "Next Module" button on the Content Module Player in Learner View
- Hide score and passmark (in Tile view only)
- Change the color of all Course Titles and Description text
- Hide the "Download Calendar" button After Registering for an ILT Session
- Change the text color of the Login Streak stats on the Learner Dashboard
- Change the text color of Latest News
- Hide the tile footer in the tile page
- Make edges of tiles Rounded
- Change the background color of the Tile Footer
- Hide the default Skype and Twitter user profile fields in My Profile & Settings
- Change the title color in module view
- Hide 'Send login emails' under a team
- Add a new Custom Navigation Link to the Navigation Menu
- Hide the 'Learning Management System powered by Litmos" link on the Login page
- Make Embedded Content mobile responsive
- Change the background color of the Metrics Banner on the Learner Dashboard
- Hide Legacy User Custom Field (Additional Information) from My Profile & Settings page
- Change background image of the Ecommerce page
- Change the color of the "Complete" status box
- Changing the default text of the 'Continue with Learning Path' button
- Change the background of the Content Module Player
- Hide the "Upload a profile picture" Button on My Profile & Settings page
- Change the background and font color of Course/Learning Path descriptions
- Hide "My Score" percentage on Assessments
- Hide "Score" (Passmark) on Assessments
- Resize Your Logo
- Hide Your Logo
- Hide the Feedback Button
- Relabel Additional References Button (Learner view)
- Relabel Additional References Button (Admin view)
- Hide Course Library in vertical layout view
- Hiding course library in Horizontal Layout
- Hiding Achievement in Horizontal Layout
- Change the Color of the selected checkbox in a User Checklist module
- Sign Out of Litmos as Learner/Admin and redirect user to another URL
- Hide the "Exit" button on the Content Module Player in Learner View
- Apply a background color to the user checklist question
- Remove Progress bar of a learning path from the Learner View
- Hide all the Edit (Pencil) Icons on the My Profile & Settings page
- Redirect users from the Learner Dashboard Home page to the Old Course Library page
- Hide the "I want to sell this course" option under Course settings
- Hide "Unregister from session" link from Learners viewing ILT Session details.
- Add a Background image to the Metrics Banner
- Relabel "Correct" and "Incorrect" within the Marking process of Free Text assessments
- Hide "Assign all" option from the Courses, Teams, and Learning Path section when assigning users to these sections
- Change the Color of the Hamburger menu icon when viewed on mobile web browser
- Change the colors of the Activity Widget graph on the Admin Dashboard
- Hide the "Past Sessions" label from the Calendar Widget
- Hide the login info text on the Login page
- Make uploaded logo image display larger in the Title bar
- Hide the "Messages" Icon
- Rise Content - Remove double scrollbar
- Skip to the Content Page on Learner View
![]() |
|
We built out a series of courses all about customizing your Litmos instance. Check out the Instance Customization Pro Learning Path in Litmos Dojo. |
The copy and paste this into your CSS to make the logo about 30% larger than out of the box setup.
.fd-shellbar__group.fd-shellbar__group--start {
height: 60px;
max-height:none;
}
.fd-shellbar__logo img, .fd-shellbar__logo svg {
height: 46px;
max-height:none;
}
.fd-shellbar {
height: 80px;
}
h1#pageTitle {
padding-top: 10px;
}
TIP: You can try adjusting the "46px" under '.fd-shellbar__logo img, .fd-shellbar__logo svg' to increase logo size, and adjust the "80px" height under '.fd-shellbar' which is the container it sit within. The 10px page title padding may need to also adjusted to keep it vertically centered in the toolbar.
Relabel "Start Course" button or other text elements
The following Custom JavaScript to change the default text for Litmos elements.
<script type="text/javascript">
$(document).ready(function() {
$("#desktop-course-btn button").text('Your Desired Text');
});
</script>
TIP: Change "#desktop-course-btn button" to "#menutext_navbar-people" to change the text for "People" navigation link and to "menutext_navbar-team" to change the text for "Teams" navigation link.
The following Custom JavaScript code is for Admin view:
<script type="text/javascript"> $(document).ready(function() { $("#dashNews .panel-body .litmos-small-header").text('Your desired text'); }); </script>
The following Custom JavaScript code is for Learner view:
<script type="text/javascript"> $(document).ready(function() { $('.litmos-small-header').each(function () { if ($(this).text() == 'News') { $(this).text('Your desired text');
} }); });
</script>
Hide the "Delete User" button for all Admins
Add the following Custom CSS code:
#btn_delete_person {visibility:hidden;}
Hide Username Field on Login page
Add the following Custom CSS code:
.login-field > #Username {visibility:hidden;}
Hide Password Field on Login page
Add the following Custom CSS code:
.login-field > #Password {visibility:hidden;}
Hide Login Button on the Login page
Add the following Custom CSS code:
.login-button {visibility:hidden;}
Hide Forgot Password Link on Login page
Add the following Custom CSS code:
.login-forgot {visibility:hidden;}
Add the following Custom CSS code:
body{background: url("ENTER THE DIRECT IMAGE FILE URL HERE") top center repeat;}
Note: The linked image needs to be hosted on a publicly accessible website.
Hide "Recent Achievements" from a course on Learner View
Add the following Custom CSS code:
#mainCol > div:nth-child(3) > div.col.col-sm-3 > div {display: none;}
Hide "Recently Viewed" in Content Library on Learner View
Add the following Custom CSS code:
#panel_Recently_Viewed {visibility:hidden;}
Hide "Popular Categories" in Content Library on Learner View
Add the following Custom CSS code:
a#tabpopularlib.filterBtn {display: none;}
Hide "Categories List" in Content Library on Learner View
Add the following Custom CSS code:
#categoriesList{visibility:hidden;}
Hide the "Always show this message on the Home page" tick box option on the Learner Dashboard Home page
Add the following Custom CSS code:
#welcomeToggle {visibility:hidden;}
Hide the "People" navigation link
Add the following Custom CSS code:
#people_navitem {display:none;}
Hide "Add a new person to this team" button on the Teams > Team Name > People page
a#addPersonToTeam {display: none;}
Hide the Score and Passmark (in Tile view only)
.text-info {display: none;}
#passmarkText { display:none;}
Change the color of all Course Titles and Description text
Add the following Custom CSS code:
.course-title {color:#000000;}
Note: change the color HEX value to your desired color HEX value
Hide the "Download Calendar" Button After Registering for ILT Session
#btnDownloadCalendar {visibility:hidden;}
Change the text color of the login streak stats on the Learner Dashboard
Add the following Custom CSS code:
#billingSummary{color: #96cd00}
Change the text color of Latest News
Add the following Custom CSS code:
.list-group{color: #96cd00;}
Hide the tile footer in the tile page
Add the following Custom CSS code:
.tile-footer {visibility:hidden;}
Make the edges of Tiles rounded
Add the following Custom CSS code:
.tile {
border: 2px solid;
border-radius: 30px;
}
Change the background color of the Tile Footer
Add the following Custom CSS code:
.tile-footer{
background-color: #FFFFFF;
}
Hide the default Skype and Twitter profile fields on the My Profile & Settings page
Add the following Custom CSS code:
Skype:
div#skypeField {display: none;}
tr#skypeField {display: none;}
Twitter:
div#twitterField {display: none;}
tr#twitterField {display: none;}
Change the Title color of the Module Name
Add the following Custom CSS code:
#module-name{color: #FFFFFF;}
Note: replace the color HEX value with your desired color HEX value
Hide the 'Send an email to this person with a link to login' option on the Add a New Person Page
Add the following Custom CSS code:
input#loginemail, label[for="loginemail"] {display: none;}
Add a new custom link to the Navigation bar
When using the Vertical Navigation Layout add the following JavaScript code to the Custom Footer
<script type="text/javascript">
$(document).ready(function() { $(".tilesNavbar").append('<a href="https://www.litmos.com" target="_blank"><div class="tilesNav"><img src="DIRECT IMAGE LINK URL HERE" width="26px" height="26px"><span class="tilesNav-text">Custom Link Text</span></div></a>') });
</script>
When using the Horizontal Navigation Layout add the following JavaScript code to the Custom Footer
<script type="text/javascript">
$(document).ready(function() { $("#l_nav_menu").append('<li><a href="https://www.litmos.com"><span class="tab">Custom Link Text</span></a></li>'); }); </script>
Note: You will need to change the values in bold to your desired custom link URL and custom link label text
Hide the "Learning Management System powered by Litmos" text on the Login page
Add the following Custom CSS code:
.powered-by-litmos {display: none;}
Make Embedded Content mobile responsive when displayed on mobile devices
Add the following Custom CSS code:
.iframecontainer { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.iframevideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
In the Embed Module include the following HTML code:
<div class="iframecontainer"><iframe allowfullscreen="" class="iframevideo" frameborder="0" src="https://www.youtube.com/embed/EfsgfcU1Xyo"></iframe></div>
Change the background color of the Metrics Banner on the Learner Dashboard
.progressbar-text, .dashboard_donut, .dashboard_donut_blue, .dashboard_donut_red, div#dashBox4 {
background-color: #575a67 !important;
}
Note: change the color HEX value to your desired color's HEX value
Hide Legacy User Custom Field (Additional Information) from My Profile & Settings page
Add the following Custom CSS code:
.removeCustomField1 {display:none;}
.removeCustomField2 {display:none;}
...
.removeCustomField10 {display:none;}
Note: Choose the relevant "removeCustomField" number (1-10) for the legacy user custom field that you want to hide.
Change the background image of the Ecommerce page
Add the following Custom CSS code:
#ecommBody {background-image: url(https://YOURIMAGEURL.jpg);}
Change the background color of the "Complete" status box
Add the following Custom CSS code:
.status-box > .label.label-success {background-color:red;}
Changing Text label of the 'Continue with Learning Path' button
Add the following Custom JavaScript code:
<script>$(document).ready(function() { $('#lpc-tiles-space > ul > div > button').text("Continue to Curriculum"); $('#btn_unenroll_learningpath').text("Unenroll from this Curriculum"); });
</script>
Change the background color or image of the Content Module Player in Learner View
For changing the background color add the following Custom CSS code:
#wrapper {background: red;}
For adding a background image add the following Custom CSS code:
#wrapper { background: url("ENTER THE DIRECT IMAGE FILE URL HERE");}
Note: The linked image must be hosted on a publicly accessible website
Hide the "Upload a Profile Picture" button within My Profile & Settings
Add the following Custom CSS code:
a#uploadProfilePic {display:none;}
Change the background and font color of the Course/Learning Path description:
Add the following Custom CSS code:
??
Hide "My Score" percentage on Assessments:
Add the following Custom CSS code:
#modules > div > table > tbody > tr > td:nth-child(2) > a > div > small {display:none;}
Hide the 'Score' (Passmark) on Assessments:
Add the following Custom CSS code:
#results-score > div > p {display:none;}
Hide the module player "Feedback" button in the Learner View
Add the following Custom CSS code:
#module_Feedback {display:none !important;}
Relabel Additional References Button (Learner View):
Add the following Custom JavaScript code:
<script type="text/javascript">
$(document).ready(function() {
$("#courseadditionalref").text('Job Aids');
});
</script>
Relabel the "Additional References" Button (Admin view):
Add the following Custom JavaScript code:
<script type="text/javascript">
$(document).ready(function() {
$("#courseDocuments").text('Job Aids');
});
</script>
Hide the "Content Library" navigation link in the Learner View
Add the following Custom CSS code:
#nav_library {display:none;}
Hide the "Achievements" navigation link in the Learner View
When using the Horizontal Navigation Layout add the following Custom CSS code:
#nav_achievements {display:none;}
When using the Vertical Navigation Layout add the following Custom CSS code:
#navtip_achievements {display:none;}
Change the background color of the selected checkbox in a User Checklist module
Add the following Custom CSS code:
.checkbox input[type="checkbox"]:checked ~ label::after, .checkbox input[type="radio"]:checked ~ label::after {background-color: red;}
Sign Out of Litmos as a Learner/Admin and redirect user to another URL
Add the following Custom JavaScript code:
<script type="text/javascript">
$(document).ready(function() {
$('a[href$="/account/logout"]:first').click(function() {
$('a[href$="/account/logout"]:first').attr('href', '#admin-signout-nav');
var url = "https://www.Litmos.com";
$.get("/account/logout", function(data, status){
$(location).attr('href',url);
});
});
});
</script>
Hide the "Exit" button on the Content Module Player in Learner View
Add the following Custom CSS code:
#module_Exit > div {display: none;}
Apply a background color to the User Checklist module Question
Add the following Custom CSS code:
??
Remove the Progress bar of a Learning Path from the Learner View
Add the following Custom CSS code:
#lpc-tiles-space > div:nth-child(1) > div > div.table_cell.v_top.hidden-xs > div {display: none;}
Hide all the Edit (Pencil) Icons on the My Profile & Settings page
Add the following Custom CSS code:
#profileTable a.edit-profile-details {display: none;}
Redirect users from the Dashboard Home page to the Old Course Library page
Add the following Custom JavaScript code:
<script type="text/javascript"> if (top.location.pathname === '/home/dashboard') { $(location).attr('href','/courses/library'); } </script>
Hide the "I want to sell this course" optional setting under Course setting
Add the following Custom CSS code:
#settingsForm > label {display: none;}
#Course_EnableCart {display: none;}
Hide the "Unregister from session" link from Learners viewing ILT Session details.
Add the following Custom CSS code:
.ilt-page-list > .row:nth-child(1) > .col-md-3 > a {display:none;}
Add a Background image to the Metrics Banner on the Learner Dashboard
Add the following Custom CSS code:
#metricsBanner {background-image: url("ENTER THE DIRECT IMAGE FILE URL HERE");}
Relabel "Correct" and "Incorrect" within the Marking process of Free Text Questions in Assessments
Add the following Custom JavaScript code:
<script type="text/javascript">
$(document).ready(function(){
$("#correct-1411762034").text('Your desired text');
$("#incorrect-1411762034").text('Your desired text');
});
</script>
Hide the "Live Session" Navigation Tip
Add the following Custom CSS code:
#navtip_livesession {display: none;}
Hide "Assign all " option from the Courses, Teams, and Learning Path section when Assigning Users to these sections.
Add the following Custom CSS code:
#assignAll_row {display: none;}
Change the color of the 'hamburger' menu icon in mobile web browser
Add the following Custom CSS code:
.navbar-toggle {color:#000000;}
Note: change the color HEX value to your desired color HEX value
Change the colors of the Activity Widget graph on the Admin Dashboard
Add the following Custom CSS code:
.highcharts-color-0 path.highcharts-color-0, .highcharts-color-0 .highcharts-point { fill: rgb(0, 0, 149); } .highcharts-color-0 .highcharts-area { fill: rgba(0, 0, 149, 0.7); } .highcharts-color-0 path.highcharts-graph { stroke: rgb(0, 0, 149); } .highcharts-color-1 path.highcharts-color-0, .highcharts-color-1 .highcharts-point { fill: rgb(0, 190, 152); } .highcharts-color-1 .highcharts-area { fill: rgba(0, 190, 152, 0.7); } .highcharts-color-1 path.highcharts-graph { stroke: rgb(0, 190, 152); } .highcharts-color-2 path.highcharts-color-0, .highcharts-color-2 .highcharts-point { fill: rgb(84, 189, 0); } .highcharts-color-2 .highcharts-area { fill: rgba(84, 189, 0, 0.7); } .highcharts-color-2 path.highcharts-graph { stroke: rgb(84, 189, 0); }
Hide the "Past Sessions" label from the Calendar Widget
Add the following Custom CSS code:
#calendarWidget > div > table > tbody > tr > td:nth-child(1) > span:nth-child(5) { display: none!important; }
Remove or Hide the Information Message on the Login page
Add the following Custom CSS code:
.info {
display: none;
}
Note: The above code is used to Hide/Remove the Login Message only not to modify and change it to a different message which can be done via Account > Messages & Settings > Login
Make the uploaded logo image display larger in the Title bar
Add the following Custom CSS code:
.fd-shellbar__logo > img { height: 50px; max-height: 50px;
}
TIP: Adjust the height and max-height (50px) values so that your logo displays properly and is not cut off.
Hide the "Messages" Icon for all users
Add the following Custom CSS code:
a.sap-icon--email {display: none;}
Rise Content - Remove double scrollbar
Add the following Custom CSS code:
#ext-gen1 {overflow-y: hidden;}
Skip to the Content Page on Learner View
<script type="text/javascript">
$(document).ready(function() {
$('a[href$="/home/library"]:first').click(function() {
$('a[href$="/home/library"]:first').attr('href', '#nav_library > ul > li:nth-child(6) > a');
var url = "/home/GlobalSearchLearnerResultPage?ContentType=3";
$(location).attr('href',url);
});
});
</script>
Comments
0 comments
Article is closed for comments.