Magento – Tried styling order print page, but css is not active. What do i do wrong

ce-1.9.0.1cssprint

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?

Thanks

Best Answer

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

<sales_order_print>
    <reference name="head">
        <action method="addItem"><type>skin_css</type><name>css/custom_print.css</name></action>
    </reference>
</sales_order_print>

Related Solutions

Orders – Prevent Order from Showing on Screen When Clicking Print Order

Not sure what you mean, here. Are you referring the Google Chrome "print dialog?" - not much you can do about that one. As for preventing the printable order contents from appearing in a popup/new tab, you'd can take one approach that comes to mind.

Print Dialog Override, AJAX Method

Extend app/design/frontend/base/default/template/checkout/success.phtml -- may be different depending on your theme. Change this line:

<?php echo $this->__('Click <a href="%s" onclick="this.target=\'_blank\'">here to print</a> a copy of your order confirmation.', $this->getPrintUrl()) ?>

To this:

<?php echo $this->__('Click <a href="javascript:;" onclick="new Ajax.Request('%s', {onSuccess:function(){ ... }});">here to print</a> a copy of your order confirmation.', $this->getPrintUrl()) ?>

The above is more like pseudo-code, and I do not advise to write it like that, but you can get the idea that you'd make an AJAX request for the printable contents, and upon its return, you can write it directly to the success page in a modal or something nice -- then prompt to print.

See the template referenced in #1.
"That page" -- The checkout success page? See below.

Changing the Checkout Success Template

Extend the app/design/frontend/base/default/layout/checkout.xml -- or else add the following to your local.xml

<checkout_onepage_success translate="label">
    <reference name="root">
        <action method="setTemplate"><template>page/1column.phtml</template></action>
    </reference>
</checkout_onepage_success>

Magento Orders – How to Change Logo of Print Order PDF on Success Page

It is pretty simple to change logo from Magento Admin.

Goto to the backend of your website:

1) Goto System>>Configuration>>SALES>>Sales

2) Open the tab Invoices and Packing Slip Design and change the logo from there.

enter image description here

Best Answer

Related Solutions

Orders – Prevent Order from Showing on Screen When Clicking Print Order

Magento Orders – How to Change Logo of Print Order PDF on Success Page

Related Topic