How do I create a custom template for a certificate of completion for a Catalog course or program?

As a Catalog admin, you can create a custom certificate for a Catalog course or program. Certificates must be in HTML/CSS format and can be customized with some supported variables, such as "Congratulations, {{student_name}}!"

To customize a certificate, you can use the following supported variables in your template:

  • student_name: The name of the student
  • catalog_name: The name of the school or institution
  • catalog_logo: The URL of your catalog logo. Usage: <img src="{{catalog_logo}}" />
  • award_name: The name of the certificate
  • completion_date: The date of completion
  • expiration_date: The date the certificate expires
  • enrollment_date: The date of enrollment
  • credits: The credits, points, or CEUs awarded to the student.

Select Custom Template

Select Template

Follow the steps to add a certificate of completion for a Catalog course or program.

In the Template section, click the Custom HTML/CSS radio button.

Add Custom Template Details

Add Custom Template Details

To select the orientation for the template, click the Orientation drop-down menu [1].

To enter custom code, enter HTML/CSS code or paste a link to an external template file in the Custom HTML/CSS field [2].

Sample HTML/CSS for a Custom Certificate

<html>
  <body>
    <style>
      .container{
        border: 6px double black;
        height: 544px;
        box-sizing: border-box;
        padding: 100px 20px 0;
        font-family:san serif;
        text-align:center;
        font-weight:bold;
        font-size: 2em;
      }
      h1,h2,h3,h4,h5{margin:0 0 0.25em}
      body,html{padding:0;margin:0}
    </style>
    <div class="container">
     <img src="{{catalog_logo}}" /><p>
      <h1>{{catalog_name}}</h1><br>
      <h4>awards this</h4>
      <h2>{{award_name}}<h2>
      <h4>to</h4><br>
      <h3>{{student_name}}</h3>
      <h5>{{completion_date}}</h5>
    </div>
  </body>
</html>
Click to copy

Enter HTML/CSS code for a custom certificate.

Preview Certificate

Preview Certificate

To preview a certificate, click the Preview icon.

Save Certificate

Save Certificate

Click the Save button [1].

The successfully updated banner displays [2].

Note: Catalog will notify you if there are errors with your certificate. If there are any errors, correct them and then click the Save button again.