Open edX certificate template SASS

Development Design
4

Hi @ejklock,

Currently, there are 2 ways of customizing certificates in the platform (in the Ironwood release):

  1. Use the Django Admin and set the certificate and assets (recommended).
  2. Modify the platform certificate template and styles from your custom theme.

I’ll go into detail about how to set up a custom certificate using Django Admin panel of your instance. Follow these instructions:

  1. Make sure that certificates and the HTML views are enabled on your instance. You can follow the instructions here.
  2. Add a new Certificate Template with your custom template from https://<your-instance-url>/admin/certificates/certificatetemplate/. You can see a simple certificate example below:
<%namespace name='static' file='/static_content.html'/>

<!DOCTYPE html>
<html>
  <head>
    <title>${document_title}</title>

    <%static:css group='style-certificates'/>
    <link rel="stylesheet" href="${static.certificate_asset_url('certificate-styles')}">
  </head>

  <body class="some-class">
    <div class="cert-header">
      <img src="${static.certificate_asset_url('header')}" class="certificate-header"/>
    </div>
    
    <p class="some-other-class">
      <span>
        This is to certify that
      </span>
      <strong>
        ${accomplishment_copy_name | h}
      </strong>
      <span>
        completed the course
      </span>

      <span >
        ${accomplishment_copy_course_name}.
      </span>
    </p>
  </body>
</html>
  1. If you want to include any static assets, make sure to add them to the Certificate Assets page (https://<your-instance-url>/admin/certificates/certificatetemplateasset/) with a proper slug.
    cert-assets
    cert-assets1876×244 21.3 KB

    You’ll need the slug to reference the assets in the template. Like shown on the example below:
# Make sure that this is present on your template:
<%namespace name='static' file='/static_content.html'/>

# Reference a stylesheet 
<link rel="stylesheet" href="${static.certificate_asset_url('certificate-styles')}">

# Reference an image
<img src="${static.certificate_asset_url('header')}"/>
  1. Enable certificates for each course on https://<your-instance-url>/admin/certificates/certificategenerationcoursesetting/

The variables available in the certificate are not well documented, but you can find them by digging into the codebase starting here.

7 Likes