Code Snippet Explanation

This code snippet allows you to create a global site footer containing a company logo, company description, and configurable columns of link trees.

There is a CSS variable configuration at the top of the code snippet that allows you to control the footer background color, text color, and link hover color. There is a HTML configuration below the CSS snippet that allows you to set the company logo, company description, column title, link title, and destination URL. Please refer to the installation video below the code snippet for more instructions.

Installation Instructions

Step 1: Configure the CSS variables at the top of the code to control the styling of the footer.

Step 2: Edit the HTML link text, link destinations, and company logo/description.

Step 3: Navigate to your domain theme and add the entire footer code to the "Footer" text box on that page. This will load the footer globally on all page objects above the default Skilljar footer bar.

Snippet Code - Add to Global Code Snippet in Theme:

<!-- START Global Footer on Catalog Pages -->
<style>
/* below you will find a set of CSS variables you can edit to style the footer */
body {
  --footer-link-color: #464646; /* footer link text color */
  --footer-link-hover-color: #013366; /* footer link hovor color */
  --footer-background-color: #FFFFFF; /* footer background color */
}
</style>
<div class="footer-background-wrapper">
  <div class="footer-company-info-wrapper">
    <img class="footer-company-logo" alt="Company Logo" src="https://cc.sj-cdn.net/instructor/2azivv9d3m8vx-walkthrough/themes/aux6vwdbkla/header-logo.1601443370.svg">
    <p class="footer-company-text">Skilljar is the leading customer training platform for companies to accelerate product adoption and increase customer retention.</p>
  </div>
  <div class="footer-link-tree-wrapper">
    <div class="footer-link-column-wrapper">
        <a class="footer-header" href="">Header 1</a>
        <a class="footer-link" href="">Example Link</a>
        <a class="footer-link" href="">Example Link</a>
        <a class="footer-link" href="">Example Link</a>
        <a class="footer-link" href="">Example Link</a>
    </div>
    <div class="footer-link-column-wrapper">
      <a class="footer-header" href="">Header 2</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
    </div>
    <div class="footer-link-column-wrapper">
      <a class="footer-header" href="">Header 3</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
    </div>
    <div class="footer-link-column-wrapper">
      <a class="footer-header" href="">Header 4</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
      <a class="footer-link" href="">Example Link</a>
    </div>
  </div>
</div>
<style>
.footer-background-wrapper{
  display: flex;
  width: 100%;
  background-color: var(--footer-background-color);
  justify-content: center;
  padding: 40px 40px;
  flex-flow: wrap-reverse;
}  

.footer-company-info-wrapper {
    display: flex;
    flex-direction: column;
    padding: 30px 40px;
}

img.footer-company-logo{
    width: 150px;
    margin-bottom: 15px;
}

.footer-company-text {
    font-size: 15px;
    width: 340px;
    color: var(--footer-link-color); /* text color of footer logo text */
    line-height: 24px;
}

.footer-link-tree-wrapper {
    display: flex;
    gap: 40px 75px;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 30px 40px;
}

.footer-link-column-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-link-column-wrapper .footer-header {
    color: var(--footer-link-color);
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
}

.footer-link-column-wrapper .footer-link{
    font-size: 15px;
    color: var(--footer-link-color);
}

.footer-link-column-wrapper .footer-link:hover, .footer-link-column-wrapper .footer-header:hover{
    text-decoration: underline;
    color: var(--footer-link-hover-color);
}

.footer-link-tree-wrapper a:focus, .footer-company-logo:focus{
  box-shadow: 0 0 0 3px #50aedc;
}

.catalog-filters #ep-footer {
    margin-top: 0;
    margin-left: 0 !important;
}

/* mobile view styling */
@media only screen and (max-width: 880px){
  .footer-link-column-wrapper {
    width: 100%;
  }
}

/* add left padding to footer for widescreen view filter bar support */
@media only screen and (min-width: 875px) {
    .catalog-filters .footer-background-wrapper {
        padding-left:350px;
    }
}
</style>
<!-- END Global Footer on Catalog Pages -->