Download Certificate .pdf for LMS - Forum | JoomShaper
Staff replied Feature Requests Joomla 6 v6.2.0

Download Certificate .pdf for LMS

Asked by Ron G Coger 6 days ago Last activity 6 days ago

There really is no way to get a physical copy of the certificate that has been awarded in the LMS. I just now tried what was replied to my post about it by using the print dialog for save as pdf, but the entire certificate is blown apart, takes 2 pages and the logos are huge and when I tried saving it and opening the "Certificate of Completion" is broken apart and enlarged and all over the page rendering it not useable. If there was a download as pdf button that would help as it would be applied within your framework for the LMS certificates. I really hope this can be accomplished, I know my employees would like to be able to print them or download them so as a pdf, they would be able to do both.

Thank you in advance for your time.

1 reply

Ziaul Kabir Staff
6 days ago · edited

Hi Ron,

Thanks for reporting this, and sorry for the trouble. You were right: the certificate page had no print styles, so the logos printed huge and the layout split across two pages. The earlier print snippet we suggested also didn't cover the page size, the image sizes or the background colors, so it didn't give a clean result.

We've prepared a fuller print stylesheet. The certificate prints on one A4 landscape page, the site header, menu and footer are hidden, the blue background and border are kept, and the logo and student photo are scaled to fit.

What to do now

  1. If you added the earlier snippet to Custom CSS, remove it first.
  2. Paste the CSS below into Template Options → Custom Code → Custom CSS and save.
  3. Open the certificate, press Ctrl+P (Cmd+P on Mac) and choose Save as PDF. Chrome or Edge works best.
  4. If the blue background doesn't show, tick Background graphics in the print dialog.
@media print{
  @page{ size: A4 landscape; margin: 0; }
  html,body{ height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#fff !important; }
  body *{ visibility:hidden !important; }
  .splms.view-certificate, .splms.view-certificate *{ visibility:visible !important; }
  .splms.view-certificate{ position:absolute; top:0; left:0; width:297mm; margin:0; padding:0; }
  .splms.view-certificate .row{ margin:0; }
  .splms .certificate, .splms .certificate *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .splms .certificate{ box-sizing:border-box; width:297mm; height:209mm; margin:0; page-break-inside:avoid; break-inside:avoid; }
  .splms .certificate .wrapper{ box-sizing:border-box; height:193mm; margin:8mm; }
  .splms .certificate .left-part, .splms .certificate .right-part{ float:left; box-sizing:border-box; height:100%; }
  .splms .certificate .left-part{ width:66.6667%; padding:16mm 8mm 8mm 16mm; }
  .splms .certificate .right-part{ width:33.3333%; }
  .splms .certificate .left-part .header{ margin-bottom:10mm; padding-bottom:3mm; }
  .splms .certificate .left-part .header h3{ width:70%; margin-bottom:0; font-size:28pt; line-height:1.15; }
  .splms .certificate .left-part .header .certificate-image{ width:30%; float:right; }
  .splms .certificate img.student-img{ max-width:28mm; height:auto; }
  .splms .certificate .left-part p.info{ margin-bottom:12mm; font-size:15pt; }
  .splms .certificate .left-part .name, .splms .certificate .left-part .course-title{ font-size:13pt; }
  .splms .certificate .left-part p.course-title{ margin-bottom:10mm; }
  .splms .certificate .right-part .content{ box-sizing:border-box; height:calc(100% - 8mm); margin:4mm 12mm 4mm 0; padding:8mm 6mm 24mm; background-position:center top 4mm, center bottom 4mm; background-size:auto 12mm, auto 12mm; font-size:12pt; }
  .splms .certificate .right-part p.logo{ margin:12mm 0 8mm; }
  .splms .certificate .right-part p.logo img{ max-width:100%; max-height:28mm; width:auto; height:auto; }
  .splms .certificate .right-part p.course-type, .splms .certificate .right-part p.course-name{ font-size:12pt; }
  .splms .certificate .right-part p.course-type-name{ margin-bottom:8mm; }
  .splms .certificate .right-part p.link{ margin-top:8mm; }
}

This gives you a clean print and PDF copy for each employee's training record. Please let us know how it looks on your site, especially with long names or course titles.

I've also passed the "Download PDF" button to our team as a feature request, so a one-click download can be looked at.

Thanks for your patience and understanding.

Best regards,

Log in to reply.