Open Edx certificate template SASS

Hi

I’m trying to change the design of the certificate stylesheet in openx. I am the theme of my site and put _overrides.scss in the folder. Nothing changes after creating the theme

My themes folder has the following structure:

mytheme / lms / static / certificates / sass / _overrides.scss

What is the right folder to change the design of certificates on the OpenEdx instance?

Hi @ejklock
I have changed the certificate design using CSS and the path for the CSS file is:
mytheme/lms/static/css/certificate.css

Also, you can set up the customized certificate from the admin panel:
http://domainname/admin/certificates/

i have set up the customized certificate from the admin panel, but no changes appear in certificate

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.

    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.

4 Likes

Hi @111

Have you set up the organization for the course and link the course with an organization from the admin panel?

And using which version of open edx?

how can i do that ???

@111 Add the organization in admin panel on below link:

https:// <your-instance-url> /admin/organizations/

And link the course to that organization

Also you have to add one feature flag to lms.env.json

CUSTOM_CERTIFICATE_TEMPLATES_ENABLED: true

1 Like

7 posts were split to a new topic: Setting up custom certificates templates with Tutor