PrintBox What happened to the concept of the paperless office?

The PrintBox stack creates a container within a page and a print button. When the print button is clicked, only the content inside the PrintBox container is printed. This can be very useful on large web pages, and is ideal for allowing users to selectively print portions of a page. Content to be printed is opened in a new window or tab, and the default print window is shown, with options to print, save as PDF, fax, email etc.

The Print Box Stack has recently been updated with improved support for newer versions of Firefox, Safari 5 and Chrome web browsers. In Stacks 2.0, the PrintBox settings are now displayed in the righthand settings panel, when the stack is selected in edit mode. New tooltips have been added to the three settings.



A working example of the PrintBox stack

Stacks Image 287
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.

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.
Print This Section

Setup

  1. Once you have installed the PrintBox stack, drag and drop a copy of the stack into your stacks page.
  2. In the settings panel shown on the right in edit mode, you can customise the button text, tooltip and error message.
  3. Content you want included in the PrintBox stack should be dragged and dropped into the content placeholder shown.

Important You will not be able to preview the PrintBox stack working inside RapidWeaver, but it should work correctly once you preview the webpage in a normal web browser.

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 text link. You can spice up the styling some more, by using some custom CSS code like this:

.printButton {
	line-height: 2.00em;
	background: #cdcdcd;
	color: #333333;
	font-size: 14px;
	float: right;
	display: block;
	position: relative;
	width: 140px;
	text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.printButton:hover {
	background: #333333;
	color: #eaeaea;
	text-decoration: none;
}
This is the same CSS code used in the example presented above, and will target both static and hovered states. 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).