Participant

Question

HTML for Certificate or Completion or other Certifcation

4 replies
1428 views
Translate

Hi,

I was wondering if anyon had an example of a certification that students can print when they pass a certification. I am told that they need to be created in HTLM. I have seen that all the assets need to be included in the zip file with the html. I haven't seen anything that shows what variables we can use from the LMS to generate things like the student name, certification name, certification date, renewal date, etc.

There was one post that listed the supported html and css information, but it was old an the links no longer work.

Thanks,

Cindy Monroe

A

Andrew Chemey

Participating Frequently

Cindy,

I realize you already have a solution, but we actually provide what I truly believe is a much more stellar solution. It's a Certificate of Completion Module you add to the end of any Course, Certification or Learning Path. Learners can't view their certificate until they have successfully completed the Course, Certification or LP. It's fully customizable and can include any data/variables that can be pulled from ALM (besides name, date of completion, score, it can also include any badges, images, skills, etc) or even external sources.

See the attached image of an example of what the users would see

You can reach out to us at support@envolvemedia.com for more information

-Andrew

Translate

C

Cindy MonroeAuthor

Participant

For anyone interested. Here is the code I created. It works with our background image.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technical Training Certificate of Completion</title>
<style type="text/css">
.container {
position: relative;
width: 1000px;
height: 753px;
}
.learnername
{
position: absolute;
top: 290px;
width: 100%;
text-align: center;
font-size:36px;
font-weight: bold;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.courseinfo
{
position: absolute;
top: 420px;
text-align: center;
font-size:24px;
font-weight: bold;
font-family:"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.certificateinfo
{
position: absolute;
top: 600px;
left: 50px;
text-align: left;
font-size:14px;
font-family:"Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-style: italic;
}

img {
width: 1000px;
height:753px;
}
</style>
</head>
<body>
<div class="container">
<img src="TechTrainingCert.png" alt="Certificate of Course Completion" width="1000px">
<div class="learnername" style="width: 1000px">
<span width="100%";>Sample User</span> </div>
<div class="courseinfo" style="width: 1000px">
<p>Sample Certification Name</p>
<p class="CourseInfo"><span>Certifying Organization</p></div>
<div class="certificateinfo">
<p> Issued: Date of Issue </br>
Certificate No: certnumber </p></div>
</div>
</body>
</html>

Translate

D

Debiprasad_Maharana

Adobe Employee

Hi @Cindy Monroe ,

Thank you for letting us know the old links are not working.

I have asked the respective team to restore the links asap.

https://community.adobe.com/t5/adobe-learning-manager-discussions/how-to-create-a-custom-html-certificate/td-p/10961768.

The missing files are attached to this note for your reference.

Please create a HTML design for your certificate and share it with us at learningmanagersupport@adobe.com.

Our team will convert that certificate and upload to your account.

If any variables that you need in the certificate can not be added, the team can let you know.

Regards,
Debiprasad Maharana
Adobe Inc.

Translate

Supported_HTML_properties.docx

Supported_CSS_properties.docx

C

Cindy MonroeAuthor

Participant

Thanks for the help. Now I just need to figure out what gets passed to the system to set the learner name, course name, issued date, expiration date, etc.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.