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%;
}