HOME / COMMUNITY Switch to knowledge base

Updated PDF Rendering


#1

We’re pleased to announce an update to the way PDF copies of your invoices, estimates and statements are generated. This update uses an enhanced PDF rendering engine that will allow you to be more creative with your design and branding, with access to a much wider range of CSS3 styles.

To get started you will need to switch on the update manually, the option can be found in Account Settings >> Advanced Features.

image

Once enabled you can preview any invoice and access a number of new templates under the “Invoice style gallery” tab.

image

We’ve added a couple of new prebuilt templates “Rounded” and “Modern” that utilise the additional capabilities of the new PDF engine.

As with the previous version you can still create your own CSS templates or extend any of the existing templates. Just click the orange button “Customise this style” to pop open the CSS editor. You can find out more about the invoice CSS editor here.

Here’s a few things you can do now that weren’t possible before.

Rounded Corners

Everyone can appreciate the aesthetic beauty of rounded corners. Now you can smooth off all those hard edges on your invoices using the border-radius attribute.

The following will add a 12 pixel rounded corner on the invoice labels box.

.invoice-details-tbl {
    border-radius: 12px;
    overflow:hidden;
}

image

Alternating Stripes

By using the :nth-child(even) pseudo selector you can easily apply alternating stripes to your invoice label section, itemised area or footer totals.

.invoice-items-tbl>tbody>tr:nth-child(even){
     background-color: #c6ffcd;
}

Box Shadows

Add some depth to your invoices using simple box shadows. You can use this handy tool to generate your custom shadows, then copy & paste the CSS into the desired parent table class.

.invoice-details-tbl {
    -webkit-box-shadow: 18px 18px 25px -15px rgba(0,0,0,0.37);
    -moz-box-shadow: 18px 18px 25px -15px rgba(0,0,0,0.37);
    box-shadow: 18px 18px 25px -15px rgba(0,0,0,0.37);
}

Angled elements

This one may have limited application but you can use the rotate method to angle certain elements in your invoice. You can find out more about the various 2D CSS3 transform methods here.

#statusStamp{
    -ms-transform: rotate(-10deg); /* IE 9 */
    -webkit-transform: rotate(-10deg); /* Safari */
    transform: rotate(-10deg);
}

The above examples offer a small glimpse into what can be achieved with the invoice CSS editor and the new CSS3 styles. Here are a few more links that will help you preview some effects and generate the requires CSS styles.

If you need any help with styling your invoices, estimates and statements please don’t hesitate to get in touch!


Address is appearing over the logo
Logos for affiliations on invoices/estimates/statements ect and system generated emails ect
Better Invoice Template on Free Version?
#5

Thank you for this update.
I am just looking into this and can’t seem to find the ‘invoice style gallery’ green tab at the top of invoice customisation page…
Has it moved…


#6

Hi @Sameera

If you go to any sales invoice and preview it, you will see the style gallery option there in the top left. Let me know if you’re still having problems locating it.


#7

Thank you found it.
For some reason, i though it was under invoice customisation.


#8

Hi Mathew

I have just noticed that my fixed PDF footer does not appear on the new PDF copy of the invoice.
I have not changed any of the settings in the invoice customisation.
Please could you check. (Account no 6131432638)

I also note that I cannot get my old invoice template. Which is fine as i like the rounded corners template.

Thank you


#9

I think as you had a bunch of carriage returns on the footer text, take a look now.

I recall that this was a way under the old template to push the footer further down the page. In the new PDF generator it’s not required.

image


#10

Thank you. works now.