As someone who picks up a little freelance here and there, it can be handy to have some software that helps manage invoices and estimates. Software that isn’t Microsoft Excel which, while it will do the work, isn’t great for this purpose. Fortunately I discovered SimpleInvoices, a free and open source web-based invoice management program.
I was a bit disappointed that the default invoice style for SimpleInvoices didn’t resemble the illustration on the SimpleInvoices homepage. And, after seeing that the HTML template for the page was entirely constructed in tables, I went about creating a new, more contemporary HTML invoice template that mimics that template illustrated on the homepage.
(At least, the HTML-based print preview didn’t look that way. Maybe the export to PDF is a different story, but that functionality isn’t available to me.)
Since a template needs a name, I named this invoice template after my home state for now. I’m sure it’s not perfect, but it’s well-suited to my needs. Let me know if there are things that could be improved. You can download the files here:
http://simanek.us/downloads/SimpleInvoices_template_Nebraska_v1.2.zip
Notes:
Installation
- Extract files from ZIP archive after downloading the file.
- Copy the folder titled “Nebraska” to /templates/invoices in your SimpleInvoices installation.
- Log in to your SimpleInvoices program and navigation to Settings > System Preferences and edit the “Default Invoice Template” and select “Nebraska” from the list.
- If you have not yet specified your own logo image, upload your logo graphic (for printed and PDF’d invoices I recommend creating your logo in vector art and saving as an SVG file for use with SimpleInvoices) and navigate to People > Billers and click EDIT next to you name. Under “Logo file” you should be able to select your logo graphic.*
- Test template by opening an estimate or invoice and clicking the “Print Preview” option. Use your browsers printing functionality to print the invoice or save the output as a PDF.
* In order to use SVG files you will need to edit the following SimpleInvoices file: /include/functions.php – Open in text editor and look for “getLogoList” function and change the following line:
$ext = array("jpg", "png", "jpeg", "gif");
to include “svg”
$ext = array("jpg", "png", "jpeg", "gif","svg");
Save the file and now you can use the SVG version of your logo to get a crisp printed logo or a resolution-independent logo in your PDF file.
Firefox Tricks
There are limitations to relying on printing from web browsers to generate PDFs. One of the big limitations is that in general web browsers don’t print background colors or images. In the case of this template, that affects the gray background in the column heads and the yellow highlight behind the grand total. Fortunately Firefox (there might be other browsers that do this as well) gives the option to enable the printing of background colors and images in the Print dialog options.
The other aspect of printing from web browsers that is problematic is the automatic “Pages 1 of 2” and “the title of this webpage” headers and footers on the resulting print out. Firefox also allows you to customize or even turn these off entirely in the print dialog options. You’ll have to do this to get a good, clean invoice.
Layout
Originally I had tried to accommodate window envelopes by strictly formatting the Biller and Customer information sections. But with snail mail on the decline as a method for delivering invoices, version 1.2 discards that strict positioning in order to create a more flexible, robust and attractive layout.
Troy Sobotka