Never underestimate how often people print your webpages or save them as a PDF. You should always make provision for people wanting to print pages or save them as a PDF for sharing or offline viewing later on. PrintBox makes the task a whole lot easier for yourself and your website visitors. Of course, not all devices support printing, so we sensibly hide the print buttons automatically on smaller handheld devices like smartphones and tablets. Header and footer boxes let you enter extra content above or below your printed content; like titles, contact details or copyright information. The print button is styled by Bootstrap by default, but you can restyle it yourself.
PrintBox works reliably, using a combination of jQuery Javascript and CSS rulesets. Unlike other solutions which clone content into new tabs or windows (frequently causing links and images to break) PrintBox simply hides all page containers you don't want printed and brings the active PrintBox stack to the front for printing. The print dialogue window automatically opens. Once printing has commenced, the page returns back to normal and the user is free to continue scrolling the page or printing additional content. PrintBox does not override or change the normal browser print functions.
PrintBox is coded exclusively for RapidWeaver, with no dependancies on any existing plugins. We take into account the often complex layouts people build in Stacks / RapidWeaver and the need for pages to remain fast and responsive.
PrintBox works reliably, using a combination of jQuery Javascript and CSS rulesets. Unlike other solutions which clone content into new tabs or windows (frequently causing links and images to break) PrintBox simply hides all page containers you don't want printed and brings the active PrintBox stack to the front for printing. The print dialogue window automatically opens. Once printing has commenced, the page returns back to normal and the user is free to continue scrolling the page or printing additional content. PrintBox does not override or change the normal browser print functions.
PrintBox is coded exclusively for RapidWeaver, with no dependancies on any existing plugins. We take into account the often complex layouts people build in Stacks / RapidWeaver and the need for pages to remain fast and responsive.
Example
This is a working example of the PrintBox stack. The print button is only shown in desktop web browsers. Only content within the box will be printed, when you click on the 'Print This Section' button.The title of your printout can go here in this space
Hello, I am a PrintBox!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et erat ut lectus fermentum tincidunt. Donec sed leo risus. Sed ut eros mi, a pellentesque purus. Donec leo elit, facilisis euismod accumsan in, mollis vel massa. Donec at turpis massa, nec tincidunt erat. In venenatis dolor sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam euismod egestas facilisis. Aenean vestibulum sapien nec libero imperdiet semper. In risus nulla, eleifend at pharetra sodales, consectetur non justo. Phasellus faucibus, leo eget blandit semper, augue felis ullamcorper lectus, vel luctus urna quam quis nunc. Nullam vel nibh sit amet felis tincidunt convallis eu nec purus. Sed tempor velit ut nulla pretium sodales. Quisque dapibus massa non velit elementum quis aliquam nibh pharetra. In arcu mauris, bibendum eget laoreet at, congue vitae tortor.This is a link to another website
Aenean sed lacus vitae ante sagittis pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam mattis velit sed odio sollicitudin dapibus. Aenean pellentesque lectus quis quam hendrerit vel rhoncus augue facilisis. Aenean tempus malesuada augue vitae commodo. Etiam sed lorem dolor, et congue mauris. Nullam sit amet erat nisl, ac imperdiet dolor. Donec vel ligula odio. Maecenas pretium leo sit amet libero vulputate molestie in at arcu. Suspendisse potenti. Maecenas pellentesque, dolor id scelerisque vehicula, magna dolor luctus lectus, ut ornare lectus ipsum ut ligula. Aenean ante libero, consectetur vel ultricies quis, feugiat sed lorem. Aenean sollicitudin erat quis massa imperdiet et malesuada dui malesuada. Ut id augue nisi, nec placerat ligula. Sed imperdiet neque eget nibh hendrerit accumsan. In eget dolor sem, quis volutpat urna. Proin tempor nunc vitae felis iaculis bibendum.
Sed lacinia, velit vitae gravida egestas, mauris ipsum varius justo, vitae tincidunt felis erat vitae odio. Aenean lorem orci, rhoncus a tincidunt sed, aliquet vitae odio. Nullam ac quam sit amet lacus posuere molestie in quis sapien. Etiam sed erat massa. Maecenas quis elit a mi pellentesque fringilla. Phasellus id velit arcu. Suspendisse pretium rutrum pulvinar. Donec enim turpis, iaculis nec imperdiet at, suscipit eu mauris. Duis luctus venenatis dolor, sed feugiat eros varius mollis. Nunc tincidunt pharetra lorem non convallis. Nulla consequat luctus enim quis varius.
Setup
Follow these instructions for getting a PrintBox stack working in your webpage:Once you have installed the PrintBox stack, drag and drop a copy of the stack into your stacks page
In the settings panel shown on the right in edit mode, you can customise the button text, button alignment and optional header or footer contain (to be shown only on your printout)
Content you want included in the PrintBox stack should be dragged and dropped into the content placeholder shown. For best results, use simple types of content like static text, headings, links and images
Note! RapidWeaver no longer supports the printing of webpages. You will not be able to test the PrintBox stack working inside RapidWeaver, but it should work correctly once you preview the webpage in a normal web browser (like Chrome, Safari, Firefox and Opera).
You can use an unlimited number of PrintBox stack on the same page. This enables you to break-up your page into smaller printable regions. The PrintBox stack is able to support both text and graphics, as the example above demonstrates. Although ThemeFlood themes and some third-party themes already include excellent environmentally-friendly printer stylesheets, the PrintBox stack enables you to go one step further.
Customising the print button
By default, the print button will get shown as a normal button. In Bootstrap-enabled themes, the button will get rendered as a small colourful button with a subtle rollover effect (as in our example above). Themes lacking Bootstrap support will render the button as a standard grey button element. You can spice-up the styling some more, by using some custom CSS code. Custom CSS code can either go in the RapidWeaver Page Inspector (within the custom CSS box) or you can open the theme contents and place it in the custom.css file (which will apply the code automatically to all pages using the theme).Font Awesome Icons (like a print icon or page icon) can be displayed before or after the print button label text. Refer to the Font Awesome Icons website for a complete list of all icon designs. If your RapidWeaver theme already includes support for Font Awesome Icons (all ThemeFlood themes do), just enter your icon markup before or after the label text. Typical icon markup would look like this:
<i class='fa fa-print' style='color:#FFFFFF;'></i>Themes without support for Font Awesome Icons will need icon support adding first, before you can make use of icons.
Custom print buttons
If you are using a single PrintBox on a page, you can create a custom link or button with a class ofcustomPrintBoxButton to trigger the print dialogue window. Within the button style settings, you can set the style to 'hidden' to hide the normal print button or link.Browser compatibility
Print buttons are hidden from view on Android, webOS, iPhone, iPad, iPod and BlackBerry devices. Additionally if a web browser has Javascript disabled, the print buttons will again get hidden from view. PrintBox has been tested and confirmed to work in IE10, IE11 and the latest versions of Safari, Chrome, Opera and Firefox. It may well work in older versions of Internet Explorer and other web browsers too. The underlying source code has purposefully been kept as simple as possible; and we avoid doing things like trying to force content to open in popups, new windows or tabs (which can often be blocked).Browser bugs
Beware that every web browser has its own ways of interpreting thewindow.print(); Javascript function. There may often be inconsistencies in how the print window is displayed and what actually gets printed. Safari is by far the buggiest web browser for printing, and will sometimes do odd things like failing to display images in your printouts if the website has an SSL certificate or printing content with no styling applied (even when printing from the File menu). There is no method to fix these issues - they are all browser bugs. The best you can do is to send feedback and wait for certain browser vendors to catch-up to the same level as the rest.