Hi @yewzy
Sorry, you’re facing this issue.
The certificate appears fine when viewed in browser, but when the user clicks print, there are white backgrounds visible behind the text. More accurately, I should say that there is a white opaque background behind every object above the background image, as even margin-top produced the error.
Here’s a screenshot outlining the problem: https://imgur.com/a/zOAZONG
Did you use a page builder(Elementor, Divi, Beaver Builder, etc) to build this certificate or you used the LifterLMS Certificate builder?
On a separate matter, do you think it is possible to integrate mpdf (https://mpdf.github.io/) to generate pdf files for the certificates?
You can submit this as a feature request: https://lifterlms.com/feature-request/
And thirdly, is there a way to generate custom/random permalinks for user certificates?
I do not know of a way this can be achieved, unfortunately. You can hire a developer to see if there is a way this can be done.
Thank you 🙂
Thread Starter
yewzy
(@yewzy)
Hey Toyin, thanks for the prompt reply!
I used the LifterLMS Cert builder (HTML and in-line CSS) to build this. Below I embed the code:
<div class="spacer" style="height:220px;"></div>
<p style="text-align: center; "><span class="JsGRdQ">兹证明
SIJIL INI DIANUGERAHKAN KEPADA</span></p>
<h2 style="text-align: center; margin-top: 10px; margin-bottom: 10px; font-weight: 600; text-transform: uppercase;">{name_zh}
{first_name} {last_name}</h2>
<p style="text-align: center; margin-bottom: 10px;"><span class="JsGRdQ">参与
</span><span class="JsGRdQ">ATAS PENYERTAAN</span></p>
<h5 style="text-align: center;"><span class="JsGRdQ">中文母语课堂2021年4月份系列讲座</span></h5>
<h2 style="text-align: center; font-size: 25px;"><strong>童心的宇宙——儿童文学三讲</strong></h2>
<p style="text-align: center; line-height: 1.1em; margin-top: 6px;">KELAS BAHASA CINA SEBAGAI BAHASA IBUNDA
BAGI REMAJA DALAM TALIAN BULAN MAC 2021
<strong>TEMA: PENGENALAN KESUSASTERAAN KANAK-KANAK DAN REMAJA (6 JAM)</span></strong></p>
<div>
<p style="text-align: center; margin-bottom: 0; line-height: 1.4em;">织梦的童年 （4/4/2021）- 2小时
追风的青少年（11/4/2021）- 2小时
儿童文学与教育（18/4/2021）- 2小时</p>
</div>
<div class="cert-code"><b>证书编号</b> KOD SIJIL：{course_title}/{student_id}
<b>日期</b> TARIKH：{current_date}</div>
Thread Starter
yewzy
(@yewzy)
Hi @yewzy
Thank you so much for the link to the certificate!
Please add:
@media print {
body * {
background: transparent !important;
}
}
To your Appearance->Customize->Additional CSS settings. This will remove the white background that is covering your watermark!
Let us know if you have any further questions!
All the best,
Thread Starter
yewzy
(@yewzy)
That indeed solved the problem. Thank you, Natalie! It’ll be nice if this is included in the stylesheet by default.
On a related matter, I’m wondering if there are any caveats if I use a page builder to design my certificates?
Hi @yewzy
We do have some caveats about using a page builder to design certificates. You can check this thread out: https://wordpress.org/support/topic/certificate-4/
Thank you 🙂
Thread Starter
yewzy
(@yewzy)
Thanks so much for the help @jnr4u2 and @nrherron. I’ll mark this issue as resolved. Have a great day!
