The 'build your own design' Tutorial
WHAT YOU NEED TO KNOW
There's a reason why other invoicing Apps only offer three templates you can't change or if you are allowed to, it is cumbersome, limited, and annoying. Writing code for printing out things on a computer is (besides syncing) the hardest task you can do as a developer. It is a baggage full of hurt. And that's the nice way to put it. Printing and proper pagination is the Louis Vuitton set of hurt. I decided to go down that path for you so that you can create awesome designs for your quotes and invoices with just a little knowledge of HTML and CSS.
But you need to invest some minutes. Period. And you may have to test your design for a couples of times, especially the pagination. But the result is worth it!
If you're completely new to all things HTM and CSS - I got you covered! Just quickly head over to my newly created 'DIV's for Dummies' Tutorial and come back here later :-)
WHAT YOU NEED TO DO
1. Download the Empty Template
2. Unzip the downloaded folder
3. Take a look at the Substitutes.txt file
These substitutes are available thru-out the layout/design and will be replaced on the fly - when you preview, print, send-out an invoice - by Bill with the numbers, texts from your current invoice, quote, reminder, or delivery slip, and with the localized words you have provided in the Bill Preferences.
4. Take a look at the Invoice.html file
Templates/Designs are based on HTML and CSS. You can do whatever you want with them. You can add, delete and rearrange components in every possible way. Bill will replace placeholders like: %COMPANY% with your company's title/name on the fly and style it with the CSS you've provided (for example in the 'companyTitle' div id).
5. Take a look at the Item.html file
This item code will be used in a 'loop' - meaning this code applies for every single item on an invoice. You can use whatever you want/prefer/need: either pure CSS, tables, lists, or even other crazy solutions.
6. Take a look at the CSS.css file
Yes, the empty CSS file is kinda boring. So, lets have a look at a customized CSS file instead:
As you can see, I've added my own DIVs and styles. And that's what you can (and should) do as well. You also don't have to start with the empty template. Just use one of those already available and customize it (or them) to your needs.
DESIGN BUILDER
You can do all of that outside of Bill 2 with an App like SimpleEdit for example - but you don't need to. You can directly edit and preview layouts/designs from within Bill. Or even better, download and use the extra written DesignBuilder.
With the DesignBuilder you can easily, and most importantly, very comfortably build your awesome designs in a single App and directly preview them. Again, it doesn't get any easier.
WTF?
Still confused?
The Invoice Template is nothing more than an HTML file, the overall blueprint for your invoice. This file consists of ordinary HTML code and in-between you 'add' the substitutes you want and need to show up on your invoice, your quote, your reminder, or your delivery slip:
Bill will replace the substitute
%COMPANY% with your company's name, which you have provided in Bill's Preferences. %DUEDATE%, for example, will be replaced on the fly with the due date of the invoice and %TOTAL%, of course, with the total amount of the invoice. In order to work in every language, Bill will replace %LOCDISCOUNT% (and everything else beginning with LOC) with the localized word for discount you've provided in the Bill Preferences. Just as an example: In German this would be 'Rabatt'.The Item Template is for 'designing' the way the items on your invoice should be arranged and appear. That code will be used in a loop so that every single item will just look the same. You can use whatever you want. Either pure CSS, tables, lists, or whatever works for you.
Speaking of CSS: That's the third and last part of your invoice. The CSS describes how your invoice and its components should look. Since Bill is a native Mac App, you can use everything WebKit supports and you don't have to care about the IE or Firefox here :-)
Don't know what the heck HTML and CSS is and does?
No worries! You can still use Bill. By design Bill works for any language and your individual needs out of the box since you can provide and customize every important aspect without even touching a template/design. Just provide your boilerplates, your custom localized words, and select the template that fits your taste and needs and you're good to go.
And editing the template and the CSS isn't that hard. No really, it's not! Even without a degree in web design you can easily change the font or add needed substitutes on your own. Care for an example?
Here you are:
body { font: 13px "Helvetica Neue", sans-serif; }This is taken from the CSS file of the 'Bored by Life' template. Yes, there are some gibberish thingies to find - but 'font' says it all - right? If you just change "Helvetica Neue" into "Times New Roman" your clients will hate you for choosing a really ugly font - but you've changed it on your own. And guess what happens if you change 13px into 19px? Yes, your clients won't need their glasses to pay you but you probably will need to buy some more paper :-)
And since practically every thirteen year old kid can build websites in their sleep, there will be someone in your household or neighborhood eager to help you in exchange for some easily earned bucks.
And since I'm sometimes a nice person: The 'DIV's for Dummies' Tutorial.
