Editing Estimate and Invoice templates

[jimsters]

Hi
ive created a few estimates and invoices.

Can i customize my estimate and invoice templates to do the following?

1. I would like the description field to be wider in width,
2. I would like the Unit Cost and QTY to be smaller in width with the option of totally removing them so that it just shows Item, Description and Total.
3. Can i make each page of the invoice have a Header and Footer? I would like to print the estimate/invoice (mine are quite often multiple page estimates) and for each page to have my custom header and footer so that the printed PDF looks like its been printed on my custom letter headed paper. Once printed each page will have my company information in the header/footer and be like printing directly onto letter headed paper.

i have changed the formats of the estimates with your preset options, and ive even chosen to edit them which brings up a css page. The only option i can seem to edit is the width of the Item field, the others dont seem to be listed in the editor.

thanks for any help

[Glenn]

You can achieve both 1 and 2 using the CSS editor. If you don’t understand CSS markup you can ask any reasonably competent developer to assist you on this.

PDF footers can be applied to every page, but not headers. You can modify the PDF footer text in the Sale menu under “Invoice Customisation”.

[jimsters]

thanks for your help.
is it possible to use an image, html or css styles in the footer?

when i make an invoice/estimate, the footer was only applied to the last page or the estimate and not to every page. can it or should it be applied to every page?

[Glenn]

The PDF footer is applied to every page but only supports plain text (you can try with HTML but I’m not sure how it will come out?), the HTML footer is applied to the end of the document, the box for this footer is just above the PDF footer on the screenshot I posted.

[jimsters]

hi
im no css expert, however from what i can see from the css that you are allowed to edit in the “customize this template” there is nowhere to change the width of “Item Description Unit Cost Qty Total” and nowhere that you can remove Unit Cost or Total?

am i looking in the right place to edit the css?
how do i go about editing the width of the tables and removing columns?

here is a copy of the css that your editor generates that i can change:

/*HEADER DETAILS------------------------------- */
 .invoice-header-region {
    width:630px;
    text-align:left;
    position: static;
    margin-bottom:30px;
}
.invoice-header {
    position: absolute;
    top: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 26px;
    font-weight: bold;
    width:630px;
    text-align:right;
}
.invoice-header-label {
    color: #ccc !important;
}
.invoice-text {
    font-family:Arial;
    font-size:12px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: #000000;
}
/*ADDRESS DETAILS------------------------------- */
 .senderAddressDetails {
    width:300px;
    height:120px;
    position:absolute;
    top:80px;
    left:0;
    text-align:left;
    vertical-align:top;
}
.recipientAddressDetails {
    width:300px;
    height:120px;
    position:absolute;
    top:80px;
    left:315px;
    text-align:left;
    vertical-align:top;
}
/*LABELS ---------------------------------------*/
 .invoice-details-tbl {
    width:630px;
    margin-bottom:15px;
    margin-top:160px;
    border-top:1pt solid #CCCCCC;
    border-left:1pt solid #CCCCCC;
    border-right:1pt solid #CCCCCC;
}
.invoice-details-left-td {
    width:30%;
    padding-right:4px;
    text-align:right;
    background-color:#F9F9F9;
    border-bottom:1pt solid #CCCCCC;
    border-right:1pt solid #CCCCCC;
}
.invoice-details-right-td {
    width:70%;
    padding-right:8px;
    text-align:right;
    border-bottom:1pt solid #CCCCCC;
}
/*ITEMISED AREA ------------------------------- */
 .invoice-items-header-cell {
    background-color:#F9F9F9;
    padding-top:5px;
    padding-bottom:5px;
    text-align:center;
}
.invoice-items-body-cell {
    padding-top:3px;
    padding-bottom:3px;
    text-align:center;
}
.invoice-items-tbl {
    width:630px;
    border:1pt solid #CCCCCC;
}
/*FOOTER REGION  ------------------------------- */
 .invoice-footer-tbl {
    width:315px;
    border-left:1pt solid #CCCCCC;
    border-right:1pt solid #CCCCCC;
    border-top:1pt solid #CCCCCC;
}
.invoice-footer-left-td {
    width:50%;
    padding-right:4px;
    text-align:right;
    border-bottom:1pt solid #CCCCCC;
    border-right:1pt solid #CCCCCC;
}
.invoice-footer-right-td {
    width:50%;
    padding-right:8px;
    text-align:right;
    border-bottom:1pt solid #CCCCCC;
}
.invoice-footer-balance-cell {
    height:35px;
    background-color:#F9F9F9;
}
.invoice-status-container {
    width:315px;
    text-align:left;
    float:left;
    position: static;
    height: 130px;
}
.invoice-totals-container {
    width:315px;
    text-align:right;
    float:right;
    position: static;
    height: 130px;
}
.invoice-overview-details {
    width:315px;
    text-align:right;
    float:right;
    position: static;
}
.invoice-items-region {
    width:630px;
    text-align:left;
    position: relative;
}
.invoice-footer-region {
    width:630px;
    margin-top: 15px;
    text-align:left;
    position: relative;
    height:100px;
}
.invoice-append-region {
    width:630px;
    margin-top: 15px;
    text-align:left;
    position: relative;
}
.invoice-notes-td {
    padding: 12px 6px 6px 6px;
    text-align:left;
}
.invoice-terms-container {
    text-align:left;
    width:630px;
}
.recurringTokenContainer {
    font-weight:bold;
    background-color:#FFFF00;
    display:inline;
}/* Cascading Style Sheet */

[Glenn]

Something like this would probably work:

.invoice-items-tbl tr td:nth-child(2){
..
}

Just change the column number to the one you want to adjust or hide.

[Glenn]

Coming back on this point we will add a set of dedicated classes for the item columns as I believe the above will not work when converted to PDF. Leave this with me and I will have some additional classes created with some examples.