Code Snippet Explanation

This code snippet allows you to modify the "paint job" of catalog tile objects (Course, Path, Page, Plan) globally. If no edits are made to the code, tiles will look exactly how they do in Template Themes.

There are in-line comments in the code that explain what each line of CSS changes when you modify it. Use these as guide lines and try not to add any additional lines of CSS outside of what is already there. 

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 Catalog Tile Stylings -->
<style>
/* General Tile Stylings */
#skilljar-content .coursebox-container {
  border: unset; /* tile border is off by default */
  border-radius: 4px; /* rounded tile edges. increase value for more round */
  box-shadow: 0 6px 12px 1px rgba(0,0,0,.1); /* shadow behind tiles */
  transition: transform .5s, box-shadow .2s; /* do not modify - for hover effect */
  border-bottom: 2px solid #FFFFFF; /* do not modify - for hover effect */
}

/* Hover effects for Tiles */
#skilljar-content .coursebox-container:hover {
  border-bottom: 2px solid #0067CD; /* color of bottom border - appears on hover */
  transform: translateY(-5px); /* do not modify */
  transition: .2s; /* do not modify */
}

/* Tile Title stylings */
#skilljar-content .coursebox-container .coursebox-text {
  font-size: 20px; /* font size for tile title */
  font-weight: bold; /* font weight for tile title */
}

/* Tile short description stylings */
#skilljar-content .coursebox-container .coursebox-text-description {
  font-size: 14px; /* font size for tile short description */
  font-weight: 300; /* font weight for tile short description */
}

#skilljar-content .sj-courseboxes-v2:not(.search) .coursebox-container .coursebox-callout {
  border-top: 1px solid #c9c9c9; /* color of line break above tile CTA */
}

/* remove legacy path tile stylings */
a.coursebox-container.sj-course-series:before, 
a.coursebox-container.sj-path:before,
a.coursebox-container.sj-course-series:after, 
a.coursebox-container.sj-path:after{
  content: unset;
}

/* Center align tiles */
#catalog-courses {
  justify-content: center; /* change 'center' to 'left' for left aligned tiles */
}
</style>
<!-- END Catalog Tile Stylings -->