This tip follows on from the suggestion here https://www.ecommercetemplates.com/support/topic.asp?TOPIC_ID=80818 and something I'd been meaning to get round to for ages. It should be pretty simple to provide printer friendly pages of your site without going down the road of making duplicates or using scripts to strip out content.

First thing you need to do is set up a new css file, call it something like print.css and add it to the head section of your site after the existing and main css file, like this

<link rel="stylesheet" type="text/css" href="/ectstyle.css" />
<link href="/print.css" type="text/css" rel="stylesheet" media="print" />

Note the second one has the important media=print call so it will only be used when printing the page, not when viewing through the browser.

First thing you want to do is set black text on a white background and remove margins, so add this to print.css



The next step is to remove the menus, header and footer - essentially anything that doesn't need to be printed



The classes and ids above will depend on your site and display:none attribute will remove them from the printed page.

That's about it really but you can take it tidy thing up further. Links on the page probably need to be shown as such so you might want to add the following



if those links are important, and obviously they can't be followed from a sheet of paper, but you might want to include the link destination



If you go to any page on ECT (except the home page and support forum) you can see the results by going to File > Print Preview.

One more thing, if you want to make it clear to users they can print your page (maybe handy on the product pages) add the following link



Andy

Ecommerce templates

ECT newsletter


Follow us on Twitter and Facebook

This works great and my printer friendly page is coming together. I have one problem though; my records are spread across 2 pages in some cases. Is there anyway to only display full records per page without the text and images from becoming apart from each other in 2 pages?

Many thanks

I can't see a way of doing that with the pages being dynamic. You can add this to your css file

p.pagebreak{page-break-after: always}

but the problem is knowing where to add that in the code.

Andy

Ecommerce templates

ECT newsletter


Follow us on Twitter and Facebook

Here's an excellent tutorial which takes my steps a bit further

http://www.netmagazine.com/tutorials/make-your-website-printable-css

Andy

Please review our software and services

ECT newsletter
ECT hosting suggestions

Follow us on Twitter, Facebook, Google + and YouTube

As one who likes to keep code to a minimum, I use two classes for printing: .noprint and .noscreen.

For areas of your page that you control, navigation, navigation in your footer, ads, some graphics, etc., I add the class .noprint. Then, when you are doing you media="print" CSS, all you have to add is .noprint {display: none;} to eliminate all these areas with one line of code.

For items I do not want seen but do want printed, I use the class .noscreen. For example, in my footer I have While the <%=SocialLink%> is specific to a script I wrote which displays the URL, this is not needed when the site is being viewed online. However, since some people have their browsers set to not print the source URL, for my print CSS I have .noscreen{display:block;} so people know where the page came from. This also adds the business name, address and phone number. Again, this is adding to or subtracting from items to be printed with little CSS.

As for the ECT classes, you will have to do those manually. Some of the ones I eliminate are: Remember, you can group all these elements. (These classes apply to the ECT CSS layout.)

And just a reminder, background images do not print by default, a user has to set their browser manually to print background images.

Bottom line, be thoughtful of your site visitors (and their ink) by putting yourself in their position. If you get upset printing superfluous things, they probably do too.

And you are welcome to visit the site in my signature line below and see how the print version varies from the screen version.

Marshall

From Our Heart
FromOurHeart.com
Gifts, Plush Stuffed Animals, Toy, Games, Puzzles, 3D Gift Cards, Nostalgic Signs, and Collectibles

Is there a way to keep 'related/recommended items' from printing?

That might be possible through the css file - can you let me know the URL of the page and I'll take a look for you?

Andy

Please review our software and services

ECT newsletter
ECT hosting suggestions

Follow us on Twitter, Facebook, Google + and YouTube

Is it possible to add this to vsadmin pages - to print out an order, for example? If so, where would these classes go?

Thanks,

~ Judy

Hi Judy, The original post does not require editing the pages in the vsadmin folder. Order printing is already printer friendly you select print invoice or packing slip from the drop down on the view orders screen, to print the orders.

Winners never quit, quitters never win
User Manual for Ecommerce Templates

Hi Marlene,

I want to print the "Order Details" page.

~ Judy

Anyone have a thought on this one?

~ Judy

Judy, is it something specific you need printed on the admin order details pages that you can not get using the printable invoice feature?

David
ECT Power User :)

No, I just prefer to use the Order Details as the "inhouse" copy and the Invoice as the copy sent to the customer with their package.

~ Judy

Just my personal thoughts here Judy - as a store owner who now does pretty high volume - we just keep a hard copy of the same invoice as the customer (printable).
Unless you are deleting orders from the admin, you can always go back to those and get any other details that may not have been on the printable view.
Ask yourself this - how many times over the years have you actually had to pull a printed copy of a customer invoice for some info that you could not get faster right from your admin.

You might be causing yourself grief over nothing I guess is what I'm getting at.

David
ECT Power User :)

Hi Dave,

Thanks for your thoughts. We use the Order Detail page in shipping for pulling the orders. We've been doing this for years with a "Print Details" script that was written for us. Since we have switched to php, I'm trying to use as many 'already-included' features as possible without having to update extras every time.

Of course, we know about the printable Invoice - we've been using that since the switchover for picking - it's just a preference thing. If that's all that is available, than that is what we will have to use. I was looking to see if this could be used...evidently it can't be.

Thanks again!

~ Judy

I have revisited my printable views after some time to freshen things up a bit.
I never liked that some of the product and category div's get cut in half at the page break, so this added to the top of the print.css style sheet fixed that

div.category, div.product {
page-break-inside: avoid;
}

Also, to make it easy to view your changes, use the developer toolbar for firefox and select css>display styles by media type>display print styles

Firefox developer toolbar is your friend - http://chrispederick.com/work/web-developer/firefox/

Andy, the first post in this thread is a bit of a mess too -

David
ECT Power User