How do I create my own invoice template?

 

Besides providing you with a bevy of professionally-designed invoice templates, Blinksale also permits you to use a template of your own design—it’s customization till the cows come home.

Loading your own template into Blinksale is supremely easy. Just click on the Settings tab at the top of the page, then click on the Invoice Templates button in the sidebar on the right.

Find the Custom CSS Invoice option and check the radio button right next to it. Then, paste your custom CSS code into the text field just below. Finally, click on the Save Settings button at the bottom of the page.

Ah, you say, but what about the CSS itself?

You’ll need another reference to fully understand CSS, but we can give you a bit of a start. CSS works by “grabbing” certain parts of an HTML document through selectors, and then styling those parts through declarations. In order for CSS to work properly, you have to

  • divide your HTML into parts, and
  • give each of those parts unique names.

Fortunately, these are both already taken care of for you in the invoice template, because your custom template will be working on the same HTML code as every other template. You can see what that code looks like here, but for testing in your own browser you should download the actual HTML here.

As you look at the HTML code, you’ll see a <div> (division) tag near the very top with an “id” of “invoice_body”. This division contains everything else in the code, right on down to the closing </div> tag at the bottom. If you wanted to make a change to the appearance of everything in your invoice, the “invoice_body” division is a good way to hit everything at once.

To “grab” that part of the HTML from the CSS, you’d use the selector

#invoice_body

The pound sign here (#) indicates that we are selecting by the “id” of the page division. When grabbing any part of the page by its id, you need to stick that pound sign right in front of the name. Now that it’s selected, you can use adeclaration to make a change to the selected item’s style:

#invoice_body { color: black }

The declaration gets wrapped in curly brackets so we can tell it apart from the selector. In this case, we simply declared that the color of the invoice_body division should be black. “Color” is the property, and “black” is the value. Since invoice_body contains everything else in the page, we’ve just ensured that the whole page will be rendered in black text. (“Color” is actually shorthand for “font color.” If you wanted to color the background, you’d use “background-color” instead.)

It’s possible to select parts of the page without using an id. You can also select any standard HTML element by simply typing its tag name, without the usual brackets. So, to force all the paragraphs on the page to use blue text, you’d just write

p { color: blue }

This would affect everything within a <p>…</p> pair of tags. And it would affect all of those pairs on the page.

There’s a third kind of selector which selects parts of a page by their classes. A class is just an id which you use over and over again, to group multiple parts under the same umbrella. On the Blinksale invoice, you’ll see a couple different <div> elements with a “clearbox” class. Targeting the “clearbox” class in the CSS would affect all such elements, because they share the same class.

.clearbox { height: 1px }

Targeting a class selector requires putting a period (.) in front of the class name. Note that we didn’t have to put any special characters in front of the HTML tag when we targeted it above. You can see that HTML tags get special treatment, like complementary mints on their pillows. However, you’ll probably find yourself using id selectors (with the ”#”) the most.

It’s also possible to combine selectors as a way of drilling down to a very specific level. For example,

#saleinfo td.subtotal

will grab all the <td> (table data cell) elements of class “subtotal” in the “saleinfo” page division. That’s pretty specific! With a declaration attached, it looks like this:

#saleinfo td.subtotal { font-weight: bold }

Important note: in developing your invoice template, make sure that you preface every selector with the #invoice_body component. This is important for making the stylesheet work in email clients. Thus, the above should actually be

#invoice_body #saleinfo td.subtotal { font-weight: bold }

One more thing to note about all this: You can employ multiple declarations per selector. You just have to separate each declaration (each property-value pair) with a semicolon. So, if you want to define both the font color and height of every paragraph on the page, you could write

p { color: blue; height: 100px }

Or, doing it with multiple lines:

p { color: blue; height: 100px }

Either way is fine. CSS doesn’t care about the extra spaces and carriage returns, as long as the punctuation is correct.

Hopefully, that’s enough for you to begin experimenting. Download the sample invoice CSS and start changing it up! Don’t be afraid to break something, because you can always switch back to one of the pre-made templates if your own code goes awry.

The major divisions of a Blinksale invoice are:

#clientinfo (the client's contact information)
#invoiceinfo (date and purchase order number)
#invoicetable (line item expenses)
#saleinfo (subtotal, tax, freight and complete total)

Look for those selectors in the CSS first and see what you can make them do. Try out some of these properties:

{ color: black } (or blue, or red or any of a number of hex RGB values) { background-color: white } (or other values, as above) { width: 500px } (that's in pixels; you can also use percentages: 85% and such. Try to keep everything at or under 500 pixels wide in your template) { height: 100px } (though most parts of the invoice will simply adjust to contain the content) { font-weight: normal }(or bold{ font-family: Georgia, "Times New Roman", Times, serif } (list your preferred font first and follow it with backup choices in case your user doesn't have the first option. If a font name has spaces in it, wrap the name in quotes. Make the last option either serif [has those little tapered tips everywhere] orsan-serif [doesn't] for the seriously font-challenged who don't have any of your choices) { font-size: 14px } (you can use pixels, percentages, or even words likesmall, medium and large{ border-color: black } (if you'd like to draw a line around something, color can be other values as above) { border-width: 1px } (or2px, or 3px or 4px...{ border-style: solid } (or dotted or dashed)
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.