Customizing Your Training Site with CSS and JavaScript

by Skilljar SSE Team
Follow

You can 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.

Contents

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 an example, see the Skilljar Academy image below), please reach out to your customer success manager (CSM), who can set this up for you or provide you with the code snippet. 

    7491228b-1a39-4a05-8c54-d13c8b13507e.png

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.

    Screen_Shot_2019-04-25_at_9.53.51_AM.png

What you can update with custom CSS


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:

 

Status / Text CSS Class
Get Started sj-ribbon-get-started
Registered sj-ribbon-registered
Complete sj-ribbon-complete
Passed sj-ribbon-passed
Failed sj-ribbon-failed

 

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: 

Screen_Shot_2021-08-10_at_4.18.14_PM.png

Add Buttons to Catalog Header

Screen_Shot_2018-06-26_at_9.25.16_AM.png

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)

Screen_Shot_2017-04-24_at_4.41.55_PM.png 

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> 

Customize the prerequisite message course link color

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

Customize the tooltip background color

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

Customize the tooltip border radius

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

Customize the tooltip text color

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

Hide tooltip arrow

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

Customize how Course & Lesson times are displayed

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

(This will remove the default parentheses on course and lesson times, make the time red, and add a dash between the lesson or course title and the time)

 

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 button and previous button on scorm lessons-->
<!-- Global Head Snippet -->
<style>
hide-button{
display: none !important;
}
</style>

<script>
$( document ).ready(function() {
if($("#scorm_content_frame").length){
$(".next-lesson-button").addClass('hide-button');
$('.prev-lesson-button').addClass('hide-button');
}
});
</script>
<!-- End hide next button 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:

Powered by Zendesk