Using business letterhead for invoice background

Ingenuity@Home · #1 02-23-2010, 03:10 PM

Hi,

I'd like to use my business letterhead as a background for the invoices. Any idea how and where to do that?

I'm new to this software language and still trying to get my head around how things fit together.

Guessing one of the files will be skin1/mail/html/order_invoice.tpl?

pauldodman · #2 02-24-2010, 01:56 AM

Yes, that's the template you need. You'd need to set it as the background image.

Ingenuity@Home · #3 03-01-2010, 06:15 PM

Thanks Paul.

I'm struggling to get it to show as the invoice background. Currently it just keeps showing it as a full page image, with the invoice now on a 2nd page.

Any hints?

pauldodman · #4 03-01-2010, 11:31 PM

Have you added the image as a background in the css file, in the class:
"order-invoice"
?

Ingenuity@Home · #5 03-03-2010, 02:45 PM

Eventually got it to show the letterhead as background....well....partially.....

Basically, I did the following:
In skin1/mail/html/order_invoice.tpl I replaced this

Code:

<table cellspacing="0" cellpadding="0" {if $is_nomail eq 'Y'}class="order-invoice width-100"{else} style="width:600px; background-color: #ffffff;"{/if} summary="{$lng.lbl_order_details_label|escape}">

with the following:

Code:

<table cellspacing="0" cellpadding="0" style= "background-image:url({$ImagesDir}/myletterhead.jpg)" no-repeat top center; {if $is_nomail eq 'Y'}class="order-invoice width-100"{else} style="width:600px; background-color: #ffffff;"{/if} summary="{$lng.lbl_order_details_label|escape}">

Problem now is that, depending on the number of products listed on the invoice, it either

cuts off the bottom piece of the letterhead; or

prints the full letterhead followed by top section of letterhead again.

What am I missing?

Ingenuity@Home · #6 03-03-2010, 02:52 PM

Quote:

Originally Posted by pauldodman

Have you added the image as a background in the css file, in the class:
"order-invoice"
?

Hi Paul,

Initially - no. Didn't think of css.

I now changed the following in main.css:

Code:

.order-invoice {
  background: #ffffff none;
}

replaced with

Code:

.order-invoice {
  background: url(images/myletterhead.jpg) no-repeat top center;
}

Still get the same problem as with changes made to order_invoice.tpl (as mentioned in previous post ) - even if I remove the changes made in order_invoice.tpl.

Really appreciate your thoughts on this.

Jon · #7 03-04-2010, 07:21 AM

Probably you need to change your invoice from an image, to html code that can have the body stretch, then insert the html code above and below the existing invoice. Often it's easiest to do this globally on all emails by modifying the header and signature files.