Using custom CSS to style your training site

Follow

Now you can customize the appearance of your training site beyond the style options provided by adding custom CSS.

How to add custom CSS

  1. Navigate to the Theming section of the Skilljar Dashboard
  2. Scroll down to the "Code Snippets" section
  3. Input your custom code into the Global head snippet field
  4. Click "Save Details" 2017-08-24-14-11-zsj-theming-by-domain-2109-db.herokuapp.com.png

What you can update with custom CSS

  • Fonts
  • Colors
  • Almost anything!

Course Tile CSS Examples 

Hide all prices on course tiles

<style>
.storefront-price {
  display:none;
}
</style>

Hide the word "FREE" on course tiles when there isn't a price

<script>
$(document).ready(function() {
    $('.storefront-price span').each(function() {
        if ($(this).text() == "FREE") {
            $(this).text("")
        }
    })
});
</script>

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>

Hide Registered/Completed Ribbon

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

Change "Completed" Ribbon to "Finished"

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

Change "Registered" Ribbon "Enrolled" Word

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

Change Course Success Status message

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

Change Course Success Status Ribbon color

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

Catalog Page CSS Examples 

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

Screen_Shot_2018-06-26_at_9.18.31_AM.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>

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

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>

Detail Page CSS Examples 

Suppress price (or FREE) from course registration button

<style>
.purchase-button-price {
  display:none;
}
</style>

Suppress FREE from a course registration button, if there isn't a price

<script>
$(document).ready(function() {
    $('.purchase-button-price').each(function() {
      if ($(this).text().indexOf('FREE') >= 0) {
        $(this).text('');
      }
    })
});
</script>

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 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 or Replace 'Register' button text

<script>
jQuery(document).ready(function($) {
$(document.querySelectorAll('.sj-page-detail').length > 0){
$('.purchase-button-text').text('Start Now');
}
});
</script>

Customize or Replace 'Register' button text only on a specific domain

<style id="domain_specific_css" type="text/css">
</style>
<script>
var domain_css = "";
if (window.location.hostname == 'INSERT DOMAIN URL HERE') {
domain_css = ` .storefront-price span { display: none; } .storefront-price::before { content: 'Watch Now'; } .purchase-button span { display: none; } .purchase-button::before { content: 'Register'; }`;
}
var style = document.getElementById("domain_specific_css");
style.appendChild(document.createTextNode(domain_css));
</script>

Note that the training Domain URL will need to be inserted (marked above in bold), and the Register text (also marked above in bold) updated to whatever new text is preferred.

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

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>

 


Course Series CSS Examples

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>

 


Curriculum Page CSS Examples

Hide the Course Progress Bar on the Curriculum Page

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

 


Calendar CSS Examples

Hide the Timezone on the Calendar page

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

 

Have more questions? Submit a request

Comments

Powered by Zendesk