Skip to main content
Participant
December 18, 2023
Question

HTML for Certificate or Completion or other Certifcation

  • December 18, 2023
  • 3 replies
  • 1370 views

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

    3 replies

    Participating Frequently
    January 26, 2024

    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

    Participant
    January 16, 2024

    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>

     

    Adobe Employee
    December 18, 2023

    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.

    Participant
    December 19, 2023

    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.