FreeAgent, if you don't know, is an awesome online accounting software aimed at freelancers and small businesses. Having made the switch over to it completely for my invoices, expenses and time tracking, I couldn't recommend it enough. While their default invoice themes are great, I've created a pack that is available for you to download and use for your own invoices!
The pack consists of a set of five colours – grey, blue, green, orange and pink – displayed above, and a print stylesheet. These can be used as-is, or customised to use any colours you'd like.
Like what you see?
Buy the pack, or Tweet about it and get a discount!
The rest of this post is how to install and customise the themes. So, go ahead and download the pack first and come back for more information.
Installation instructions
To install one of the themes, follow the directions on the FreeAgent website found here: http://www.freeagent.com/support/kb/invoicing/theme-gallery.
Select your favourite colour from the pack, and paste the contents into the "Main CSS" tab. Regardless of which theme you choose, paste the contents of sjw_print.css into the "Print CSS" tab. Click the save button, and you're good to go! Now start sending those awesome invoices to clients.
Browser support
IE6+, Firefox, Chrome, Safari etc. are all supported for layout. All modern browsers that support CSS3 will also have some added niceties; rounded-corners, drop shadows and so forth.
Customisation
Zebra stripes
By default each of the themes has zebra stripes applied to the item rows of the invoice details table. If you're not a fan of zebra stripes, simply find the comment about "zebra stripes" in the CSS to remove them. This is an example from sjw_grey.css:
/* --- delete the next two lines to remove zebra stripes --- */
#invoice-amount .item td { background: #f5f5f5; }
#invoice-amount .odd td { background: #fff; }
Show or hide addresses
Though the Invoice Devkit FreeAgent supply has all of the possible information, sometimes I find that I don't have much more than a name and email address for a client. For this reason, I've also made an option to remove the address lines from the invoice. Look in the "Customization" section of the CSS file for the following, and remove the two lines it says to delete:
/* --- delete this line to remove addresses ---
.vcard { display: none; }
#invoice #invoice-info { clear: right; }
#invoice-header { float: left; display: inline; }
--- delete this line to remove addresses --- */
Make it your own
Each of the themes is built on top of the base "grey" colour, with the styling applied at the bottom of the CSS file. This makes it easy to customise any of the themes to fit your brand!
Like what you see?
Buy the pack, or Tweet about it and get a discount!