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 '14 at 19:14
  • ok i'll try to do that... but i'd rather have a pdf instead i guess – carlo Nov 28 '14 at 19:15
  • styling pdf will not be easy if you are considering that just because of this issue :) – Kalpesh Nov 28 '14 at 19:16

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 '14 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 '14 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 '14 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, privacy policy and cookie policy

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