SAP Litmos Support

Getting Started
Knowledgebase
Community

Articles in this section

See more

Frequently Requested Custom CSS Code

Avatar
Josh Barton
  • Updated
Follow

We receive a large number of requests for items that can be customized in Litmos using our Theme > Custom CSS feature. 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.

 

Relabel "Start Course" and other Items

<script type="text/javascript">
    $(document).ready(function() {
        $("#desktop-course-btn button").text('Litmos Rules!');
    });
</script>

Note: Enter the code above into the Custom Javacript area.

Note: Change "#desktop-course-btn button" to "#menutext_navbar-people" to change the text for "People" and to "menutext_navbar-team" to change the text for "Teams".

Relabel "News" widget

Following code is for Admin view

<script type="text/javascript"> 
    $(document).ready(function() { 
        $("#dashNews .panel-body .litmos-small-header").text('Your desired text'); 
    }); 
</script>

Following 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 "Delete User" button

#btn_delete_person {visibility:hidden;}

Hide Username Field on Login

.login-field > #Username {visibility:hidden;}

Hide Password Field on Login

.login-field > #Password {visibility:hidden;}

Hide Login Button

.login-button {visibility:hidden;}

Hide Forgot Password Link on Login Page

.login-forgot {visibility:hidden;}

Repeat Background Image

body{background: url("https://www.litmos.com/wp-content/uploads/2017/12/Litmos-white-ret.png") top center repeat;}

Hide Recent Achievements from a course on learner side

#mainCol > div:nth-child(3) > div.col.col-sm-3 > div {display: none;}

Hide Recently Viewed from a course on learner side

#panel_Recently_Viewed {visibility:hidden;}

Hide Popular Categories from a Course on Learner Side

a#tabpopularlib.filterBtn{display: none;}

Hide Categories List From a Course on Learner Side

#categoriesList{visibility:hidden;}

Move Categories List Up

#categoriesList{
position: absolute;
top: 5px;
}

Hide Tickbox that Hides Welcome Message

#welcomeToggle{
visibility:hidden;
}

Hide People tab

#people_navitem {display:none;}

Hide Add a new person to this team down to Add a new team under this team

.team-actions {display: none !important;}

Hide Next Module button

#module_Next{display:none !important;}

Hide score and passmark (in Tile view only)

.text-info{display: none;}
#passmarkText{ display:none;}

Change the color of the Course Title

.course-title{color:#000}

Change the Background of the Login Page Only 

.loginBg{background-color:#96cd00 !important;}

Hide the "Download Calendar" Button After Registering for ILT Session

#btnDownloadCalendar{visibility:hidden;}

Change the text color of login stats on the Dashboard

#billingSummary{color: #96cd00}

Change the text color of Latest News

.list-group{color: #96cd00;}

Turn off ALL CAPS from Course Title

.course-title {text-transform: capitalize; }
.course-title {text-transform: none;}

Hide the tile footer in the tile screen

.tile-footer {visibility:hidden;}

Make edges of tiles rounded

.tile {
border: 2px solid;
border-radius: 30px;
height: 250px;
width: 100%;
overflow: hidden;
position: relative;
}
.tiles-course
{
 background-color:transparent;
 height:250px;
 width:250px;
 margin:5px;
 display:inline-block;
 text-align:left;
 vertical-align:middle;
 padding:0px;
-webkit-box-shadow: none;
 z-index:1;
 cursor: pointer;
}

Change the background color of the Tile Footer

.tile-footer{
width:250px; position:absolute;
bottom:0;
z-index:3;
background-color: #FFFFFF;
}

Hide fields in user profile

Example hides Skype and Twitter fields.

Skype:

div#skypeField {display: none;}
tr#skypeField {display: none;}

Twitter:

div#twitterField{display: none;}
tr#twitterField {display: none;}

Change the title color in module view

#module-name{color: #FFFFFF;}

Hide 'Send login emails' under a team

#right-column > div > div.side-panel.team-actions > div > ul > li:nth-child(1) > a {
display: none;
}

Add new custom tabs to the navigation bar

This code will placed in the custom footer

Vertical view:

<script type="text/javascript">
$(document).ready(function() {
$(".tilesNavbar").append('<a href="LINKTOSTORE.COM" target="_blank"><div class="tilesNav"><img src="IMAGESOURCELINK.COM" width="26px" height="26px"><span class="tilesNav-text">ENTER TEXT</span></div></a>')
});
</script>

Horizontal view:

<script type="text/javascript">
$(document).ready(function() {
$("#l_nav_menu").append('<li><a href="/user/messages"><span class="tab">Message Center</span></a></li>');
});
</script>

Hide the 'Learning Management System' by Litmos

.powered-by-litmos { display: none; }

Make embed content mobile responsive

.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 place the following:
<div class="iframecontainer"><iframe allowfullscreen="" class="iframevideo" frameborder="0" src="https://www.youtube.com/embed/EfsgfcU1Xyo"></iframe></div>

Change the color of the dashboard box

.dashboard_box{background-color: blue;}

Hide User Custom Field from Users

.removeCustomField1 {display:none;} 

Change background image of Ecommerce page

#ecommBody {background: url(www.YOURIMAGEURL.com);}

Change the color of the "complete" status box

.status-box > .label.label-success {background-color:red;}

Changing Text of the button 'Continue with Learning Path'

<script>$(document).ready(function() {
$('#lpc-tiles-space > ul > div > button').text("Continue to Curriculum");
$('#btn_unenroll_learningpath').text("Unenroll this learning path");
});</script>

Change the background of the Module Player

Color:

#wrapper {
background: red;
}

Image:

#wrapper {
background: url(yoururlhere.com);
}

