In some use cases, you may wish to customize data printed out by your OSCampus certificates. You can do this even if you don't know how to code.
In this document, I will show you how to change what data your OSCampus certificate displays without touching OSCampus core files. The technique you will use to do this is called "template overrides".
This is a three-step process:
- Customize the default certificate image.
- Create OSCampus certificate template override.
- Customize OSCampus certificate template override output.
Step #1. Customize the default certificate image
By default, OSCampus certificate image displays the following:
- Awarded to: the data that gets printed here is the student's name.
- for successfully completing the: the data that gets printed here is the course title.
- Class at: the data that gets printed here is the domain name of your site.
- Course instructor: the data that gets printed here is the course instructor name.
- Date: the data that gets printed here is the course completing date.
- Determine which data displayed by OSCampus default certificate image, you wish to get rid of or to customize.
- Edit the default certificate image accordingly using a graphics editing tool of your choice. You will find the image in /media/com_oscampus/images/default_certificate.jpg.
For example, take a look at the following certificate image:
You can see here that it significantly differs from the default certificate image.
- It doesn't display the blue "Completed" ribbon in the top left corner.
- It doesn't display the "1-st" seal.
- It doesn't display the "Certificate of Completion" heading.
- There is no "Awarded to" and "for successful completion" fields.
- The "Course instructor" has been replaced by the "Executive Director".
You can similarly change your own OSCampus certificate image.
Excellent! Let's assume that you have edited the certificate default image. Next, you will work with the files that pull the data displayed by the image from your Joomla site database.
Step #2. Create OSCampus certificate template override
The data that gets displayed by the OSCampus default certificate image resides in your Joomla site database. Your OSCampus has some files and folders that work to pull that data from the database.
Theoretically, to customize or get rid of some certificate data, for example, the domain name of your site, you can change those files directly. This is not a good practice, however.
Next time you update your OSCampus to a new release, those files will be replaced by the ones from the new release. This means that you will lose your changes.
To avoid such issue, Joomla allows you to create a copy of those certificate files and folders within your site template. Such copy is called "template override".
Since this copy is not a part of the core OSCampus, it won't be replaced by your next OSCampus update. Let's create this copy.
- In your Joomla administrator panel, go to Extensions > Templates > Templates:
- You will be taken to the Templates: Templates (Site) administrative page. Click on the [Your Template Name] Details and Files link. As you can see from the screenshot below, for this tutorial I selected Joomlashack ABC template. So, its link is Js_abc Details and Files accordingly:
- You will be taken to the Templates: Customize (Your Template Name). Click the Create Overrides tab:
- Under the Components column, click com_oscampus and then click certificate:
- You will see the "Override created ..." message on the light green background:
Good job! You just created your OSCampus certificate template override. You are now ready to customize its output.
Step #3. Customize OSCampus certificate template override output
You need to change only one file.
- In the left column of links, click html > com_oscampus > certificate > default.php:
- You will see the default.php file open. Starting from line 55, you will see the code that prints out to your OSCampus certificate:
- The student's name.
- The course title.
- The domain name of your site.
- The instructor name.
- The class completion date.
- To hide any of those five bits of data, simply put two forward slashes (//) in front of that code. This is how, for example, will the code with hidden student's name look:
// Student Name
// $pdf->SetXY(0, 2.24 + $adjust);
// $pdf->Write(1, $this->certificate->name, null, false, 'C');
You can do other tweaks such as changing font size, arond line 32. If you want to change the position of the data outputted in the certificate, change the values for
$pdf->SetXY() method (using XY coordinates approach) for the desired information such as student name or course title.