Site Tools

 
 
 

how_to_customize_certifications

Customizing Certifications

It is important to have a well designed appealing certificate. In this section, we will figure out how to draw lines, display pictures, set background image and insert fields within the certificate.

The example XML schema below specifies where elements of the certificate will appear. Next we will look at each of the elements and explain their properties.

<?xml version="1.0" encoding="utf-8" ?>
<certificates>
    <certificate>
        <organization text="eFront" font="Freeserif" weight="bold" size="60" color="#005b7f" x="120" y="13"></organization>
        <student font="Freeserif" weight="" size="35" color="#000000" x="5" y="95" align="center"></student>
        <course font="Freeserif" weight="" size="28" color="#000000" x="5" y="133" align="center"></course>
        <grade font="Freeserif" weight="bold" size="28" color="#000000" x="160" y="150" align="center"></grade>
        <date font="Freeserif" weight="" size="15" color="#575757" x="225" y="182"></date>
        <serial font="Freeserif" weight="" size="14" color="#575757" x="107" y="182"></serial>
        <logo file="default" x="14" y="14"></logo>
        <background file="medium.png"></background>
        <orientation name="landscape"></orientation>
        <creator name="eFront"></creator>
        <author name="eFront"></author>
        <subject name="Certificate for "></subject>
        <keywords name="This is a list of keywords"></keywords>
        <labels>
            <label text="NOT JUST ANOTHER ELEARNING COMPANY" font="Freeserif" size="20" color="#000000" x="80" y="41"></label>
            <label text="We Make e-Learning Special" font="Freeserif" weight="" size="18" color="#000000" x="110" y="51"></label>
            <label text="Certificate of Achievement" font="Freeserif" weight="" size="35" color="#000000" x="80" y="67"></label>
            <label text="This Certificate is Awarded to:" font="Freeserif" weight="" size="24" color="#000000" x="97" y="82"></label>
            <label text="For the successful completion of:" font="Freeserif" weight="" size="22" color="#000000" x="95" y="120"></label>
            <label text="With grade:" font="Freeserif" weight="" size="22" color="#000000" x="120" y="152"></label>
            <label text="Instructor" font="Freeserif" weight="" size="10" color="#000000" x="20" y="192"></label>
            <label text="Serial Number" font="Freeserif" weight="" size="10" color="#000000" x="110" y="192"></label>
            <label text="Date" font="Freeserif" weight="" size="10" color="#000000" x="200" y="192"></label>
        </labels>
        <lines>
            <line x1="5" y1="5" x2="292" y2="5" color="#005b7f" thickness="2" note="Top Thick"></line>
            <line x1="292" y1="5" x2="292" y2="204" color="#005b7f" thickness="2" note="Right Thick"></line>
            <line x1="5" y1="204" x2="292" y2="204" color="#005b7f" thickness="2" note="Bottom Thick"></line>
            <line x1="5" y1="5" x2="5" y2="204" color="#005b7f" thickness="2" note="Left Thick"></line>
            <line x1="7" y1="7" x2="290" y2="7" color="#005b7f" thickness=".25" note="Top Thin Border"></line>
            <line x1="290" y1="7" x2="290" y2="202" color="#005b7f" thickness=".25" note="Right Thin Border"></line>
            <line x1="7" y1="202" x2="290" y2="202" color="#005b7f" thickness=".25" note="Bottom Thin Border"></line>
            <line x1="7" y1="7" x2="7" y2="202" color="#005b7f" thickness=".25" note="Left Thin"></line>
            <line x1="17" y1="190" x2="97" y2="190" color="#000000" thickness=".25" note="Signature Line"></line>
            <line x1="107" y1="190" x2="187" y2="190" color="#000000" thickness=".25" note="Serial Line"></line>
            <line x1="197" y1="190" x2="277" y2="190" color="#000000" thickness=".25" note="Date Line"></line>
        </lines>
        <images>
            <image file="certificate.gif" x="238" y="14"></image>
            <image file="signature.gif" x="18" y="176"></image>
        </images>
    </certificate>
