Customizing Your Training Site with CSS and JavaScript

Customize the appearance of your training site beyond the template style options by adding custom cascading style sheet (CSS) code and JavaScript, giving your site a more personal touch. In this article, we'll walk you through how you can change the code and your site's look from within the theme section of your Skilljar dashboard.

If you don't have web development experience and would like an MVP theme to make your site look nice for your users - feel free to check out: MVP Site Customization Options.

Read more about Skilljar page types and their different elements at Customizing Your Training Site with CSS and Javascript: Element Targeting Overview.

• Note regarding language strings: Many of the previous CSS Solutions used to change language strings throughout your site can now be edited from the Languages Tab within the Themeing section of your Skilljar Dashboard. For more information, see Customizing Text and Translations on the Languages Tab. 
• Note regarding custom header links: If you would like to include custom header links to your global navigation bar (for example, see the Skilljar Developer Center navigation below), please reach out to our Customer Success team, who can set this up for you or provide you with the code snippet. 
  
  
  

What are CSS and JavaScript?

CSS is a markup/coding language, much like HTML, which is used for editing the presentation of web pages and documents. It provides you with the flexibility to improve elements of your site, such as the layout, colors, fonts, and accessibility. 

JavaScript is a similar coding language, but instead gives web pages interactive elements that engage a user, such as search bars and videos.  

How to add custom CSS

To add custom CSS to your training site, go to your Skilljar Dashboard and follow these steps:

1. Select the Theming drop-down on the left and then Themes to open the options page
2. Select the theme you would like to add custom CSS to open the options for that theme
3. Scroll down to the Code Snippets section and expand by selecting the plus sign 
4. Add your custom code into the Global head snippet field
5. Select Save to finish, or Save and Continue Editing.
   
   

What you can update with custom CSS

• Fonts
• Colors
• Image and button sizes
• Almost anything!

Course Tile

Hide title on course tiles

<style>
.coursebox-text {
  display:none;
}
</style> 

Show course short description on course tiles

<style>
 #catalog-courses a.coursebox-container.course .coursebox-text-description {
 display: block;
 }
</style>  

Change bottom margin on promo image

<style>
.coursebox-image {
  margin: 2px !important;
}
</style>

Hide promo image

<style>
.coursebox-image {
  display:none;
}
</style>

Tile Ribbons

On Catalog Pages, tile objects (including courses and paths) convey a student's state with the object via the Tile Ribbon. The Tile Ribbon looks like a small band of color with text across the top right of the tile. Available states and their corresponding CSS classes are as follows:

In all of the following customization examples, you may substitute any CSS Class in the example with one of the available classes from the preceding table.

Hide All Tile Ribbons

<style>
.sj-ribbon-wrapper {
  display:none;
}
</style>

Complete Ribbon - Change the word "Complete" to "Finished"

<style>
.sj-ribbon-wrapper .sj-ribbon-complete .sj-ribbon-text {
  display: none !important;
}
.sj-ribbon-wrapper .sj-ribbon-complete:after {
  content: 'Finished' !important;
}
</style>

Registered Ribbon - Change the word "Registered" to "Enrolled"

<style>
.sj-ribbon-wrapper .sj-ribbon-registered .sj-ribbon-text {
  display: none !important;
}
.sj-ribbon-wrapper .sj-ribbon-registered:after {
  content: 'Enrolled' !important;
}
</style>

Change Course Success Status message

<style>
.sj-ribbon-wrapper .sj-ribbon-passed .sj-ribbon-text {
  display: none !important;
}
.sj-ribbon-wrapper .sj-ribbon-passed:after {
  content: 'Passed' !important;
}
.sj-ribbon-wrapper .sj-ribbon-failed .sj-ribbon-text {
  display: none !important;
}
.sj-ribbon-wrapper .sj-ribbon-failed:after {
  content: 'Did not pass' !important;
}
</style>

Change Ribbon Color

<style>
.sj-ribbon-wrapper .sj-ribbon-passed {
  background: lime !important;
  border-color: lime !important;
}
.sj-ribbon-wrapper .sj-ribbon-failed {
  background: red !important;
}
</style>

Catalog Page 

