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 dashboard: dashboard.skilljar.com/themes
  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!

Catalog CSS Examples 

Hide prices

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

Hide title

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

Show Course Short Description

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

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://thinktaplearn.com/" target="_blalnk">Buy Classes</a></li>
    <li><a href="http://fusion.thinktaplearn.com" target="_blalnk">Access Library</a></li>
    <li><a href="http://photo.thinktaplearn.com" target="_blalnk">Photography</a></li>
    <li><a href="http://video.thinktaplearn.com" target="_blalnk">Pro Video</a></li>
  </ul>
</div>

Detail Page CSS Examples 

Suppress price (or FREE) from course registration button

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

Suppress social media share buttons

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

Remove Google or Facebook login

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

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>

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>

 

 
Have more questions? Submit a request

Comments

Powered by Zendesk