</certificates>
  • creator: is used to populate the creator for the PDF document header (it does not appear on the document).
  • author: is used to populate the author for the PDF document header (it does not appear on the document).
  • subject: is used to populate the subject for the PDF document header (it does not appear on the document).
  • keywords: is used to populate the list of keywords for the PDF document header (they do not appear on the document).
  • organization: is used to display the organization name on the certificate.
  • student: is used to display the name of the student on the certificate.
  • course: is used to display the name of the course on the certificate.
  • grade: is used to display the overall grade of the course on the certificate.
  • date: is used to display the date the certificate was issued.
  • description: is used to display the description of the course on the certificate
  • ceus: is used to display the ceus of the course on the certificate
  • trainer: is used to display the trainers of the course on the certificate
  • expire: is used to display the expiration date of the certificate on the certificate
  • print_date: is used to display the date the certificate is printed on the certificate
  • serial: is used to display the serial number of the certificate.
  • logo: is used to display the logo image on the certificate. You can either display the default logo of your eFront installation or an external image, by supplying its URL.
  • background: is used to display a background image on the certificate. The medium.png file corresponds to the background image of the Medium Decoration template. Also, the heavy.png file corresponds to the background image of the Heavy Decoration template. Apart from these background images you can display an external image, by supplying its URL. Image width should be equal to 840 pixels.
  • orientation: is used to define the page orientation.
  • label: a label is a line of text that will appear on the certificate. A label element must appear within the labels section. You can add any number of labels as needed.
  • line: a line is a graphical line that is drawn on the certificate. A line element must appear within the lines section. You can add any number of lines as needed.
  • image: an image is a graphic that will appear on the certificate. An image must appear within the images section. You can add any number of images as needed.

Properties for student, course, grade, date, serial and organization elements

Property
font Name of the font to use.
weight The font weight. Possible values: bold, italic, bold|italic. For normal font, leave the value empty.
size Size of the font to use.
color Hex value for text color (i.e: #000000 is black).
x X coordinate.
y Y coordinate.
align The text alignment. Possible values: center, left, right.
text Text to appear on the certificate. It applies only on the organization element.

Properties for creator, author, subject and keywords elements

Property
name The value that will appear in the PDF document header.

Properties for image, logo and background elements

Property
file Name of the image to use or the URL of an external image.
x X coordinate. It applies only on the image and logo elements.
y Y coordinate. It applies only on the image and logo elements.

Properties for orientation element

Property
name The page orientation. Possible values: landscape, portrait.

Properties for label elements

Property
text Text to appear on the certificate.
font Name of the font to use.
size Size of the font to use.
weight The font weight. Possible values: bold, italic, bold|italic. For normal font, leave the value empty.
color Hex value for text color (i.e: #000000 is black).
x X coordinate.
y Y coordinate.

Properties for line elements

Property
color Hex value for line color (i.e: #000000 is black).
note A note for user reference. It does not appear on the document.
thickness The line thickness (i.e: Thin: .25, Thick: 2).
x1 Starting X coordinate.
x2 Ending X coordinate.
y1 Starting Y coordinate.
y2 Ending Y coordinate.

Templates with two or more pages In case you would like to have a certificate with more than one page you should include each page within a <certificate> tag. You should include all the properties for creator, author, subject and keywords within your first <certificate> tag and you do not need to repeat them again in your second (or third…etc) <certificate> tag. For example

<?xml version="1.0" encoding="utf-8" ?>
<certificates>
    <certificate>
        content of page 1
    </certificate>
    <certificate>
        content of page 2    
    </certificate>
</certificates>

Adding custom images to certificate templates

To add new background images to your certificate template you should upload your image files into the following folder:

<efrontpro-installation-folder>/www/assets/images/certificate_logos/<your_image_file>

later, in your certificate template, you can type

<images>
   <image file="<your_image_file>" x="238" y="14"></image>
</images>

or if you have your background image somewhere online, put the url of your image.

Adding custom fonts to certificate templates

eFrontPro uses TCPDF, a FLOSS PHP class for generating PDF documents, to create certificates.

To add new fonts for your certificate template you should first add them to the TCPDF engine. In order to do this you can do it with two ways:

The first way is to use TCPDF's addTTFfont method and send as parameter a TTF (possibly another type too):

$font = $this->addTTFfont("filename.ttf");

then you can use the fontname when you need it like this:

$this->SetFont($font,'',10);

The second way is to “install” the new fonts in the TCPDF engine manually. In order to do so you can use the tcpdf_addfont.php script which is included in the TCPDF tools.

Go to

<efrontpro-installation-folder>/libraries/external/tcpdf6/fonts/

in order to install a custom font use the tcpdf_addfont.php script as in following example:

php tcpdf_addfont.php -i /home/prountzos/Downloads/FranklinGothicBookRegular.ttf

if everything works ok you would see in your results something like the following:

>>> Converting fonts for TCPDF:
*** Output dir set to /var/www/efrontpro/libraries/external/tcpdf6/fonts/
+++ OK   : /home/prountzos/Downloads/FranklinGothicBookRegular.ttf added as franklingothicbook
>>> Process successfully completed!

later you can use your newly installed fonts in your certificate as in the following example:

<student font="franklingothicbook" weight="" size="35" color="#000000" x="5" y="95" align="center"></student>