1. Add HTML code to the Catalog Header by navigating to Domains and Publishing and clicking "Catalog Settings"

2. When adding HTML code to the Catalog Header, enter it directly into the Source code: 

Add Buttons to Catalog Header

Style the button using additional classes: `tiny` or `large`

<a class="button" href="#URL">Button Label</a>

Change the background color of the catalog

<style>
#main-container.storefront div#skilljar-content {
background-color: #FFFFFF;
}
</style>

Change the course tiles to center on the page

<style>
.sj-page-catalog #catalog-courses {
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center
}
</style>

Change the course tiles to center on the page (when users not sign in)

<style>
.sj-page-detail #catalog-courses {
 -webkit-box-pack:center;
 -ms-flex-pack:center;
 justify-content:center
}
</style>

Change the Catalog Header to fit the full width of the page

<style>
.storefront .top-row {
padding-top: 0;
}
.catalog-center-width.one-col-full {
width: 100%;
padding: 0;
}
.catalog-center-width .catalog-header {
padding-left: 0;
}
.catalog-header p img {
width:100%
}
</style>

Change the shape of the Student Profile Avatar

<style>
#header .header-dropdown-button img {
 border-radius: 20px;
}
</style> 

Add Banner with Links (2 parts below)

Add in Global Head Snippet:

<script>
  jQuery(document).ready(function($) {
    var nav = $('.sj-page-catalog #secondaryNav').detach();
    $('#skilljar-content').prepend(nav);
  });
</script>

<style>

  .top-row #secondaryNav {
    display: none;
  }

  #secondaryNav {
    text-align: center;
  }

  #secondaryNav .secondary-nav {
    background: #01508A;    
    width: 100%;
  }

  #secondaryNav .secondary-nav li {
    color: white;
    display: inline-block;
    padding: 5px 15px;
    transition: background 150ms ease;
  }

  #secondaryNav .secondary-nav li:hover {
    background: #013357;
  }

  #secondaryNav .secondary-nav li a {
    color: white;
    font-size: 13px;
    font-weight: 100;
  }
</style>

In Catalog Settings, add this to the Catalog Header HTML:

<div id="secondaryNav">
  <ul class="secondary-nav">
    <li><a href="http://domain.com/" target="_blank">Buy Classes</a></li>
    <li><a href="http://something.domain.com" target="_blank">Access Library</a></li>
    <li><a href="http://something.domain.com" target="_blank">Photography</a></li>
    <li><a href="http://something.domain.com" target="_blank">Pro Video</a></li>
  </ul>
</div>

Override "Categories" from Catalog tags/filter menu

<style>
    .sj-text-left-nav-categories span {
        display: none;
    }
    .sj-text-left-nav-categories:after {
        content: "New Text Here";
    }
</style>

Sign In & Sign Up Page 

Add a background image 

<style>
.sj-page-login #skilljar-content, .sj-page-signup #skilljar-content {
  background: transparent !important;
}
.sj-page-login #main-container, .sj-page-signup #main-container {
  background: url("Place the URL of your desired background image here");
  background-size: cover;
}
</style>

Auto-populate Custom Sign up Fields  

Note: This code is limited to the “domainCheck” object. If there is no email in the object, it will default to the 0th index on the picklist. To add more domains, use this format:

<email-domain> : <index-of-picklist>

<script type="text/javascript"> 
const domainCheck = {
'somepartnermeail.com' : 2,
'anotherpartneremail.com' : 2,
'internaldomainemail.com' : 1,
}

function updateDropdown (){

const emailField = document.getElementById("id_email").value.toLowerCase();
const domainValue = emailField.substring(emailField.indexOf('@') + 1);

if (domainCheck[domainValue]){ 
document.getElementById("id_custom_2nnaywxcnxscm").selectedIndex = domainCheck[domainValue];
}else{
document.getElementById("id_custom_2nnaywxcnxscm").selectedIndex = 0;}
}

document.onmousemove = updateDropdown;
</script>

<style>
.sj-text-id_custom_2nnaywxcnxsm {
display: none;
}

</style>

Course Detail Page

Suppress social media share buttons

<style> .social-media-wrapper { display:none; } </style>

