Skip to main content

My following HTML  tags changes once I save the template!-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    .certificate {
      max-width: 800px;
      margin: 20px auto;
      padding: 20px;
      border: 2px solid #3366ff;
      text-align: center;
    }

    h2, p {
      color: #3366ff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    th, td {
      border: 1px solid #ddd;
      padding: 10px;
    }

    th {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <div class="certificate">
    <h2>Associate Diploma in Pipefitting Program</h2>
    <p>Certificate of Unit Credit is awarded to <strong> firstname] ;lastname]</strong></p>
    <p>Who attended National Industrial Training Institute and was successful in the following units:</p>

    <table>
      <thead>
        <tr>
          <th>Course Code</th>
          <th>Subject</th>
          <th>Grade</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>AAT/L01/180</td>
          <td>Basic English Level - 1</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>AAT/L02/150</td>
          <td>Basic English Level - 2</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>AAT/L03/180</td>
          <td>Basic English Level - 3</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td></td>
          <td>End of Project – Theory</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>GAT01/30</td>
          <td>Basic Health & Safety</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>GAT02/60</td>
          <td>Measuring Systems</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>GAT03/120</td>
          <td>Hand & Power Tools</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>PAT01/90</td>
          <td>Piping system</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>GAT04/60</td>
          <td>Oxyacetylene</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>PAT02/60</td>
          <td>Non-Metallic Pipe</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>PAT03/60</td>
          <td>Threaded Pipe Spools</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td>PAT04/120</td>
          <td>Welded Pipe Spools</td>
          <td>Pass</td>
        </tr>
        <tr>
          <td></td>
          <td>End of Project – Practical</td>
          <td>Pass</td>
        </tr>
      </tbody>
    </table>

    <p>Certificate Number: gcourse_certificate_number]</p>
    <p>Validity: This certificate has an unlimited validity.</p>
    <p>Date: date_complete]</p>
  </div>

</body>
</html>

for Certificates, it’s worth noting that Docebo does not accept all types of HTML coding...did you build this out in another app and then drop it in Docebo? If yes, that is likely the issue. You would be better off working directly in the app. I found this to be a trial & error process so once we landed on a proper templet we try and re-use it. One tip Ito simplify things is to have a background image that has the maximum amount of text, lines images, etc so that you only need to bring in the minimum about of text using the tags. That may make it easier for you to set them up. They are very finicky.


Hi @Irnlab- Thanks for reaching out yet again promptly, wellI get your point, see the below codes I created on the Docebo cert app however the alignment between the table cannot be fixed, though the middle column - Subject is centrally aligned still its getting left aligned-

 

Can you check and help I just want the middle column to be in the center?

 

 

<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<h2 style="text-align: center;"><span style="color: #3366ff; font-size: 12pt;">gcourse_name]</span></h2>
<p style="text-align: center;"><span style="color: #3366ff; font-size: 10pt;">Certificate of Unit Credit is awarded to <strong>gfirstname] elastname]</strong></span></p>
<p style="text-align: center;"><span style="font-size: 10pt;">Who attended National Industrial Training Institute and was successful in the following units:</span></p>
<table style="margin-left: auto; margin-right: auto;">
<thead>
<tr>
<th style="text-align: right;">Course Code</th>
<th>Subject</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: right;">&nbsp;AAT/L01/180</td>
<td>Basic English Level - 1</td>
<td>Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp;AAT/L02/150</td>
<td>Basic English Level - 2</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp;AAT/L03/180</td>
<td>Basic English Level - 3</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp;</td>
<td>End of Project &ndash; Theory</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp;GAT01/30</td>
<td>Basic Health &amp; Safety</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp;GAT02/60</td>
<td>Measuring Systems</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; GAT03/120</td>
<td>Hand &amp; Power Tools</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp; PAT01/90</td>
<td>Piping system</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp;GAT04/60</td>
<td>Oxyacetylene</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp; PAT02/60</td>
<td>Non-Metallic Pipe</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; &nbsp; PAT03/60</td>
<td>Threaded Pipe Spools</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td style="text-align: right;">&nbsp; &nbsp; PAT04/120</td>
<td>Welded Pipe Spools</td>
<td style="text-align: left;">Pass</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>End of Project &ndash; Practical</td>
<td style="text-align: left;">Pass</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><span style="font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Certificate Number: rcourse_certificate_number]</span></p>
<p><span style="font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Validity: This certificate has an unlimited validity.</span></p>
<p><span style="font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Date: edate_complete]</span></p>
<p>&nbsp;</p>


think if you add the “centre” tags to the middle text it should work...seems like it’s inheriting the “right align” from the previous column.

 

<td style="text-align: right;">&nbsp;AAT/L01/180</td>
<td style="text-align: center;">Basic English Level - 1</td>
<td style="text-align: right;">Pass</td>

 

See if that works...


Yes I did this already and its working fine, however had to do it manually simple markups like <td><center>Welded Pipe Spools</center></td> are not getting updated in Docebo! Shall I raise an idea?


did you try with the full code I added above? One tip is to apply the alignment in the app and then change it from “right” to “center”...this way you know it’s the proper tag. I do that with notifications all the time...


ok, yes I applied your full code before with some research from OpenAI, do you suggest any simple HTML editor tool?


did that work for you? I dont use a tool..I usually just write it out with the help of this site: https://www.w3schools.com/html/default.asp


Reply