How can I change the template of a Course certificate and the badge icon?

Hello, I would like to ask how can I change the template of a Course certificate and the badge icon?
I use tutor. I’ve found some guides, I’ve changed it but nothing happened at the end.

Thank you in advance

Badges-Certificates

Default images are supplied in Open edX for course completion badges.
Be sure to replace these default badge images with your organization’s own badge images before any badges are issued.
When the first badge is issued for a given course, badge images are uploaded to Badgr Server.
All badges issued in future for this course will use this uploaded original badge image, even if you subsequently change badge images in the Django Administration badge image configuration.
Access the Django Administration website for your instance of Open edX.
To do this, go to https://dev.mooc.edu.gr/admin.

  1. Select Site Administration > Badges > Course complete image configurations, and then define a course complete image configuration for each course mode on your platform for which you want to issue badges upon course completion.
    Examples of course modes are “professional” or “advanced” or “basic”.

For each course complete badge image configuration, set these parameters.
• Mode: The course mode for which the badge image should be used.
• Icon: The badge image to use for the specified course mode.

Important

Be sure to replace the default badge images with your organization’s own badge images before any badges are issued!!!

Optionally, you can define a badge image that will be used as the default badge image for any course modes that do not have an explicitly specified badge image.
To do so, in the course complete image configuration that references the image you want to use as a default, select the Default checkbox. After you save the configuration, this badge image is used for any course completion badge configurations that do not have a badge image explicitly specified.

Note
You can specify only one default badge image.
Save each configuration parameter and exit the Django Administration website.

  1. Create Course Event Badges for Your Open edX Instance

Open edX provides several customizable course event badges that can be awarded when any of the following events occur.
A learner enrolls in a certain number of courses.
A learner receives a completion certificate for a certain number of courses.
A learner receives a completion certificate for every course in a specified list of courses.
Before course event badges can be awarded, you must customize them with your parameters and badge images. To customize any of the course event badges, follow these steps. 

Access the Django Administration website for your instance of Open edX.
To do this, go to https://dev.mooc.edu.gr/admin.

2.1 Select Site Administration  Course Mode

Admin panel: Course modes -> Add course mode
fill in course ID: course-v1:dsfds+sfdds+dsd
select “honor” mode
fill in display name
fill in “0” under Price
fill in “usd” under Currency
rest stays empty

2.2 Select Site Administration > Badges > Badge Classes.
Add badge class (fill in slug from server, fill in display name, fill in course ID, fill in description, fill in criteria or link to course landing page, select “honor” mode, upload badge image)
Developer needs to award certificate to a test account (to get the slug from the server)
Also important for certificates: activating honor mode
To be done BEFORE anyone enrols on the cours
Add a badge class for each course event for which you want to issue badges.
Examples of course events might be enrolling in five courses, or completing three required courses.

For each badge class, set the following parameters.

Slug: A unique identifier that you choose to identify the badge class. This identifier can contain only numbers, lowercase letters, underscores, or hyphens. The slug, combined with the Issuing Component value, uniquely identifies a badge.

Issuing Component: Identifies the part of the platform that is issuing the badge. This identifier can contain only numbers, lowercase letters, underscores, or hyphens. For the three customizable course event badges that are included in the Open edX platform, the value for Issuing Component must be openedx__course (with two underscores). For course completion badges that are included in the Open edX platform, the issuing component value should be empty.

For new badge types that you create, specify an Issuing Component value that identifies the software component responsible for issuing the badge. For example, if badges are issued by the course management component, you might define Issuing Component as platform__course; if badges are issued based on activity in course discussions, you might define Issuing Component as platform__discussions.

Display name: The human readable badge name that is used when badges are shown to learners, for example, in the Accomplishments view of learners’ profiles.

Course ID: This value should be blank for course event type badges, as they are not associated with a single course.

Description: A description of this badge.

Criteria: A description of the criteria for awarding this badge.

Mode: The course mode for the course associated with this badge, if applicable.

