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.
Once enabled you can preview any invoice and access a number of new templates under the “Invoice style gallery” tab.
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;
}
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!
