Ecommerce software home
Shopping Cart Software Forum for Ecommerce Templates
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?



Find us on Facebook

Follow us on Twitter

View our YouTube channel


 All Forums
 Technical
 Tips and Tricks - HALL OF FAME
 Printer friendly pages
 New Topic  Reply to Topic
 Printer Friendly
Author  Topic   

Andy
Administrator

95440 Posts

Posted - 02/25/2011 :  05:11:49  
http://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. br / br / 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 br / br / < link rel= stylesheet type= text/css href= /ectstyle.css /> br / < link href= /print.css type= text/css rel= stylesheet media= print /> br / br / 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. br / br / First thing you want to do is set black text on a white background and remove margins, so add this to print.css br / br /
body { br / background-color: white  br / color: black  br / position:absolute top:0 left:0 margin:auto  br / }
br / br / The next step is to remove the menus, header and footer - essentially anything that doesn t need to be printed br / br /
div.top,div.menus,#footer{ br / display:none  br / }
br / br / The classes and ids above will depend on your site and display:none attribute will remove them from the printed page. br / br / 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 br / br /
a:link, a:visited { br / color: #006  br / background: transparent  br / font-weight: bold  br / text-decoration: underline  br / }
br / br / 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 br / br / #container a:link:after, #container a:visited:after { br / content: attr href br / font-size: 90% br / text-decoration: none br / } br / #container a[href^= /" target="_blank">This tip follows on from the suggestion here http://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. br / br / 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 br / br / < link rel= stylesheet type= text/css href= /ectstyle.css /> br / < link href= /print.css type= text/css rel= stylesheet media= print /> br / br / 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. br / br / First thing you want to do is set black text on a white background and remove margins, so add this to print.css br / br /
body { br / background-color: white  br / color: black  br / position:absolute top:0 left:0 margin:auto  br / }
br / br / The next step is to remove the menus, header and footer - essentially anything that doesn t need to be printed br / br /
div.top,div.menus,#footer{ br / display:none  br / }
br / br / The classes and ids above will depend on your site and display:none attribute will remove them from the printed page. br / br / 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 br / br /
a:link, a:visited { br / color: #006  br / background: transparent  br / font-weight: bold  br / text-decoration: underline  br / }
br / br / 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 br / br /
#container a:link:after, #container a:visited:after { br / content:      attr href        br / font-size: 90%  br / text-decoration: none  br / } br / #container a[href^= /:after {
content: " (http://www.ecommercetemplates.com" attr(href) ") ";
text-decoration: none;
}


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

<a href=" #" onClick=" window.print()" >Print Page</a>


Andy

Ecommerce templates

ECT newsletter
Dreamweaver templates

Follow us on Twitter and Facebook


agbr01895
Starting Member

United Kingdom
38 Posts

Pre-sales questions only
(More Details...)

Posted - 04/25/2011 :  20:24:37  
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

Andy
Administrator

95440 Posts

Posted - 04/26/2011 :  04:49:55  
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
Dreamweaver templates

Follow us on Twitter and Facebook


Andy
Administrator

95440 Posts

Posted - 03/05/2013 :  07:05:54  
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



Marshall
Ecommerce Template Guru

USA
1426 Posts

Posted - 03/05/2013 :  10:05:52  
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
<span class="noscreen"><br /><em>You are here:</em> <span id="page_title" style="font-weight: bold;"><script type="text/javascript">{document.write(document.title)}</script></span><br /><%=SocialLink%></span>
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:
.addtocart, .quantitydiv, .detailquantity, .addtocart, .emailfriend, .previousnext, .prodfilter, .pagenums, .checkoutbutton, div.quantityinputdiv, .prodoptions, select.prodoption, span.prodoption, div.optiontext, div.option, div.addtocart, .notifystock, .configbutton, div.outofstock, div.multioptiontext, div.quantitydiv, {
display: none;
}
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

Electric Matthew
Starting Member

42 Posts

Pre-sales questions only
(More Details...)

Posted - 04/23/2014 :  15:24:00  
Is there a way to keep 'related/recommended items' from printing?

Andy
Administrator

95440 Posts

Posted - 04/24/2014 :  03:09:33  
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



Judytu
Ecommerce Template Guru

USA
2466 Posts

Posted - 05/15/2015 :  15:46:54  
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

Sinbad
Administrator

65705 Posts

Posted - 05/15/2015 :  16:53:43  
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

Judytu
Ecommerce Template Guru

USA
2466 Posts

Posted - 05/26/2015 :  14:15:10  
Hi Marlene,

I want to print the "Order Details" page.

~ Judy

Judytu
Ecommerce Template Guru

USA
2466 Posts

Posted - 05/28/2015 :  10:13:56  
Anyone have a thought on this one?

~ Judy

dbdave
ECT Moderator

USA
8023 Posts

Posted - 05/28/2015 :  12:23:32  
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 :)

Judytu
Ecommerce Template Guru

USA
2466 Posts

Posted - 05/28/2015 :  12:33:28  
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

dbdave
ECT Moderator

USA
8023 Posts

Posted - 05/28/2015 :  13:40:27  
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 :)

Judytu
Ecommerce Template Guru

USA
2466 Posts

Posted - 05/28/2015 :  13:50:33  
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

dbdave
ECT Moderator

USA
8023 Posts

Posted - 09/24/2017 :  10:44:38  
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

Edited by - dbdave on 09/24/2017 11:05:41
   Topic   
 New Topic  Reply to Topic
 Printer Friendly
Jump To:
Shopping Cart Software Forum for Ecommerce Templates © 2002-2019 ecommercetemplates.com
This page was generated in 0.02 seconds. Snitz Forums 2000