Image: The badge image to use for this badge. Badge images should be square .png files less than 250KB in size.

An example of a badge class configuration might have the following values.
slug: enrolled_three
issuing_component: openedx__course
display_name: Enroll in Three Courses
description: Enrolled in three courses
criteria: A learner must enroll in three courses to receive this badge
image: triple_enrollment_badge_image.png

When you have finished defining the badge class, select Save.

  1. Next, you create a new course event badge configuration that defines all of the course event badges that you want to issue.
    Select Site Administration > Badges > Course event badges configurations > Add course event badges configuration.

Important

You can create more than one course event badge configuration, but you can only mark one configuration as Enabled. Only the most recently activated course event badge configuration is used.

Within the new course event badge configuration, set the following parameters.

Courses completed: Define badges to be awarded for completing a certain number of courses, or completion of specific courses. Define one badge per line. On each line, enter the number of courses that must be completed, followed by a comma and then the slug of the badge class to associate with this badge.

For example, to configure two badges, one that is awarded when a learner completes 3 courses, and another that is awarded when a learner completes 8 courses, you add two lines to the Courses completed field.

3,completed_three 8,completed_eight

where completed_three and completed_eight are badge slugs that you previously defined in badge classes.

Courses enrolled: Define badges to be awarded for enrolling in a certain number of courses, or enrolling in specific courses. Define one badge per line. On each line, enter the number of courses that must be enrolled in, followed by a comma and then the slug of the badge class to associate with this badge.

For example, to configure a badge that is awarded when a learner enrolls in 5 courses, you add this definition.

5,enrolled_five

where enrolled_five is a badge slug that you previously defined in a badge class.

Course groups: Define badges to be awarded for completing a list of specific courses. Define one badge per line. On each line, enter the slug of the badge class, a comma, then the list of course keys.

For example, to configure a badge that is awarded when a learner completes the 3 prerequisite courses in a series, you add this definition.

prereq_computerscience_badge_slug,course1_identifier,course2_identifier,course_3_identifier

where prereq_computerscience_badge_slug is a badge slug that you previously defined in a badge class, and course1_identifier, course2_identifier, and course3_identifier are the Course IDs for the three courses that must be completed for this badge.

When you have finished defining badges in the configuration, select Save.

To activate this configuration, select Enabled at the top of the configuration page.
Important
You can create more than one course event badge configuration, but you can only mark one configuration as Enabled. Only the most recently activated course event badge configuration is used.

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

  2. 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”)

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

  4. To activate certificates
    Px TeachUPTU4_Creative_EL
    https://studio.dev.mooc.edu.gr/course/course-v1:dsfds+sfdds+dsd
    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
    To automatically award certificate, in LMS: Instructor -> Certificates -> Student-generated certificate
    Configuring Open edX Certificates in Studio |
    https://www.youtube.com/watch?v=IJvMjou8e64

Hello @nadiastef and welcome to the community!

Using comprehensive theming you can change the design of the certificates. You can follow this guide for the comprehensive theming.

Hello @jramnai @regis
Thank you very much for your answer. I’ve used this tutorial for the comprehensive themig. I’ve successfully made changes to the indigo theme, to the main page, courses etc, but it doesn’t work for certificate. It cannot see my css overrides and it is still the same. This is my path
https://dev.mooc.edu.gr/


And except the certificate template, how can i change the badge image
Please help :slight_smile:

Thank you in advance

Hi @nadiastef,

The certificate page is separate from the rest of the front end pages, it has its own header and footer.

Generally, after enabling the comprehensive theming, create certficates folder inside your theme directory.

Like this: /edx/app/edxapp/edx-platform/themes/your-theme/lms/templates/certificates/

You will be having certificates templates folder here (in your base), you can copy the files from here to your themes certificates folder. Now change the content you want inside your theme directory. And to change the design you can include your certificate.css in the themes, too.

If you have created scss then compile the assets and see the changes.

2 Likes