Certificate

@thecontemporaryteacher,

First off unfortunately due to the way our certificates are generated while you can build a certificate with Elementor (or any other page builder) it doesn’t quite work when a student actually earns the certificate. This is something we’re working on fixing in a future version of LifterLMS but haven’t exactly figured out how to best handle. We’re in the midst of rebuilding our entire certificate builder and hope that our improved builder will result in our users not even wanting to use page builders but it’ll at worst get us to a point where we can easily add page builder functionality. We’re a bit off from releasing this yet but we’re working on it.

As far as the certificate background sizing when not using a page builder, it’s kind of complicated (and this is, again, something we’re working on tackling in our new builder). But really the issue is (most likely) that you’re theme is too narrow for the width of the certificate.

We have been driving ourselves and our users mad for years trying to find the perfect balance of custom CSS to make sure our certs just work on every theme but not every theme is created equal and we find new conflicts with new themes all the times.

They’re hard to preemptively resolve. We’re a small team. We can’t test against EVERY THEME preemptively!

What theme are you using? If it’s a free theme I’ll take a look at it and see if I can recreate this issue and give you some CSS to adjust this for certificates.

Best,

I totally understand. It’s cutting it off on the bottom but like I can keep scrolling down the webpage and see the bottom footer, etc. Hopefully seeing my theme will help. I am using the Kale theme. https://www.lyrathemes.com/kale/ & am hoping to make it look something like this…https://thecontemporaryclassroom.org/certificate/makerspace-course-certificate-of-completion/ (but obviously not the blurry outside border…that’s the border I uploaded. I’d be fine with that except it’s cut off & blurry…)

I truly appreciate any help! Thank you!!

Hi @thecontemporaryteacher,

I’m so sorry for the delayed response!

We were able to download the theme, but I can’t see the certificate through the link you sent. Can you take a picture of it and link the picture through a service like dropbox or google drive for us?

If you could also give us the dimensions we can look into recreating the issue in hopes of solving it!

Thanks and take care,

Of course. Here is a link to the picture. I included 2 because I couldn’t make it all fit in one.
https://www.dropbox.com/s/v7qjzc7gr19n9u3/Screen%20Shot%202019-05-09%20at%208.06.54%20PM.png?dl=0

https://www.dropbox.com/s/1swu5ffnk7p5f4f/Screen%20Shot%202019-05-09%20at%208.07.05%20PM.png?dl=0

Where can I find the dimensions? The dimensions of the picture or of the site? I’m confused about that part.
Just let me know. Thank you!

Hi @thecontemporaryteacher,

I tested the theme your using with a test site certificate and am still not able to recreate the issue.

Do you have custom CSS or a page builder that you are also using on this theme?

The picture dimensions can be found when you “upload” a new picture or go to your WordPress media library and select the image. On the right hand side it should list the height and width.

Is there maybe a margin setting when editing in elementor that is pushing the print and save buttons off the screen? If you create a new test certificate without using elementor using the same background image do you encounter the same issue?

You may need to use custom CSS to ultimately correct the certificate size. We have documentation here: https://lifterlms.com/docs/add-custom-css-using-wordpress-customizer/ and here for this https://lifterlms.com/docs/css-structure/

Let us know if any of the troubleshooting suggestions worked!

Thanks and take care,

I am using elementor with this theme.
The dimensions for this photo is…1500 X 1125 pixels. I’ve also tried uploading smaller versions. But that didn’t seem to help.
When I do the certificate on “page template” I choose “default” because when I chose elementor nothing showed up. With “default” then it shows up…just blurry.

I’ve added this custom/additional css….
navbar-collapse .caret {
display: none;
}
.single-post .main-column.col-md-9 {
padding-right: 150px;
padding-left: 90px;
}
.home .entry-page .entry-title {
display: none;
}
.page .entry-title {
display: none;
}
.elementor-page .sidebar.sidebar-column.col-md-3 {
display: none;
}
.single-lesson .entry-title {
display: none;
}

