Certificate Issues

[pacworks]

I am having a tough time getting the certificate to do what I want. I have followed the tutorial video on Custom Printable Certificates, but I am not getting the desired results. The video uses portrait A4 size. However, I am wanting to display landscape A4 size. The certificate displays how I want it to when I go to the direct link here https://pacworks.com/certificates/course-completion-certificate/. However, when I try to view the certificate through an account, it looks like this: Also, I am not seeing an icon to print or save the certificate. I have tried enabling/disabling Course Certificate Image mode, but that doesn't seem to do anything. I have also tried assigning pixel values to the width and height field, but that didn't seem to help either. What would I need to do or what sizes do i need to use to get the certificate to display in a landscaped fashion with the text on the certificate when viewed from an account and how do I get the print icon to show up?

[pacworks]

This reply has been marked as private.

[H.K. Latiyan]

Hi... Thanks for sharing the screenshot, it helps in understanding the issue . From your screenshot its clear that the issue is with the certificate height, so please edit the certificate template and increase the certificate height. Also add the height and width of the certificate and make sure the show pdf setting is enabled, then only the buttons to print, download, pdf, etc will be shown in the certificate.

[pacworks]

I added width and height to the certificate template. That made the buttons appear, but nothing changed as far as how the certificate looks. If I click the PDF button, it only shows the background image without any of the text. If I enable Course Certificate Image Mode, It shows the text exactly like it does in the screenshot above and the image quality is drastically compromised. when you said "...please edit the certificate template and increase the certificate height." Did you mean here, or in the actual CSS? I changed it here, but there were no visual improvements.  

[H.K. Latiyan]

Hi... You had not added any custom css to adjust the height of the content, I have added the custom css for your certificate. Please check. For other certificate templates, please adjust your content height accordingly.

[pacworks]

That seems to have helped. I adjusted everything and now it looks good on screen, but I am having some issues with printing. It doesn't seem to want to print full-page landscape. I have adjusted my printer settings to print full-page in landscape mode. See screenshot below for how it is trying to print. I have adjusted the width and height in the template settings to match the pixel dimensions of A4 letterhead (Also tried U.S. Letter size) and I have tried adjusting the height in the CSS, but I cannot get the template to fill the rest of the page. If I adjust the height in the CSS, it doesn't keep proportionate width. If I set a width in the CSS to be proportionate with the height, the width is ignored. Either way, adjusting the height in CSS stretches the template, but doesn't increase the actual print area. Another issue I am having with printing is that the print quality looks terrible. If I disable Course Certificate Image Mode, the quality looks perfect, but it only prints the background image and none of the coded text.

[H.K. Latiyan]

Hi.. The certificate is printed by the browser, you can try to adjust the height and width of the certificate.

[pacworks]

This problem seems to happen in all browsers. Adjusting the print setting in the browser doesn't seem to help. Chrome doesn't give me an option for landscape mode. In other browsers the closest I can get is by adjusting the print scale to 150%, but even then it is not aligned in the center and that is way too complicated of a process for the average user to print a certificate. I have set the width to 3300px and the height to 2550px within the template, which are the exact pixel dimensions of U.S. Letter (decided to do U.S. Letter instead of A4). At this point, everything looks fine on screen, but prints out like the screenshot in my last post and print quality is terrible. So, I tried to change the CSS width and height like so: .mycertificate img {width: 3300px; height: 2550px;}. That messed up the way my certificate displayed on screen, but didn't improve the size or quality of print. I have played around with different combinations of width and height, both in the template settings and in CSS, with no results as to how the certificate is printing. Adjusting browser printer settings doesn't seem to help either. Also, it doesn't matter if I view the PDF in browser or download it and view it in Adobe Acrobat Pro, it always shows up in a portrait format instead of landscape, despite the landscape pixel dimensions. I can change the printer settings to print in landscape mode, but the certificate always seems to stay at portrait width instead of filling the page. It seems as though somewhere in the process of converting the certificate to PDF, it is trying to force it into a portrait view.

[H.K. Latiyan]

Hi... Wplms only prints the image, after that the wplms code is no more dependent  on the certificate. This is handled by the browser and the machine you are using. I am sorry but wplms doesn't handle this.

[Author]

Posts