Change the Print Layout

[Mongrel]

Hi all,

I am having trouble trying to find the info I need, and have spent a couple of hours and have come up with Nada!!

So here goes....

I am trying to find a way of changing the layout of the output when I hit PRINT in the admin Order List.  See Attached.

What I am trying to do is get a nice looking layout that I can print and include the invoice in with my shipment.  We also want to use it as a picking sheet when picking the items to pack.  The Vendor email does not suit this need.

However, I don't want it messing up the customers view if they go and view their order online.

Currently when I hit that print button, the result is really messy and cluttered, and I would also like to arrange it to match our printable sticky address labels.

Does all that make sense?


Is there a way of doing this?

[attachment cleanup by admin]

[Pulsator]

Hi

This is a note for anyone who comes across this thread while having the same issue.

The print pop up is controlled by the component.php file found, or should be found, in your template root.

This file has a link for a stylesheet, print.css, which should be in your template/css folder. If not, create a new file called print.css in this location and add the following to the top of the file. Note the reset.css import in this code which pulls in a file to clear all parameters ready for your styles. This is also known as the global reset.

/* PRINT CSS
*********************************************/
@import url("reset.css");

html {height:100%; margin-bottom:1px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 90%/125% arial,sans-serif; height:100%; text-align:left;}

/* LAYOUT
*********************************************/
#overall {height:100%; margin:0 auto; text-align:left; width:100%;}


Now copy across any styles, from template.css and other css files you use, to re-create the styles in the print pop-up. You can also use print.css to hide elements you do not want to be printed. One example would be social media icons displayed with the article.

Hope this helps.