Organization dedicated certificate template

Development Design
1

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:

  1. Is there any example theme for an organization or a language?
  2. 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 assign this to an organization. I found that there is a Certificate templates section in django admin. What should I fill the template field of the form? is it a path?
  3. Can I see the effects of my changes using Preview Certificate of studio?
2

@mahyard, in order to enable custom templates for certificates, you’ll need to set settings.FEATURES["CUSTOM_CERTIFICATE_TEMPLATES_ENABLED"] = True in your lms.env.json.

After that, if you have a custom theme enabled, you can override the certificate templates in your custom theme.

The base files are found in edx-platform/lms/templates/certificates. You can copy these into your custom theme, and make changes as necessary to fit your needs.

Yes, the Preview Certificate function will direct to the regular certificate view in the LMS and should show these changes if the custom theme and templates are configured correctly.

2 Likes
3

Thank you very much @joshm
After challenging this for a while I found that in addition to CUSTOM_CERTIFICATE_TEMPLATES_ENABLED I have to activate ORGANIZATIONS_APP and define an organization and assign it to my course from django admin.
After all I can put any html or mako template code in template field of my theme. also it is possible to copy and paste the content of lms/templates/certificates/valid.html there and it works.

putting the following line:

<div>${accomplishment_copy_username}</div>

in that field changes the certificate to an empty page which only contains the user’s username.

again thank you for your answer

1 Like
4

Hello @mahyard Can you please give me some help?
I’ve used admin in order to make a custom html certificate.
<%namespace name=‘static’ file=’/static_content.html’/>

${document_title} 
<%static:css group='style-certificates'/>
span { color: #15457b !important; } .cert-class { padding-top: 42px; overflow: hidden; position: relative; width: 100%; background: url(/static/indigo-itye-master/images/certificates/cert_background.jpg) no-repeat center center fixed; background-size: auto; background-size: auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

ΒΕΒΑΙΩΣΗ

επιτυχούς παρακολούθησης

Βεβαιώνεται ότι ο/η ${accomplishment_copy_username}

παρακολούθησε και ολοκλήρωσε με επιτυχία το μάθημα ${accomplishment_copy_course_name}. lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor 

 <span>
    (*) Η γνησιότητα της βεβαίωσης μπορεί να επαληθευτεί στο ………………………………..
  </span>
</p>

With the preview i can see as you described a blank page with only my content

image
image843×309 15.6 KB

but if i try to add also the signatures from

${accomplishment_copy_more_about}

        <div class="wrapper-metadata">
            <dl class="metadata accomplishment-recipient">
                <dt class="label sr-only">${_("Awarded to:")}</dt>
                <dd class="value copy copy-meta">
                    <span class="recipient-img">
                        <img class="src" src="/static/certificates/images/demo-user-profile.png" alt="Recipient Image">
                    </span>
                    <div class="recipient-details">
                        <h3 class="recipient-name">${accomplishment_copy_name}</h3>
                        <p class="recipient-username">${accomplishment_copy_username} @ ${platform_name}</p>
                    </div>
                </dd>
            </dl>
            <dl class="metadata accomplishment-id">
                <dt class="label copy copy-meta">${certificate_id_number_title}:</dt>
                <dd class="value copy copy-base">${certificate_id_number}</dd>
            </dl>
            <dl class="metadata accomplishment-date">
                <dt class="label copy copy-meta">${certificate_date_issued_title}</dt>
                <dd class="value copy copy-base">${certificate_date_issued}</dd>
            </dl>
        </div>
    </div>
</div>

i get an error, how can i add the signatures?

Thank you in advance

5

Sorry @nadiastef
It’s been 7 months past and I don’t remember details about this.
I tried to document all my experiences here for anyone who interest.
but I guess you have a syntax error. check this with the default template from lms/templates/certificates/valid.html.

also better to ask in a new post with any clues you can find between lms logged messages. don’t post long pieces of codes. you can paste them in a github gist and put the link in your post.

6

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)

1 Like
7

hi @nadiastef,

Sorry for mentioning at this topic, I found out that you’ve made some modifies to the certificate template and just wondering if you did some custom CSS styling as well ? Currently I’m trying to do the same but to no avail.

So far here’s my attempt on Certificate Custom to my custom theme (I chose to override directly in custom theme, not from Admin Django):

  • Override default HTML from lms/templates/certificates directory (This works)
  • Mirroring styling structure from lms/static/certificates/sass/main-ltr.scss => This still doesn’t work.

Running watchthemes detected file changes on main-ltr.scss but looking at the output in console, I cannot see any .css generated in lms/static/certificates/css.

So I’m just wondering if you can give me some tips on this ?

Thanks in advance,

Duc

1 Like
8

Hello @duc.quach, I believe that customizing your certification is better through django admin, because you can make diffrent certificate templates per course and it’s easier.
If you choose to edit your therme directly you should use comprehensive themig and ovveride your scsss. Read this https://dehamzah.com/comprehensive-theming-on-openedx
But it is much more easier to create a certificate template through admin and add your css.
Check the following instructions:
Open Edx certificate template SASS
Additionally here you can find a template that is tested and to edit as you want
custom_cert.txt (7.4 KB)
Then you should enable certificates for your course through studio
You can watch this video

Configuring Open edX Certificates in Studio | https://www.youtube.com/watch?v=IJvMjou8e64

To activate certificates

Studio: Settings -> Certificates -> fill in fields and upload signatures (Mode -> honor, “Active” should be ticked)

Studio: Settings -> Advanced Settings -> Certificates Display Behavior: early_with_info

Studio: Settings -> Advanced Settings -> Issue Open Badges: true

Admin panel: Organizations -> Add organization (fill in Name and Short Name, “Active” should be ticked)

Admin panel: Link course -> Add link course (fill in course ID, select Organization, “Active” should be ticked)

Admin panel: Certificate templates (fill in name, fill in template, select organization ID, fill in course key (ID), choose “honor” mode, tick "Active”, select “All languages”)

To automatically award certificate, in LMS: Instructor -> Certificates -> Student-generated certificate

Activating honor mode

Admin panel: Course modes -> Add course mode (fill in course ID, select “honor” mode, fill in display name, fill in “0” under Price, fill in “usd” under Currency, rest stays empty)
*** You can see the certificate for honor mode, not audit…but you can make a certificate template for audit too.

4 Likes