================================================================================
 Claromentis LMS - Custom Certificate Template
================================================================================

This folder is an example custom certificate. Copy it, edit it to your own
design, then ZIP the folder contents and upload it on:

    Admin > Courses (e-learning) > Certificate Template > Step 2 - Upload

The browser views and the PDF use different rendering engines. The PDF engine
may not support some modern CSS and may fall back to using the nearest available
font available on the host system. Tips for dealing with are included below.


--------------------------------------------------------------------------------
 1. PACKAGE STRUCTURE
--------------------------------------------------------------------------------

Zip the contents so the files sit at the root of the archive:

    certificate.html        (required - the certificate markup)
    css/style.css           (optional - your styles)
    images/...              (optional - logos, seals, backgrounds)
    fonts/...               (optional - see the font rule below)

Only the folders css/, images/ and fonts/ are served. Reference assets with
relative paths (e.g. src="images/logo.png", href="css/style.css"). Do not use
absolute URLs or links to external sites as they will not load.

Do not rely on <head> in your certificate.html. The system strips it and
re-inserts your css/style.css automatically. Put all styling in css/style.css.


--------------------------------------------------------------------------------
 2. PLACEHOLDERS (filled in automatically at render time)
--------------------------------------------------------------------------------

Add a name="..." attribute to an element and its text is replaced. Keep the
example text as a visual fallback.

    name="user-name"                 Learner's full name
    name="course-name"               Course title
    name="course-date-completed"     Completion date
    name="course-endorsed-by"        Course owner's name
    name="course_date_valid"         "Valid until" date (if the course expires)

These insert translated labels (leave the element text as-is):

    name="lms:certificate:completion"       "Certificate of Completion"
    name="lms:certificate:award_to"         "Awarded to"
    name="lms:certificate:completion_of"    "for completion of the following course"
    name="lms:certificate:completed_on"     "Completed on"
    name="lms:certificate:endorsed_by"      "Endorsed by"
    name="lms:certificate:valid_until"      "Valid until"


--------------------------------------------------------------------------------
 3. CSS RULES FOR PDF COMPATIBILITY  (important)
--------------------------------------------------------------------------------

The PDF renderer is not able to render everything a modern browser does.
To keep the browser and PDF looking similar, follow these rules.

  DO NOT USE                         USE INSTEAD
  ---------------------------------  ------------------------------------------
  display: flex                     display: table / table-cell, or float
  calc()                            fixed values, or absolute top/left/right/bottom
  CSS grid                          table layout
  position: sticky                  position: absolute / relative
  CSS variables (var(--x))          literal values
  @page { ... }                     ignored by the PDF - see the page-size note
  viewport units (vw / vh)          %, mm, px, pt

FONTS - do not assume a font is installed on the server:
  * "Georgia", "Arial", "Helvetica", "Times New Roman" etc. are NOT guaranteed
    on the server, so the PDF may fall back to a different (often sans-serif)
    font while your browser shows the intended one.

  * Use a nice-to-have first and a server font as the reliable fallback,
    e.g.
       font-family: Georgia, "Liberation Serif", "DejaVu Serif", serif;
  * If you must use a specific brand font, bundle it in fonts/ and load it with
    @font-face from css/style.css using url("../fonts/MyFont.ttf") - the path is
    relative to the stylesheet, so it needs the "../" to step out of css/.

    Prefer the list above as it needs no bundled files.

LAYOUT TIPS:
  * Centre content vertically with a table:
        .container   { display: table;  width: 100%; height: 210mm; }
        .content     { display: table-cell; vertical-align: middle;
                       text-align: center; }
  * Lay a row of items (e.g. two signatures + a seal) with a table:
        .footer      { display: table; width: 100%; table-layout: fixed; }
        .footer > *  { display: table-cell; width: 33.33%;
                       vertical-align: bottom; text-align: center; }
  * Size the outer element with width: 100% and height: 210mm so it fills the
    A4 landscape page exactly. Use box-sizing: border-box on bordered boxes.


--------------------------------------------------------------------------------
 4. PAGE SIZE
--------------------------------------------------------------------------------

The certificate PDF is generated full-bleed as A4 landscape (297mm x 210mm)
with no page margins, so size the outer box to the full sheet:

    .certificate-container {
        width: 100%;      /* fills the A4 landscape page width */
        height: 210mm;    /* fills the A4 landscape page height */
        box-sizing: border-box;
    }

box-sizing: border-box keeps the border inside the sheet; keep content inside
the border/padding.
