So a customer registers and creates an account. They order something (at least, they should ;-))

After that they can visit their My Account > My Orders and select to print an order, shipment or whatever is in there.

When this action is performed on screen you are presented with the e.g. invoice (and a print dialog)

i added styling for this page to custom.css but it is not used.

Where would i need to do this or do i need to add something in a certain file?


  • there is no custom.css included in that page, try changing print.css
    – Kalpesh
    Nov 28, 2014 at 19:14
  • ok i'll try to do that... but i'd rather have a pdf instead i guess
    – carlo
    Nov 28, 2014 at 19:15
  • styling pdf will not be easy if you are considering that just because of this issue :)
    – Kalpesh
    Nov 28, 2014 at 19:16

2 Answers 2


You can add your custom css to print layout handle in a custom layout.xml or the sales.xml for example:

    <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/custom_print.css</name></action>
  • thanks, would i need to copy sales.xml (or layout.xml - which is best?) from app/design/frontend/base/default/layout/sales.xml (haven't found layout.xml ;P) to app/design/frontend/mytheme/child/layout/sales.xml and just add that code you provide above? and after that add file custom_print.css to skin/design/frontend/mytheme/child/css/ ?
    – carlo
    Nov 29, 2014 at 12:33
  • when i add my print css to theme/child/css/styles.css it is visible on screen... when i add print.css in that folder with same css it is not read although it is in head, but i don't think that is the right way ;-) it would be best if i could get the styling from custom.css
    – carlo
    Nov 29, 2014 at 13:21
  • when copying the sales.xml, yes, the steps you described. if you add a file in theme/child/css/ with the name print.css you will override all styles in the print.css loaded from the default theme/default/css. The best way is to name it like custom_print.css or something. So you can avoid any inheritance issues.
    – tomtone
    Nov 29, 2014 at 22:16

Create your custom print stylesheet in your skin/frontend/<your_theme>/default/css and name it something like custom_print.css to avoid any conflicts.

Now you can either target specific sections in the previous solution or you can place it in the head section of page.xml so it is available site-wide. I.e. as a child node of head:

<action method="addCss"><stylesheet>css/custom_print.css</stylesheet><params>media="print"</params></action>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.