Creating a Header Logo & Footer for the Invoices that looks the same in both web and PDF

Hi Guys,

I have looked at various posts regarding this such as this: CSS Editor, logo reposition and found some really useful info about modifying the Invoice Header to take a bigger logo but I am still stuck with a couple of problems.

  1. Using the CSS class name .invoice-logo-img (took me ages to find that out!) and a 630px JPEG has helped me to add the correct logo for my company which covers the entire top of the invoice from left to right which now looks as it should in the PDF. However in the web view of the invoices it still appears to be squeezed to 200px across. Any idea how I can get that consistent between the two?

  2. I have added this text to the Invoice Style - Footer Region - Additional Footer Text box:

    Tel: 0000000000
    Mob: 0000000000
    Company Name is registered in England as Company No: 0000000

This took me a little while to get right as it needed much fudging to work within the constraints of the html allowed and how it is interpreted by the PDF creation software you use but it does look the same in both the web Invoice and the PDF one. However, on the PDF it sits too high up the page and should be right down the bottom as it is a footer! How can I get it to be at the bottom? It doesn’t work in the Fixed PDF Footer Text box either.

I was able to force it down by adding another empty row to the table and specifying the row height but that was still too high up on the PDF page and if increased beyond 180px pushed off the page to the next one.

Many thanks in advance and cheers for the damn near excellent QuickFile system!


The trick is to add the !important declaration on the width property, this will override the inline width. I’ve done this for you.

The CSS is sometimes interpreted differently in the PDF view so there’s a bit of fiddling around needed to match them up.

Thanks for that Glenn, looks good now. :smile:

Any idea with regards to the 2nd point? I was thinking maybe some way to remove the PDF Footer Text box or make the footers fixed/styled in line with the end of the page rather than relying on items above it?

OK on the second point the html content will always get appended to the end of the invoice content, it’s not strictly a footer so I think perhaps we should rename that label. There is another footer field PDF Footer, this only appears on the PDF but gets appended to every page and always snaps to the bottom of the page.

If you mean the PDF Footer Text box, the problem there is it is (obviously) only for the PDF’s so doesn’t appear when people log in to view their invoices thus not giving a consistent feel to the invoices issued to clients. Also, hardly any, even very basic, html doesn’t work properly there such as getting bold text to work.

I have seen a few threads on here where people are struggling to configure the invoice footers even though they are capable of getting the rest and the CSS to work.

Amongst your probably very long list of things to do with QF, may I suggest you look at dropping both the footer boxes altogether and possibly create a single footer box somewhere that allows basic html and displays at the bottom of both the web and PDF invoices in a similar fashion?

Also for those that are interested or struggling to get the current PDF Footer Text box to show neatly in a fairly standard way, here is some html that looks ok:

Telephone: 0000 000 0000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;International: +44 0000 000000&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:</b>&nbsp;
Company Name is registered in England as Company No: 0000000

The dot at the beginning is unfortunately important as without it the html tags don’t work properly. Also the line breaks and spaces are critical too as they are all used to make it layout right at the bottom.

Glenn, I don’t know if you can suggest a better way of achieving a similar thing?

The problem here is that technically there is only one footer on the HTML view vs the PDF which will have multiple footers. It’s also very difficult to get 100% consistency between the HTML and PDF views as they are using two different engines to render the output… even two different browsers can display HTML and CSS differently.

We use a 3rd party tool to convert the HTML view to PDF format, it only supports basic CSS and until these tools become more sophisticated it will unfortunately always be a limiting factor. It’s a balance between getting a consistent output vs allowing for greater freedom of design… as soon as we enabled full CSS access it unfortunately was a trade off for consistency between HTML and PDF.

Thanks for considering it and explaining the issue. :slight_smile:

With regards to point 2 in the original post, do you have any idea on some configuration that will work and bring the footer table down as far as possible whilst being dynamic and always staying as low as the form will let it?

In it’s current form I’m afraid this is going to be very tricky! The only way to get a repeating and consistent footer with images and styling would be if we were to review the PDF footer and figure out a way to accomodate for more CSS and HTML elements. But we still need to work within the limits of the software we’re using for the conversion.

Here are the officially supported tags (I believe they are also case-sensitive):

<A HREF="...">
<DIV ALIGN="..." STYLE="...">
<FONT SIZE="..." FACE="..." COLOR="...">
<FONT STYLE="...">

Unfortunately there is no <IMG> tag there so images in the footer are not possible.

This topic was automatically closed after 7 days. New replies are no longer allowed.