Hello Alex,
I think the root cause is a defect. I just tried to create a new certificate with a single word -TEST. I have attached the output result. It looks like there is way too much header space above the "Screenshot", so I think this should be fixed. Also, The "screenshot" is capturing a much bigger area than it needs to, and unfortunately the screenshot area is black. It would also be better if the screenshot border was equal on all sides and much thinner.
It looks like this functionality still requires development, but please let me know if there is a workaround so that I can deliver a quality product to my customers.
Thank you,
Andrew
Please note that we do not focused on the border left in the screenshot .While creating our prime focus was to have the certificate image as background and have a screenshot of that .
However the certificate borders can be adjusted by adjusting the content through css and matching the appropriate height width of the certificate.
Hello Alex,
I appreciate your help on this, but I'm still having trouble understanding how to make this work. Could you please tell me the CSS I need to use in the following script so that I can get a plain white certificate? Nothing I do seems to work. I was able to move the image down a little so that the bottom black border is missing, but I can't seem to do anything about the top and the sides.
Thanks,
Andrew
.bp-user .mfp-auto-cursor .mfp-content{max-width: 780px; !important;}
We checked your site and fixed the issue please check .
We just added the css :
#certificate{background:#FFF;}
To make the background of the certificate white and that fixed that issue .
Hello Alex,
We're almost there. when I attempt to print the certificat I get the following output.(attached) Can you tell me how I can get rid of the grey boarder lines and center the image? I have tried the following CSS code, but none of it is working:
#certificate{background: #FFFFFF; border-style: hidden; outline-color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;}
I know this has been a lot of work, but I think it will help others in the future.
Thanks,
Andrew
To center the certificate try adjusting width height of it and check for the print and the lines are not border the certificate is an image and is set at the center of the print page .
Thanks again for your help Alex. I tried adjusting the height and width with no success, so I have decided to go with a workaround.
For anyone who is reading this:
To get a white A4 size certificate, create the certificate in the main Visual area and add pictures if you want. I also installed a WYSIWYG plugin to help make the certificate look better. Use the View Post button at the top of the page to "fine tune" and determine the best look for your certificate.
Turn off "Enable Print & PDF" - My biggest mistake was trying to use this to print the certificate.
Certificate Width & Certificate Height fields don't do anything.
Add a Custom Class name. I used certificate_my
I used the following code in the Custom CSS field:
#certificate{background: #FFFFFF;}
.certificate_my .student_name{
position:absolute;
}
.certificate_my .student_date{
position:absolute;
}
.certificate_my .course_name{
position:absolute;
}
Here's the workaround for printing the certificate:
When the student views the certificate in their profile have them right click the certificate and choose Save Image As. The image will be saved as a *.jpg and can be saved anywhere on the local drive. If the student opens the image with Windows Image viewer they should be able to print it from there. (see example below)
Hopefully this helps spare others from the hours of frustration that I've had.
Thanks again for the CSS help Alex.
Andrew
Thanking you for sharing the solution elearncanada .
.