PDF Footer success with bad side effect

Invoice CSS
1

Hi,

By playing some jiggery pokery with image sizes, I’ve got around the PDF engine limitations cited here and I’ve made one jpeg “Company logo” that includes my header and all important footer in both web view and PDF so my invoices look half decent, however, I have now noticed, that the same image file is used in client payments and purchase receipts, meaning the contents is pushed down the page by the large image.

The image was upload on the invoice customisation page, so I was quite surprised to find it had effected these other areas.

@Glenn, I assume no progress has been made with regard to your comment from 2014:

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.

Please, please please, is there any way you can separate out these areas to use independent images so I can continue to use my fix?

The PDF invoice footer limitations are a real killer in QF. - A show stopper.

Many thanks

W.

2

Hi @woter324

Have you tried the custom CSS option for these areas?

You can access then under Account Settings > Design Customisation > Advanced CSS/HTML

Hopefully that’ll help?

3

The uploaded logos get applied to the sales receipts as a convenience for those users sending them out as payment slips. As @QFMathew mentions we do now have a dedicated CSS template for payments, so you can remove the logo if required.

The only thing that’s missing on the PDF engine is CSS3 support.

CSS3 includes things like psuedo classes, rounded corners and fancy shadows (amongst other things). You will be surprised what you can achieve with plain old CSS.

Changing the PDF engine is not something we can easily do at this stage. It would need to be forked so users can target old and new engines otherwise we’d risk breaking 1000s of customisations users have already created. Every rendering engine will have it’s quirks, they are far less sophisticated than your browser’s rendering engine.

That said if you send a mockup to one of us we can see what’s possible.

4

Thank you @QFSupport. Of course, I use this all the time. I must have panicked! Anyway, for now, I set:

.imgDocumentLogo {
    visibility: hidden;
}

On both Purchase Payments and Purchase Invoices. I’ll work out how to set the right Z-Index so the logo can remain.

Thanks.

1 Like
5

Glad you managed to get it sorted! :smile:. Let us know if you need further help

I’ve just edited your post slightly so the CSS is displayed better, for other users (hope you don’t mind!). For future reference, you can use 3 lots of ` before and after the code to format it on here too.

6

Or indent it with four spaces at the start of each line.

7

Didn’t know about that one! :wink:

8

4 spaces don’t give you the fancy code highlighting :smile:

.someCss {
width:100px;
}
```

Markdown:

    ````css
    .someCss {
    width:100px;
    }
    ````
9

Thanks @Glenn. I’ve PM’d you with the details of my footer. I know the information contained is in the public realm, but forgive me for not giving it out to all and sundrie.

It worked well on the HTML pages, but the PDF invoices have no footer whatsoever. I don’t think there’s any specific CSS3 in there, but then again, I’m not a web dev :smile:

Am I putting it in the wrong place?

Thank you

W.

10

I replied to your PM but I’m just going to reply here also for the benefit of others:

The fixed PDF footer (the one that anchors to the bottom of the page) does have much stricter limitations as it’s stamped on top, once the HTML import is done.

Here is the list of supported tags. <iframe> is out I’m afraid.

<A HREF="...">
<B>
<BR>
<CENTER>
<DIV ALIGN="..." STYLE="...">
<FONT SIZE="..." FACE="..." COLOR="...">
<FONT STYLE="...">
<I>
<P>
<SUB>
<SUP>
<U>
<S>

The only way you can get this sort of output is by using the “Appended Text” footer option. But this floats at the bottom of the invoice content, it isn’t locked to the bottom edge.

The only alternative is to use pre-printed letter heads. Even changing the PDF engine won’t eliminate the need to apply footers as a secondary action, as the original HTML snapshot has no concept of A4 page breaks so I can’t position the footers in the initial import.

It’s complicated to explain without getting into the minute details of how PDF invoices are generated. In short page breaks are very tricky to get right when also allowing full HTML/CSS control.

11

Thanks @Glenn,

So it looks like my current solution of using a “logo” with header and footer is going to be the best option for me.

As I said, I’m not a web dev, so excuse the explanation, but what about the use of a single image file that contains multiple images (example) and is referenced by backgroundimage css tag (for example):

media="screen" section.sep h3 {
    font-family: BrandonGrotesque-Black;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    color: #EDEBE1;
    width: 86px;
    background: url(../images/sprite-sectionheaders.png) no-repeat;
    margin: 0 auto;
    letter-spacing: 1px;
    font-weight: normal;
    height: 27px;
}

In this way, I could use one image and configure each QF CSS section to use different parts of the image file as required.
Is this possible, I guess I could point to the uploaded image on your servers. But, would this render in the PDF?

Also, when I remove a logo under the invoice customisation area, does it delete the image from your servers?

Thanks

W.

12

background: url(my-image.png) should work, but most likely not in the PDF Footer, only the appended text footer.

Try it and see what happens.

I believe so yes, although probably not straight away as it gets cached on our storage provider.

13

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