Code Snippet Explanation

This code snippet updates the look and feel of the course/path detail pages to a more modern feel.
It also converts the curriculum list on the course detail page into clickable lesson deep-links that auto-register you for the course.
Lastly, it hides the social media share buttons in the registration area.

Installation Instructions

Step 1: Navigate to the Code Snippets section of your domain Theme and paste the below code at the bottom of the Global Head Snippet. 

Snippet Code - Add to Global Head Snippet in Theme:

<!-- START Course/Path Detail Page Stylings -->
<style>
/* Add padding to the top of the details page */
.sj-page-detail #skilljar-content .top-row-white-v2 {
    padding: 40px 3%;
}
/* Course Registration area stylings */
.sj-page-detail .dp-summary-wrapper{
    border: none;
    padding: 40px;
}

/* course title stylings */
.sj-page-detail .dp-summary-wrapper>h1 {
    font-size: 36px !important;
    font-weight: 600 !important;
}

/* hide social media links */
.sj-page-detail .social-media-wrapper{
  display: none;
}

/* add more padding to lower section */
.sj-page-detail #dp-details {
    padding: 40px;
}

/* style the "about this course" section */
.sj-page-detail #dp-details .large-7.columns>h3{
  font-size: 32px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
}

/* style curriculum box */
.sj-page-detail #dp-details .hide-for-small .sj-curriculum-wrapper {
    border-radius: 4px;
    box-shadow: 0 0 12px 2px rgba(0,0,0,.15);
    padding: 24px;
}

/* style curriculum title */
.sj-page-detail #dp-details .sj-curriculum-wrapper>h3 {
    border-bottom: 1px solid #bbb;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 16px;
    text-align: center;
}

/* add margin to top of curriculum links */
.sj-page-detail .dp-curriculum {
    margin-top: 20px;
}

/* style curriculum link headers */
.sj-page-detail .dp-curriculum li.section{
    font-size: 18px !important;
    font-weight: bold;
}

/* style curriculum links */
.sj-page-detail .dp-curriculum>li{
    font-size: 16px;
}
</style>
<script>
/* This code converts the curriculum list into clickable lesson deep links */
document.addEventListener('DOMContentLoaded', function() {
  var curriculumItems = document.querySelectorAll('.dp-curriculum > li:not(.section)');
  curriculumItems.forEach(function(item) {
      var url = item.getAttribute('data-url') + '?reg=1';
      var wrapper = document.createElement('a');
      wrapper.setAttribute('href', url);
      while (item.firstChild) {
          wrapper.appendChild(item.firstChild);
      }
      item.appendChild(wrapper);
  });
});
</script>
<!-- END Course/Path Detail Page Stylings -->