Custom Certificate Template using HTML

We have a few other ways to customize the certificate template, for example

This article describes how to create a certificate template without requiring any outside resources (PDF or images), here are the steps

Step 1: Go to Site Admin->CMS and click on create new certificate, assign it a name ending with .html. For example it could be named certificate.html

Step 2: Add a HTML code with your specific design and variables you want to print (see the list of variables here). See the below example code. The variables and velocity script code are highlighted

<div style="width:800px; height:600px; padding:20px; text-align:center; border: 10px solid #787878">
<div style="width:750px; height:550px; padding:20px; text-align:center; border: 5px solid #787878">
       <span style="font-size:50px; font-weight:bold">Certificate of Completion</span>
       <span style="font-size:25px"><i>This is to certify that</i></span>
       <span style="font-size:30px"><b>$student.getFullName()</b></span><br/><br/>
       <span style="font-size:25px"><i>has completed the course</i></span> <br/><br/>
       <span style="font-size:30px">$course.getName()</span> <br/><br/>
       <span style="font-size:20px">with score of <b>$grade.getPoints()%</b></span> <br/><br/><br/><br/>
       <span style="font-size:25px"><i>dated</i></span><br>
      #set ($dt = $DateFormatter.getFormattedDate($grade.getAwardDate(), "MMMM dd, yyyy"))
      <span style="font-size:30px">$dt</span>


Step 3: Publish the certificate

Step 4: Edit any course in the editor, assign this certificate to the course from the properties tab.

Now open any course transcript and click on print certificate option to view how it appears. Here is the sample output for the above code.