Remove Google or Facebook login

<style>
.socialaccount_providers {display: none;}
</style> 

<style>
.alert-box.error.radius.top-row-message a {color: white;}
</style>

<style>
.tooltips .tooltips-content {
  background: darkslategray !important;
}
.tooltips .tooltips-content::before {
  border-left: 10px solid darkslategray !important;
}
</style>

<style>
.tooltips .tooltips-content {
  border-radius: 7px !important;
}
</style>

<style>
.tooltips .tooltips-content {
  color: darkgreen !important;
}
</style>

<style> .tooltips .tooltips-content::before { display: none !important; } </style>

<style>
.sj-course-time,
  .sj-lesson-time {
    color: #FF0000 !important;
    margin-left: 0px !important;
}

.sj-course-time::before, .sj-lesson-time::before {
  content: " - " !important;
}

.sj-course-time::after, .sj-lesson-time::after {
  content: "" !important;
}
</style>

Lesson Page

Suppress the instructor led training registration button

<style>
.register-button {
 display: none;
}
#vilt-sessions-container h4 {
 display: none;
}
</style>

Change "Details" header on lesson pages

<style>  
.sj-page-lesson .details-pane-button {
    width: 36px;
} 
.sj-page-lesson .details-pane-button-text {
    display: none;
}
.sj-page-lesson .details-pane-button:after {
    content: "learn more";
    display: block;
    margin-top: 4px;
}
</style>

Remove Vertical Scrolling from Text Lesson Container

<style>
#lesson-main {
    overflow: auto;
}
#lesson-main-content {
    overflow: inherit;
}
</style>

Collapse the Lesson Summary tab by default

<script>
 $('document').ready(function() {
     var lessonBody = document.getElementById("lesson-body");
     if(lessonBody != undefined){
         $("#lesson-body").removeClass("details-pane-open");
         $("#lesson-body").addClass("details-pane-closed");
         detailsPaneShowing = false;
     }
 });
</script>

Hide the Next button on SCORM lesson types

<!-- Start Hide next and previous button on scorm lessons --> 
<!-- Global Code Snippet --> 
    <script> 
    $( document ).ready(function() { 
     if($("#scorm_content_frame").length){ 
      $(".next-lesson-button").attr('style', 'display: none !important');  
      $('.prev-lesson-button').attr('style', 'display: none !important'); 
    } 
    }); 
    </script> 
<!-- Global Code Snippet -->
<!-- End Hide next and previous button on scorm lessons-->

Course Series

Override the "Back to Catalog" text in a Course Series

#backToCatalogLongText is the link on the top of the left navigation panel
#backToCatalogShortText is the shorter link in the header when the left nav is not visible on a series page.

<style>

#backToCatalogLongText {
  font-size: 0;
}
#backToCatalogLongText:after {
  content: 'new text';
}


#backToCatalogShortText {
  font-size: 0;
}
#backToCatalogShortText:after {
  content: 'new text';
}

</style>

Course Curriculum Page

Hide the Course Progress Bar on the Curriculum Page

<style>
.progress-bar {
    display: none !important;
}
</style>

Default Curriculum Page view to "About this course" tab (add to Global Code Snippet)

<script>
$('.sj-page-curriculum .section-container.tabs').children().first().removeClass('active')
$('.sj-page-curriculum .section-container.tabs').children().last().addClass('active')
</script>

Calendar

Hide the Timezone on the Calendar page

<style>
#calendar-view .fc-center .timezone {
    display: none;
}
</style>

FAQ

Does Skilljar support linking to external source code in an IDE or web hosted server?

Yes, Skilljar supports copy/pasting of the source code or linking externally to an IDE or publicly accessible server.

Skilljar doesn't care where the file is hosted as long as it links to proper CSS and JS files with proper access to the file. We do have customers linking out to external source code today and is a commonly supported use case to manage code structure and code changes.

Additional Resources to showcase the above method:

• For linking external JS:
  https://www.w3schools.com/tags/att_script_src.asp

• For linking external CSS:
  https://www.w3schools.com/css/css_howto.asp

• HTML theme templates and other developer resources
  https://developer.skilljar.com/