SAP Litmos Support

Getting Started
Knowledgebase
Community

Articles in this section

See more

Frequently Requested Custom CSS and Custom JavaScript Code

Avatar
Josh Barton
  • Updated
Follow

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.

instance_customisation_pro.png

 

We built out a series of courses all about customizing your Litmos instance. Check out the Instance Customization Pro Learning Path in Litmos Dojo.

 

Increase Logo Size

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.

 

Relabel "News" widget titles

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;}

 

Repeating Background Image

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>

Related articles

Comments

0 comments

Article is closed for comments.