White background behind text when printing certificates

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 ??

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>

Here’s a link to a public cert if you want to check out the code:
https://edu.faqing.org/my_certificate/%e6%af%8d%e8%af%ad%e8%af%be%e5%a0%82-1/

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,

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://www.ads-software.com/support/topic/certificate-4/

Thank you ??

Thanks so much for the help @jnr4u2 and @nrherron. I’ll mark this issue as resolved. Have a great day!

g.

• This reply was modified 3 years, 10 months ago by chalresgcd.