HI @TaiSaxty getting text to appear where you want it in certificates is quite the challenge...I have often opted to create a background image that has as much static text as you I can fit on it so I only need to place the dynamic field codes (like, first name, last name, course name and completion date) in the template thereby making it easier to perfect and test, etc. Many HTML codes either dont work or have no effect so your best bet is working with tables (also challenging cause they resize automatically) or just using your space bar and enter key to place the short codes where they appear best in you output - dont count on the placement on your screen to give you an indication of where the text will appear once you download a sample; it’s often incorrect.
Designing certificates with the current editor is...”challenging”. This is one of the ideas that needs upvoting:
and another:
One idea you can try in the meantime is to use an old-style HTML editor (NVU is one idea) that can display your background image while you do the layout over the top of the image with something like tables (yes...so 20th century!). Then you’ll need to tweak the code a bit with the Docebo built-in editor.
In our company we use different types of certificates for different types of courses, but here’s a generic ILT template we use (horizontal orientation):
<table style="width: 97.5852%; border-collapse: collapse; height: 446px;" border="0">
<tbody>
<tr style="height: 62px;">
<td style="width: 32.9072%; height: 62px;"> </td>
<td style="width: 9.70643%; height: 62px;"> </td>
<td style="width: 15.7197%; height: 62px;"> </td>
<td style="width: 8.33335%; height: 62px;"> </td>
<td style="width: 33.3333%; height: 62px;"> </td>
</tr>
<tr style="height: 40px;">
<td style="width: 100%; height: 40px; text-align: center;" colspan="5">
<p><strong><br /></strong><span style="font-size: 24pt;"><strong>Certificate of Completion</strong></span><br /><strong><br /></strong></p>
<p> </p>
</td>
</tr>
<tr style="height: 18px;">
<td style="width: 32.9072%; height: 18px;"> </td>
<td style="width: 33.7595%; text-align: center; height: 18px;" colspan="3"><span style="font-size: 12pt;">This certificate is awarded to</span></td>
<td style="width: 33.3333%; height: 18px;"> </td>
</tr>
<tr style="height: 46px;">
<td style="width: 100%; height: 46px;" colspan="5">
<p style="text-align: center;"> </p>
<p style="text-align: center;"><em><strong><br /></strong></em><span style="font-size: 36pt;"><em><strong>&firstname] tlastname]</strong></em></span><br /><em><strong><br /></strong></em></p>
<p> </p>
</td>
</tr>
<tr style="height: 18px;">
<td style="width: 32.9072%; height: 18px;"> </td>
<td style="width: 33.7595%; text-align: center; height: 18px;" colspan="3"><span style="font-size: 12pt;">in recognition of the successful completion of</span></td>
<td style="width: 33.3333%; height: 18px;"> </td>
</tr>
<tr style="height: 46px;">
<td style="width: 100%; text-align: center; height: 46px;" colspan="5">
<p><strong> </strong></p>
</td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px; text-align: center; width: 100%;" colspan="5">
<p><span style="font-size: 24pt;"><strong>&coursefield_16]</strong></span></p>
</td>
</tr>
<tr style="height: 24px;">
<td style="width: 32.9072%; height: 24px;"> </td>
<td style="width: 9.70643%; height: 24px;"> </td>
<td style="width: 15.7197%; height: 24px;"> </td>
<td style="width: 8.33335%; height: 24px;"> </td>
<td style="width: 33.3333%; height: 24px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px; width: 100%; text-align: center;" colspan="5"><span style="text-decoration: underline; font-size: 14pt;"><em><strong>IMPORTANT MANAGEMENT NAME</strong></em></span></td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px; width: 100%; text-align: center;" colspan="5"><span style="font-size: 12pt;">IMPORTANT MANAGEMENT TITLE</span></td>
</tr>
<tr style="height: 18px;">
<td style="height: 66px; width: 32.9072%;"> </td>
<td style="width: 9.70643%; height: 66px;"> </td>
<td style="width: 15.7197%; height: 66px;"> </td>
<td style="width: 8.33335%; height: 66px;"> </td>
<td style="width: 33.3333%; height: 66px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="height: 18px; width: 66.6667%;" colspan="5"> <span style="font-size: 10pt;">zcourse_credits] Continuing Education Units (CEUs)</span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 66.6667%; height: 18px;" colspan="5"> <span style="font-size: 10pt;">Course Dates: elt_session_date_begin format:"F j, Y"]rwebinar_session_start_date format:"F j, Y"] - tlt_session_date_end format:"F j, Y"]rwebinar_session_end_date format:"F j, Y"]</span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 100%; height: 18px;" colspan="5"> <span style="font-size: 10pt;">Course Location: olt_locations_addresses]<br /></span></td>
</tr>
<tr style="height: 18px;">
<td style="width: 32.9072%; height: 18px;"> </td>
<td style="width: 9.70643%; height: 18px;"> </td>
<td style="width: 15.7197%; height: 18px;"> </td>
<td style="width: 8.33335%; height: 18px;"> </td>
<td style="width: 33.3333%; height: 18px;"> </td>
</tr>
</tbody>
</table>
@elamast thanks for surfacing those ideas, definitely need some votes, going right now myself! I also like your approach, I take this approach for notifications and certs in the platform, it feels wrong, but the level of control it forces does help at least attain the vision in only a few edits.
I guess we are back to tables instead of divs.
I do know the problem with divs…some long titles impact the position and causes a date field with mine to shift.
What a balance…go old school to achieve what we want to see.
Thanks @elamast.
Literally bookmarked this thread. Thank you to those who have come before me!
Wanted to add a little more to existing answers (as per the way the tool works today):
- Working with tables, yes, emphasizing this, it was the only way I managed to place text where I wanted.
- There is a template shared in another post: Template for certificates of completion | Community (docebo.com)
- When aligning your table, it’s a challenge because somehow your content gets pushed a little bit, so you can’t use normal alignment like “center” or “max-width”. To overcome this, you must stretch your table to the full-size of the certificate/image, then you divide your table into columns in order to leave the space you need in the left and right sides. So one column to the right instead of right padding, one column to the left instead of left padding; for centered, you don’t know the padding. To do this, you need to do some calculation on pixels, or use percentages like the first answer in this post, some trial and error to overcome the extra pixels added by the tool, until you find your values.
- Test it also with very long learner or course names, to ensure proper distribution on two rows. When you download certificate template from the lens button, you get only shortcodes (which are short) so I suggest writing some extra text in the template when testing, until you’re satisfied, then delete it at the end and leave the clean shortcodes. The alternative is to assign the certificate on a real course and enroll a learner and issue it, however you’ll need to repeat these steps every time you modify the certificate template, because otherwise the tool seems to pull the initial certificate every time; in some cases, I needed to create a new certificate from scratch in order to force the learner to download the last version of the certificate template.
- Attached are two samples that I used to create my certificates. My challenges were: I had to avoid text in some areas due to the background picture, I had to increase default margins because the text was too close to the picture margin with very long names, which wasn’t brand compliant.
- The logo is almost useless, with limited HTML you can’t control it, so better to embed it in the picture directly.
