Customize your training site with CSS and JavaScript

Avatar
by Skilljar SSE Team
Follow

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

Many of the previous CSS workarounds to change language strings throughout your site can now be modified from the Languages Tab within the Theming section of the Skilljar Dashboard. Refer to the Customizing Text and Translations on the Languages Tab article for more information. 

How to add custom CSS

  1. Navigate to the Theming section of the Skilljar Dashboard and select the theme you would like to add custom CSS to. 
  2. Scroll down to the "Code Snippets" section and expand by clicking the plus sign 
  3. Input your custom code into the Global head snippet field
  4. Click "Save" or "Save and Continue Editing"

    Screen_Shot_2019-04-25_at_9.53.51_AM.png

What you can update with custom CSS

  • Fonts
  • Colors
  • Almost anything!

Course Tile CSS Examples

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 

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_2019-04-25_at_10.47.59_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>

Change the background color of the catalog

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

 

Powered by Zendesk