Hide Profile Upload Button within User Profile

#mainCol > div > div > div > div.panel-body > div > div > div.pull-right > a:nth-child(3){display:none;}

Change the background and font color of the Course/Learning Path description

.bg-dark {
color: #fff;
background: blue;
}

Hide My Score percentage from assessments:

#modules > div > table > tbody > tr > td:nth-child(2) > a > div > small {
display:none
}

Hide Score (Passmark)

#results-score > div >p{
display:none
}

Resize Your Logo

.learner-logo {
width: 200px;
height: 65px;
}

Hide Your Logo 

 .navbar-brand { display:none;} 

Hide the Feedback Button

#module_Feedback {
display:none !important;
} 

CUpdate the Background Color on Learner's Dashboard for the Text: "All, In  Progress, Overdue, Not Started"

#dash_swipe > div
{
background-color: #f4d580;
}

Relabel Additional References Button (Learner view):

<script type="text/javascript">$(document).ready(function() {$("#courseadditionalref").text('Job Aids');});</script>

Relabel Additional References Button (Admin view):

<script type="text/javascript">$(document).ready(function() {$("#courseDocuments").text('Job Aids');});</script>

Hide Course Library in vertical layout view

#l_nav_course_library {display:none;}

Hiding course library in Horizontal Layout

#nav_library{display:none;}

Hiding Achievement in Horizontal Layout

#nav_achievements{display:none;}

Change the Color of the selected checkbox in a Checklist module

.checkbox input[type="checkbox"]:checked ~ label::after, .checkbox input[type="radio"]:checked ~ label::after
{ BACKGROUND-COLOR: red; }
.assessment-header {
background-color: blue!important;
}
.radio {
background-color: blue!important;
}


Sign Out of Litmos as Learner/Admin and redirect user to another URL (JavaScript)

<script type="text/javascript">
$( document ).ready(function() {
$('a[href$="/account/logout"]:first').click(function() {

$('a[href$="/account/logout"]:first').attr('href', '#user_dropdown > ul > li:nth-child(6) > a');
var url = "https://www.google.com";

$.get("/account/logout", function(data, status){
 $(location).attr('href',url);
 });
});
});
</script>

Hide Live Sessions Tab in Horizontal Layout

#nav_sessions{
display: none;
}

Hide "Exit Button" on Module Screen

#module_Exit > div
{
display: none;
}

Apply a background color to the user checklist question

#page-content-wrapper > div > div > div > form > p {
background-color: darkred !important;
}

Remove Progress bar of a learning path from the learner's view

#lpc-tiles-space > div:nth-child(1) > div > div.table_cell.v_top.hidden-xs > div {display: none;}

Change the text color of Learner dashboard

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
a {
    color: black;
}

Hide Edit my Profile Button

#editMyProfile { visibility:hidden; }

Redirect users from Home page to Course Library

<script>
if (top.location.pathname === '/home/dashboard')
 {
$(location).attr('href','/courses/library' );
}
</script>

Hide I want to sell this course optional setting under Course setting

#settingsForm > label { display: none;} #Course_EnableCart {display: none;}

Hide "Unregister from session" link from Learners viewing ILT Session details.
.ilt-page-list > .row:nth-child(1) > .col-md-3 > a {display:none;}

Add a Background image to the Metrics Banner

#metricsBanner

{
background-image: url("ENTER THE IMAGE URL HERE ")

}

Relabel "Correct" and "Incorrect" within the Marking process of Free Text assessments

<script>
$(document).ready(function(){
$("#correct-1411762034").text('Your desired text');
$("#incorrect-1411762034").text('Your desired text');
});

</script>

#navtip_livesession{
display: none;
}

Hide External learning link from Admin and Learner view

#viewExternalLearning {display:none;} - Hides the link from Learner view

#peopleTabs li:nth-child(3) {display:none;} - Hides the link from Admin view

Uncheck the "Send email/text notifications for messages"

<script type="text/javascript">
$(document).ready(function() {
 checkContainer();
});
function checkContainer () {
 if($('#SendEmail').is(':visible')){ //if the container is visible on the page
 $("#SendEmail").attr('checked', false); //Un-checks the checkbox using CSS ID
 } else {
 setTimeout(checkContainer, 50); //wait 50 ms, then try again
 }
}
</script>

Hide "Assign all" option from the Courses, Teams, and Learning Path section when assigning users to these sections. 

#assignAll_row {display: none;}

Changing the Color of Hamburger button on mobile browser

.navbar-toggle {color:#071e3c;}

Change the colors of the Activity Widget graph on the Dashboard

.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 Past Sessions label from the Calendar Widget

#calendarWidget > div > table > tbody > tr > td:nth-child(1) > span:nth-child(5) { display: none!important; }

Remove or Hide the Message on the Login Page

.info {
 display: none;
 color: #444;
 padding: 10px 0;
 line-height: 1.4em;
}

Note: The above code is used to Hide/Remove the Login Message only but not to modify and change it to a different message. 

Make logo image larger in the Title bar

.fd-shellbar__logo > img {
  height: 50px;
  max-height: 50px;
}
.fd-shellbar {
    max-height: 100px;
    height: 100px;
}

Related articles

Comments

0 comments

Article is closed for comments.