Open edX certificate template SASS

Development Design
1

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?

2

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/

3

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

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
5

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?

6

how can i do that ???

7

@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
8

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

9

Hello @giovannicimolin @anjali Thank you for the guides. They were really helpful, although I’ve got one more question regarding the cerificates. I followed the 2nd way @giovannicimolin described using admin panel in order to create a custom certificate

And i’ve got an empty cert with my html on preview certificate, but i also want to have the print options etc that have the original, how can i do that.

My cert

image
image1628×886 232 KB

original

image
image1903×1005 50.2 KB

Thank you in advance

2 Likes
10

Hey @nadiastef!

I don’t have enough time allocated to reply you in the upcoming weeks, hopefully someone else in the community can help you out with.

11

@nadiastef, the print options that are displayed in the default certificate template come from here. You will be able to get the same options by using the relevant markup from that file in your custom certificate template.

12

Hello again,

Thank you all for your help.

I want to share a custom certificate template for anyone that might need it.It was tested
custom_cert.txt (7.4 KB)

2 Likes
13

Additionally if you want to show on your certificate the full name of your student and not the username
use ${accomplishment_copy_name}

Here you can find more https://github.com/edx/edx-platform/blob/master/lms/djangoapps/certificates/views/webview.py

14

Hi @giovannicimolin ,

I was using 2nd way of certificate customization by mirroring lms/static/certificates/sass/main-ltr.scss file structure ( I was on Ironwood version ). However, it seems like the CSS output file was not generated.

When I’ve modified the *.scss, I can see watchthemes detected file changed on main-ltr.scss, but looking closely on the output, I cannot see main-ltr.css as it should be. This doesn’t happen with other *.scss files in lms/static/sass folder.

Can you help to clarify this ?

Thanks in advance,

Duc

15

Is this still accurate for Koa? The Django admin/certificates/certificatetemplate/ path doesn’t seem to exist anymore?