Skip to content

Instantly share code, notes, and snippets.

@GantMan

GantMan/custom.html

Created June 3, 2020 21:09
Show Gist options
  • Save GantMan/db9616c02673b5381bfc68fe92f6441c to your computer and use it in GitHub Desktop.
Save GantMan/db9616c02673b5381bfc68fe92f6441c to your computer and use it in GitHub Desktop.
Download ZIP
teachable custom certificate code
Raw
custom.html
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<style>
.cert, .cert * {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.certNum {
font-size: 10px;
}
</style>
</head>
<body>
<div class="cert" style="position: relative; left: 0; top: 0; width: 800px; height: 600px;">
<img src="https://s3.amazonaws.com/link/to/certificate/image.jp" style="width: 100%; height: 100%;">
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 100%;">
<h5 class="certNum" style="position: absolute; width: 100%; text-align: right; padding-right: 60px; top: 56px">Certificate No. {{ course.report_card.certificate_serial_number }}</h5>
<h1 style="position: absolute; width: 100%; text-align: center; top: 186px">{{ current_user.name }}</h1>
<h2 style="position: absolute; width: 100%; text-align: center; top: 270px">{{ course.name }}</h2>
<h4 style="position: absolute; width: 100%; text-align: left; padding-left: 210px; top: 389px">{{ course.report_card.certificate_issued_at | date: "%m-%d-%Y" }} </h4>
</div>
</div>
</body>
</html>
@terragnosis777
Copy link

terragnosis777 commented Jan 19, 2022 •
edited
Loading

Thanks for this. It helped me figure out how to use a background image. But for some reason the absolute positioning here is not working. I had to resolve the issue in the following way:

<div class="cert" style="width: 800px; height: 600px;">
  <img src="https://s3.amazonaws.com/link/to/certificate/image.jp" style="width: 100%; height: 100%;">
  <div style="margin-top:-800px; height: 100%; width: 100%;">

And then continue from there without bothering with the positioning.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment