Click on the Settings link at the top of the page, then the Edit My Company Information link in the lower left. Fill out the details as you want your clients to see them (not necessarily as you want us to see them, your billing address can be set separately) and hit Save Company Info.
Posted by John Marstall
2006 Apr 20 in Settings & Customization
You can. All of these options can be found by clicking on the Settings link at the top of the page. Then, hit the Invoice Details button in the sidebar on the right.
For late fees, select one of four options from the Late Fees pulldown menu: No late fee, 1% per month, 1.5% per month or 2% per month.
Check the Sales Tax box if you want sales tax applied by default on every invoice. (Late fee and sales tax options can also be changed on each invoice, regardless of the defaults.)
If you need to use a different sales tax rate, click on the Change this link and type in a new percentage.
If you need to support a tax system other than that used in the US, the Tax Name and Tax ID options are for you. Tax Name is what you call the tax in the system you're using -- "sales tax," "VAT," "because-I-feel-like-it tax," etc. Tax ID is the number that identifies you to the government body collecting those taxes. If you don't know whether you need one, it's probably okay to leave it blank.
(Note: Blinksale, Inc. will not be responsible for you getting thrown in debtor's prison. But if that happens, write us and we'll see about comping your account.)
Hit the Save Settings button at the bottom of the page when you’re done.
Posted by John Marstall
2005 Jul 13 in Settings & Customization
You can change your default payment terms by clicking on the Settings link at the top of the page. Then, hit the Invoice Details button in the sidebar on the right. Observe the pulldown menu labeled Payments Due. Here you can choose from , immediate (payment due tout de suite), NET 15 (payment due in 15 days), NET 30 (payment due in 30 days), NET 45 (I think you see the pattern here) or NET 60.
Hit the Save Settings button at the bottom of the page when you’re done.
Of course, you can always change the payment terms for any particular invoice on the invoice itself.
Posted by John Marstall
2005 Jul 12 in Settings & Customization
You can change your default currency by clicking on the Settings link at the top of the page. Then, hit the Invoice Details button in the sidebar on the right. Look for the pulldown menu labeled Currency. Click on that and choose from waaaaay more currencies than I can comfortably list in this space. I especially recommend the Estonia Krooni. That just sounds awesome.
Hit the Save Settings button at the bottom of the page when you’re done.
Of course, you can also change the currency for any particular invoice on the invoice itself.
Krooni!
Posted by John Marstall
2005 Jul 12 in Settings & Customization
Besides providing you with a bevy of professionally-designed thank you message templates, Blinksale also permits you to use a template of your own design—it’s customization till the cows come home. (Note: you can’t use custom templates with a Free account.)
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 Thank-you Templates button in the sidebar on the right.
Find the Custom 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
Fortunately, these are both already taken care of for you in the thank you message 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 “thankbody”. 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 thank you message, the “thankbody” 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
#thank_bodyThe 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 a declaration to make a change to the selected item’s style:
#thank_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 thank_body division should be black. “Color” is the property, and “black” is the value. Since thank_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 thank you message, you’ll see a <div> element with a “clearbox” class. Unlike with an id, the author could have included multiple elements using that 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,
#thank_body div.subtotalwill grab all the <div> elements of class “subtotal” in the “thank_body” page division. That’s pretty specific! With a declaration attached, it looks like this:
#thank_body div.subtotal { font-weight: bold }
Important note: in developing your thank you message template, make sure that you preface every selector with the #thank_body component. This is important for making the stylesheet work in email clients.
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 thank you message 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 thank you message are:
#thank_wrapper1 (the thank you message text) #vendorinfo (your company's contact information) #vendorbox (contains both #vendorinfo and your company's logo)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 thank you message 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] or san-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 like small, 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 } (or 2px, or 3px or 4px...)
{ border-style: solid } (or dotted or dashed)
For more help with CSS, please see the tutorial at Westciv, or this one at EchoEcho.com.
Posted by John Marstall
2005 Jul 12 in Settings & Customization
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
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 “invoicebody”. 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 “invoicebody” 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_bodyThe 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 a declaration 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.subtotalwill 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] or san-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 like small, 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 } (or 2px, or 3px or 4px...)
{ border-style: solid } (or dotted or dashed)
For more help with CSS, please see the tutorial at Westciv, or this one at EchoEcho.com.
Posted by John Marstall
2005 Jul 12 in Settings & Customization
Blinksale provides a number of options for making your invoices look as professional and attractive as possible.
First, it’s easy to upload your own logo for placement on every invoice.
Second, Blinksale offers a variety of invoice templates to choose from. To find these, click on the Settings link at the top of the page. Then click on the Invoice Templates button in the sidebar on the right.
Selecting your invoice’s appearance is as easy as clicking the radio button next to the template you want. You can click any of the Preview links to see a sample invoice in that style.
Once you’ve selected a template, click on the Save Settings button at the bottom of the page.
It’s also possible to create your own custom invoice template.
Posted by John Marstall
2005 Jul 12 in Settings & Customization
Adding your logo to your invoices is a good way to reinforce your brand and give your bills that extra little professional touch which seems to say “You must pay me now.”
To add your logo, simply click on the Settings link at the top of the page, then hit the Logo & Company Information button in the sidebar on the right.
Note that your logo graphic cannot be wider than 200 pixels and should be saved in GIF or PNG format. If that doesn’t mean anything to you, you should probably employ the help of a talented designer to make sure you can get your logo into the proper form.
Once you’ve got that part sorted out, click on the Choose File or Browse button -- the actual wording will depend on your browser. This will open a file picker dialog which will be specific to your particular operating system—so it's hard to be very specific about this part. Generally you are going to go about digging through folders until you locate the GIF or PNG version of your logo you intend to use. Double-click on the file, or click once and hit “OK,” “Choose,” “Ten-Four” or whatever the confirmation button is on your particular file dialog.
Once that’s done, just hit the Upload Logo button in Blinksale. Allow a few moments for the logo to wing its way onto our server, and then you should see the logo pop up on the page.
If you want to see how the logo looks in context, hit the Invoice Templates button and click on any of the Preview links next to the templates there. If the effect isn’t what you were expecting, you can make changes to your logo graphic and upload it again, using the process above.
Posted by John Marstall
2005 Jul 12 in Settings & Customization
Stay up to date with our XML feed. It's a great way to stay up on the latest updates, improvements, and news of all things Blinksale.
Blinksale is located in sunny Southlake, Texas. We're a small, extremely-talented team of designers, developers, and businesspeople (like you) working hard to take the hassle out of small-business finance. We're also the only folks in our office building who show up to work in flip-flops.
Privacy Policy | Terms of Service | Contact Us
© 2005-2006 Blinksale, Inc. All rights reserved.
Blinksale is a registered trademark of Blinksale, Inc.