# Open edX certificate template SASS

**URL:** <https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770>\
**Category:** Design\
**Created:** [April 5, 2020, 9:55pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770 "2020-04-05T21:55:38Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ejklock](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/ejklock/32/772_2.png) [@ejklock](https://discuss.openedx.org/u/ejklock)\
**Post date:** [April 5, 2020, 9:55pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/1 "2020-04-05T21:55:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![anjali](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/anjali/32/405_2.png) [@anjali](https://discuss.openedx.org/u/anjali)\
**Post date:** [April 6, 2020, 8:57am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/2 "2020-04-06T08:57:50Z")

</div>

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/**

---

<div class="post-metadata">

**Author:** ![111](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/111/32/2454_2.png) [@111](https://discuss.openedx.org/u/111)\
**Post date:** [April 6, 2020, 2:50pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/3 "2020-04-06T14:50:34Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\
**Post date:** [April 7, 2020, 1:25pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/4 "2020-04-07T13:25:23Z")

</div>

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](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/enable_certificates.html).
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:

```auto
<%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](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/1X/f56c24f31b56df606bdcd8d5356167fe32d8c29e.png)  
You’ll need the slug to reference the assets in the template. Like shown on the example below:

```auto
# 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](https://github.com/edx/edx-platform/blob/open-release/ironwood.2/lms/djangoapps/certificates/views/webview.py#L570).

---

<div class="post-metadata">

**Author:** ![anjali](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/anjali/32/405_2.png) [@anjali](https://discuss.openedx.org/u/anjali)\
**Post date:** [April 8, 2020, 5:23am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/5 "2020-04-08T05:23:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![111](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/111/32/2454_2.png) [@111](https://discuss.openedx.org/u/111)\
**Post date:** [April 8, 2020, 9:19am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/6 "2020-04-08T09:19:11Z")

</div>

> [@anjali](#):
>
> Have you set up the organization for the course and link the course with an organization from the admin panel?

how can i do that ???

---

<div class="post-metadata">

**Author:** ![anjali](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/anjali/32/405_2.png) [@anjali](https://discuss.openedx.org/u/anjali)\
**Post date:** [April 8, 2020, 11:06am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/7 "2020-04-08T11:06:35Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![antoviaque](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/antoviaque/32/32_2.png) [@antoviaque](https://discuss.openedx.org/u/antoviaque)\
**Post date:** [April 24, 2020, 7:27pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/8 "2020-04-24T19:27:47Z")

</div>

Split this topic on April 24, 2020, 7:27pm UTC

7 posts were split to a new topic: [Setting up custom certificates templates with Tutor](https://discuss.openedx.org/t/setting-up-custom-certificates-templates-with-tutor/1941)

---

<div class="post-metadata">

**Author:** ![nadiastef](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/nadiastef/32/1615_2.png) [@nadiastef](https://discuss.openedx.org/u/nadiastef)\
**Post date:** [September 23, 2020, 11:31am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/9 "2020-09-23T11:31:14Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/f/ffa6b155555911be3c3f09ab78fde23924fa19b4.png)

original

 ![image](https://us1.discourse-cdn.com/flex020/uploads/openedx/original/2X/9/9683f9518f613631a88381908c35978207886dee.png)

> [@Organization dedicated certificate template](https://discuss.openedx.org/t/organization-dedicated-certificate-template/1442):
>
> Hello all, Today I excited about that it is possible to have custom template for an specific organization. fantastic feature I’ve never seen until now. but it seems that it is not described enough in the documents to be used. I have a few questions about [this document](https://edx.readthedocs.io/projects/edx-installing-configuring-and-running/en/latest/configuration/enable_certificates.html#customize-certificate-templates-for-your-organization): Is there any example theme for an organization or a language? Where should I do my customization actions? for example I want to change the default font for a specific organization. where should I add my codes? where should I a…

Thank you in advance

---

<div class="post-metadata">

**Author:** ![giovannicimolin](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/giovannicimolin/32/159_2.png) [@giovannicimolin](https://discuss.openedx.org/u/giovannicimolin)\
**Post date:** [September 23, 2020, 6:19pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/10 "2020-09-23T18:19:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![guruprasad](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/guruprasad/32/303_2.png) [@guruprasad](https://discuss.openedx.org/u/guruprasad)\
**Post date:** [September 23, 2020, 6:27pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/11 "2020-09-23T18:27:45Z")

</div>

@nadiastef, the print options that are displayed in the default certificate template come from [here](https://github.com/edx/edx-platform/blob/open-release/juniper.master/themes/edx.org/lms/templates/certificates/_accomplishment-banner.html). You will be able to get the same options by using the relevant markup from that file in your custom certificate template.

---

<div class="post-metadata">

**Author:** ![nadiastef](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/nadiastef/32/1615_2.png) [@nadiastef](https://discuss.openedx.org/u/nadiastef)\
**Post date:** [September 30, 2020, 10:37am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/12 "2020-09-30T10:37:53Z")

</div>

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](https://discuss.openedx.org/uploads/short-url/45cnakXytS756K2IELwQAREKXim.txt) (7.4 KB)

---

<div class="post-metadata">

**Author:** ![nadiastef](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/nadiastef/32/1615_2.png) [@nadiastef](https://discuss.openedx.org/u/nadiastef)\
**Post date:** [October 1, 2020, 9:31am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/13 "2020-10-01T09:31:03Z")

</div>

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](https://github.com/edx/edx-platform/blob/master/lms/djangoapps/certificates/views/webview.py)

---

<div class="post-metadata">

**Author:** ![duc.quach](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/duc.quach/32/1702_2.png) [@duc.quach](https://discuss.openedx.org/u/duc.quach)\
**Post date:** [October 22, 2020, 9:50am UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/14 "2020-10-22T09:50:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Jimmy\_Wu](https://sea2.discourse-cdn.com/flex020/user_avatar/discuss.openedx.org/jimmy_wu/32/2487_2.png) [@Jimmy\_Wu](https://discuss.openedx.org/u/Jimmy_Wu)\
**Post date:** [June 11, 2021, 5:17pm UTC](https://discuss.openedx.org/t/open-edx-certificate-template-sass/1770/15 "2021-06-11T17:17:45Z")

</div>

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