Frequently Requested CSS Code

We receive a large number of requests for items that can be customized through our custom CSS feature.  Below are some of the more frequently requested CSS codes that we have received.  

View the How do the CSS and HTML customizations work? article for more information on custom CSS.

Relabel "Start Course" and other Items

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

Note: Enter the code above into the HTML footer.

Note: Change "#btn_continue_course" to "#menutext_navbar-people" to change the text for "People" and to "menutext_navbar-team" to change the text for "Teams".

Hide "Start Course" (Tile View)

#btn_start_course
{
display:none !important;
}

Hide "Start Course" (Classic View)

#btn_continue_course{
visibility: hidden
}

Hide "Delete User" button

#btn_delete_person { 
visibility:hidden;
}

Hide PowerPoint bubbles

.carousel-indicators { 
visibility:hidden;
}

Hide Username Field on Login

.login-field { 
visibility:hidden;
}

Hide Password Field

.login-cbx { 
visibility:hidden;
}


Hide Login Button

.login-button 
{
visibility:hidden;
}

Hide Forgot Password Button

.login-forgot { visibility:hidden; }

Change the Large Green Buttons Color to Light Green

.btn-success { 
background-image: linear-gradient(to bottom, #96cd00 0%, #96cd00 100%) !important; 
border-color: #96cd00 !important;
}

Repeat Background Image

body{
background: url(http://www.litmos.com/wp-content/themes/litmos-lms/images/litmos-logo.png) top center repeat-xblack;
}

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

#panel_Popular_Categories{
visibility:hidden;
}

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 Message to Hide Welcome Message

.msg-toggle{
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)

.tiles-passmark
{
display:none !important;
}
.well-sm{
display: none !important;
}

#passmark-desc{
display:none;
}

Hide score and passmark (in Classic view only)

.classic-passmark
{
display:none !important;
}

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.

.table-user-information tr:nth-child(21), .table-user-information tr:nth-child(22) {
    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;
}

Append tabs to navigation in tile view

This code will placed in the custom footer

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

Change color of Navigation bar from within a Module

.navbar-header{
background-color: blue
}

Change color of Navigation bar text from within a Module

.topNavText{
color:black !important
}

Change color of Course title text from within a Module

.sideNavHeader{
color:Pink !important
}

Change color of Module title text in the Left Navigation within a Module

.sidebarText a {
color:orange !important
}

Change color of active module title text in Left Navigation within a Module

.activeModuleColor {
color: red !important
}

Change color of a Completed module title text in Left Navigation within a Module

.moduleIconComplete {
  background-color:red;   
}

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

Resize Your Logo 

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

}

Hide the Feedback Button

#module_Feedback {
display:none !important;
}

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.