I apologize for not sharing the custom CSS that I’ve added. I didn’t realize that would cause any issue. Now that you see the custom CSS that’s been added…do you have any ideas? Ideas of how to fix or an idea of custom CSS I should add to make the certificate fit?

I truly appreciate any help you have!! Thank you so much for taking the time to help me!!

Hi @thecontemporaryteacher,

Thank you for sharing the custom CSS! I don’t see any conflicts when adding this to the test theme on our local site, though the padding might be affecting the certificate with other settings on the theme set up you have.

That said, it might actually be a better idea to have it be the Elementor fullwidth page template!

This will allow you to edit the certificate completely in Elementor. So you should then be able to add the certificate background image within Elementor, and save it within that template which could solve the split page issue! Which then would hide the blurry/split page issue of the default template.

Have you tried this?

Let us know if you have further questions!

Thanks and take care,

Hi there!

Thank you for those suggestions & all of your help! Does the first name, last name, date shortcuts work with elementor if the information is coming from lifterlms? Like if I design the whole thing within elementor & use those shortcodes in the design, will it use the shortcodes just like if I created the certificate using the wordpress editor? Also, is it possible to add the “save” & “print” buttons to the elementor version?

Just let me know!
Thank you!!

So here’s what happened…

If I make the template “full width elementor” & edit it with wordpress editor then it looks like it still has the “print & Save” buttons which is perfect! It just still cuts off the certificate…

If I make the template “full width elementor” & edit it with elementor then it doesn’t cut anything off but it doesn’t seem like the shortcodes like “{first name}” “{last name}” work…but maybe there’s a more specific shortcode I need for it? Also, the “print & save” buttons don’t appear using this method…

I also changed the padding to O and it didn’t really change.

Any ideas on what type of setting would make it cut off? I don’t think I have any other settings on my template and I am really hoping I can get this to work as this is what I need to make the courses purposeful :/

Thank you so much again for all your help & any suggestions!

update: I got the shortcodes with the “full width elementor editing with elementor” to work for the name & date. I just really would like “print” & “save” buttons. Any ideas on how to get those?

Thank you for your patience, help, & suggestions!
Thank you, thank you!!

Hi @thecontemporaryteacher,

I’m glad you got the merge codes working!

I did a little more testing with this, and found a way I think will work.

1.) Add the certificate background on the main certificate edit page.
2.) Edit the certificate with a transparent background in Elementor.
3.) Set the template to “Default Template” without going back to the default editor.

This should produce the background at the normal size and the certificate text on top of it positioned in Elementor, while leaving the print/save buttons at the bottom. However, that said, while I can recreate the missing print/save buttons while editing in Elementor I can’t recreate the broken certificate. So, you may have to do the opposite, meaning set a transparent background for the certificate background on the normal edit page and then have the proper certificate background in Elementor.

Let us know if this works for you!

Thanks and take care,

Thank you so much! I got the certificate to create & the buttons to be there! Yay!!
Now, I’ve run into another problem…

When it pops up on the user’s right hand corner of their computer after they do something (like with the thumbs up & you’ve earned) it doesn’t appear correctly & it is all messed up.

when I click “print” the certificate information becomes all unaligned & such. This also happens if I just click Any idea on how to fix this???

When I click “save” it shows the front of the website homepage not the certificate…

Any ideas????

Hi @thecontemporaryteacher,

I’m sorry for the delay in response!

I have spent some time trying to create this issue and I’m really now sure what’s causing this to happen.

You may have to go in with some custom CSS under the @media option to address just the print screen if nothing else is going wrong with it. This document tells you how to find the CSS you need to address: https://lifterlms.com/docs/css-structure/ and https://lifterlms.com/docs/add-custom-css-using-wordpress-customizer/ tells you how to add the CSS.

There is information on the @media rule here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

The issue, I am pretty sure, is just that the theme is not set up to be compatible with LifterLMS so our settings probably are clashing with their base ones.

Let us know if you need further help with the CSS and we can take a further look!

Thanks and take care