Custom Certificates with Printable Background images and Certificate Code validation

Last updated on by

Warning: Undefined array key "u" in /home/wplmsio/public_html/support/wp-content/plugins/wplms_plugin/includes/vibe-shortcodes/shortcodes.php on line 3189

Warning: Undefined array key "c" in /home/wplmsio/public_html/support/wp-content/plugins/wplms_plugin/includes/vibe-shortcodes/shortcodes.php on line 3190

In this tip we’ll learn how to create Custom certificates with printable background images.

There are some fixes for the Certificates, which would be available in 1.5.3.1 version of Vibe course module, after which the certificates templates would follow the process as shown in the video

STEP 1 : Preparing Certificate

1. Go to WP Admin -> LMS -> Certificate Templates -> Add New
2. Add some relevant shortcodes and content.

Paste the below code in the Text mode of the editor.

PHP Code:
<img class="alignright size-full wp-image-2017" src="http://i60.tinypic.com/2ewh637.jpg" alt="certificate" width="2480" height="2915" />
<h1 class="mycertificate_student_name" style="text-align: center;"><strong>[certificate_student_name]</strong></h1>
<p style="text-align: center;"><strong>For the successful completion of course</strong></p>
 
<h2 class="mycertificate_course" style="text-align: center;"><strong>[certificate_course]</strong></h2>
<p style="text-align: center;"><strong>with marks</strong></p>
<p class="mycertificate_student_marks" style="text-align: center;"><strong>[certificate_student_marks]</strong></p>
<p class="mycertificate_code" style="text-align: center;"><strong>[certificate_code]</strong></p>

Image used in the certificate : http://i60.tinypic.com/2ewh637.jpg

STEP 2: Customizing Certificate Look 

1. Since you may have certificates of different sizes, you’ll need to add custom css and shortcodes.

Custom Class : mycustomcertificate

The CSS used in the video demo:

Code:

.mycustomcertificate .mycertificate_student_name{
position:absolute;
text-align:center;
top:210px;
width:100%;
}

 .mycustomcertificate .mycertificate_student_name+p{
position:absolute;
text-align:center;
top:310px;
width:100%;
}

 .mycustomcertificate .mycertificate_course{
position:absolute;
text-align:center;
top:340px;
width:100%;
}

 .mycustomcertificate .mycertificate_course + p{
position:absolute;
text-align:center;
top:400px;
width:100%;
}

 .mycustomcertificate .mycertificate_student_marks{
position:absolute;
text-align:center;
top:430px;
width:100%;
}

 .mycustomcertificate .mycertificate_code{
position: absolute;
text-align: center;
top: 640px;
width: 100%;
}