cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
marzettamichael
New Member

Custom HTML/CSS Canvas Catalog Certificate Help

Jump to solution

I am trying to create a custom template for our catalog courses certificate. I am unfamiliar with HTML and CSS, however I already have the certificate designed. I need help figuring out how to create an HTML or CSS version of my certificate design and add :

  • student_name: The name of the student
  • catalog_name: The name of the school or institution
  • catalog_logo: The URL of your catalog logo. Usage: <img src="{{catalog_logo}}" />
  • award_name: The name of the certificate
  • completion_date: The date of completion

to the template. If anyone knows of tools I can use or help/ instruction I could follow I would really appreciate it. I'm not sure of what program to use or how or where to add the variables or any of that. Any and all help would be really appreciated. My employer really wants to use her custom design so the default options will not do. 

1 Solution
jsowalsk
Advocate

Hi Michael,

The best way is practice to be bluntly honest. Here is an example of our code that you can play around with:

<div align=center">

<div style="width:800px; height:600px; padding:20px; text-align:center; border: 10px double #000000; position: absolute; margin: -130px 0 0 -175px; left: 25%; top: 25%;">

<div style="width:750px; height:550px; padding:20px; text-align:center; border: 10px double #000000">

    <span style="font-size:50px; font-weight:bold">Certificate of Completion</span>

       <br><br>

    <span style="font-size:25px"><b>This is to certify that</b></span>

       <br><br>

      <img src="{{catalog_logo}}" /><p>

      <h1>{{catalog_name}}</h1>

   <h3>awards this</h3>

      <h2>{{award_name}}<h2>

      <h4>to</h4>

      <h2>{{student_name}}</h2>

      <h3>{{completion_date}}</h3>

</div>

</div>

</div>

Jessica

View solution in original post

0 Kudos
4 Replies
jsowalsk
Advocate

Hi Michael,

The best way is practice to be bluntly honest. Here is an example of our code that you can play around with:

<div align=center">

<div style="width:800px; height:600px; padding:20px; text-align:center; border: 10px double #000000; position: absolute; margin: -130px 0 0 -175px; left: 25%; top: 25%;">

<div style="width:750px; height:550px; padding:20px; text-align:center; border: 10px double #000000">

    <span style="font-size:50px; font-weight:bold">Certificate of Completion</span>

       <br><br>

    <span style="font-size:25px"><b>This is to certify that</b></span>

       <br><br>

      <img src="{{catalog_logo}}" /><p>

      <h1>{{catalog_name}}</h1>

   <h3>awards this</h3>

      <h2>{{award_name}}<h2>

      <h4>to</h4>

      <h2>{{student_name}}</h2>

      <h3>{{completion_date}}</h3>

</div>

</div>

</div>

Jessica

0 Kudos
greg_lawrence
New Member

Hi Michael

Adding to what Jessica has said, I would take the sample code and drop it into one of the free HTML editing programs out there. The ones I have used are Notepad++ and Visual Studio Code.

By creating your code in them, they will tell you when something is done incorrectly syntax like not closing an HTML tag off  So it's a great environment to learn coding as you go. There is also a bunch of free online HTML editor to create your code in too such as:https://html-online.com/editor

Cheers

Greg 

Or use Dreamweaver -- great advice Greg!

Chris_Hofer
Community Coach
Community Coach

Hello there,  @marzettamichael ...

I am reviewing some of the older questions here in the Canvas Community, and I stumbled upon your question.  I wanted to check in with you because I noticed that we have not heard back from you since you first posted your question on June 28, 2018.  I see that  @jsowalsk  and  @greg_lawrence  provided some feedback for you.  Have you had an opportunity to review those responses?  If so, did either of them help to answer your question?  Please feel free to click on the "Mark Correct" button next to Jessica's or Greg's reply if you feel that it has helped to answer your question.  Or, if you are still looking for some more help with your original question, please let us know that as well.

I'm not sure if this will be of help or relevant to the discussion, but have you looked at LTI integrations with Canvas?  My supervisor has recently asked me to check out Accredible.  Here is their official website: https://www.accredible.com/.  It might be worth looking into if you are wanting to create and distribute certificates to your end users.

For the time being, I am going to mark your question as "Assumed Answered" because we've not heard back from you and also because there hasn't been any new activity in this topic since July 3, 2019.  However, that won't prevent you or others from posting additional questions and/or comments below that are related to this topic.  I hope that's okay with you, Michael.  Looking forward to hearing back from you soon.