SmartDoc Theme : Printing to PDF
One of the most unique and valuable things about our SmartDoc Themes is that they are pre-formatted to be “printable”. In other words, what you see in the DynamicContent page can be immediately printed and/or saved to a standard, correctly paginated 8-1/2 x 11 PDF – with a single click.
Think about that – your user ends up with a convenient PDF that they can share with colleagues – but instead of a generic, one-size-fits-all document, this PDF is completely customized to them and their company. Moreover, the CTA link at the bottom of the document still has the personalization token embedded so they can continue their seamless Buyer Journey even from this PDF!
How does it work?
We use the popular Print-O-Matic plugin with our SmartDocs for this capability. Everything is already set up for you in the content so that the print functionality works for the user via the “Print or Save…” text link at the bottom of the SmartDoc…
The print CSS is currently formatted for Chrome browsers only as noted in our SmartDoc page templates. We also include brief instructions with the print link as to the print settings the user will need to get the correct output.
Let’s take a look at what you need to do to complete the functionality after you’ve installed the SplashDocs Theme.
The text link shown above is driven by the Print-O-Matic shortcode. So to change this wording and make other needed adjustments, go to “Settings” and to the Print-O-Matic items shown here…
You’ll see the “Default Print Title” that you can change here which will change the text of that link for the user if needed. You don’t need to do that on the actual content page itself.
If you scroll down a bit more, you’ll see the “Custom Print Page Style” section of the plugin (image below). We’ve already created the print CSS so that both versions of the 3-page SmartDoc in the current package are fully formatted for the standard PDF mentioned above.
If, for some reason, you need a fresh start on that code, you can download the CSS code file here – then cut-and-paste it into the “Custom Print Page Style” section shown here…
As long as the copy and/or graphics in the SmartDoc content don’t differ too much from the vertical spacing already allotted in the page template, the print out should fit the pages exactly.
Furthermore, this coding will be maintained as you create multiple DynamicContent pages from this theme as long as you simply duplicate the existing page and make edits there (keeping the layout intact).
If you start a new DynamicContent page from scratch the code will not apply. So make sure to always duplicate what we’ve already done for you and edit that.
Why are the images in the PDF different from the actual doc?
Standard images print/save just fine to your PDF. However, more interactive HTML-5 canvas elements (widgets) like the chart and sliders do not print. So to get around this, we have hard-coded replacement images for those items in the POM code to be pulled into the PDF. You’ll see them in the code as shown below (the “Widget Image Swap” items…
So just save out a standard replacement image of the HTML-5 canvas element the way you want it to appear in the printed version. Then swap out the URLs in the the POM code as necessary. Adjust sizing if/as needed and that’s it!
Why doesn’t the font in the PDF match what I have in my SmartDoc?
If you’ve changed the font family from the standard family that ships with our SmartDoc Theme, you’ll need to make the same changes in the Print-O-Matic CSS as it has it’s own font controls. Just find that Font section near the top and make whatever changes are necessary to get the correct look.
What if the pages are misaligned?
If your content exceeds or falls short of the spacing allotted by the page template (as long as it’s not a drastic change) – you can adjust the CSS to shift the content containers a bit to make it fit to the pages again. For example, let’s say you see the following blank space at the bottom of the page because you’ve shifted the graphic or copy a bit in the first section…
Here’s how to fix that for the Version01 (V1) page (the other pages work similarly and are clearly noted in the code)…
Find the “/**V1P1 CONTENT SPACING -” item in the code and make adjustments to the margin and/or padding numbers shown in that section. You’ll notice settings for each section on the page and for each column in each section. This allows you to easily increase/decrease the vertical size of the section – then to adjust the vertical centering of the content within each column the section. These settings are available for each page (V1P2, V1P3, etc.).
Make the adjustments, save the settings, and try the print again. Keep doing this until the spacing for each page is correct.
What if I want to go deeper?
We set up our SmartDoc Themes to be as easy to use as possible for content creators to start doing really cool things without the need for coding. However, if you want to add more content pages and/or just have more granular control over the various items in the pages you can easily do so via this same CSS. You just need to understand how it’s put together so you can build on it. First, let’s look at the naming conventions for the classes…
As you can see here, all the code is fully commented and laid out exactly like the pages are laid out. This makes it very easy to find specific items you might want to adjust.
The class names are based on the version, page, section, and column. So for example you see above the “Version 1” theme (v1), and then Page 1 of that theme (p1), and then Section 1 of that page (s1), and then, finally, you’ll see the individual Columns in that section (c1).
So, if you want to make an adjustment to the right column of the second section on page 2, you will simply find the following class: “v1-p2-s2-c2” and make your adjustments.
The way that this ties back to these sections and columns in the content is via the Gitwid blocks used for the layout. For example, as you can see here in the lower right of the image (in the “Additional CSS classes” field) this section block has been assigned its class appropriately. (v1-p1-s1)..
And this class item is what you’ll adjust in the Print-O-Matic CSS as well. All the columns and other critical components also have their classes in place so you don’t have to worry about that.
So, again, all of this is already set up and ready to go. But, now that you know how it works, you can easily build on what we’ve done to take your content in completely new directions.