Customizing invoice labels, formatting and custom HTML

Noko's invoices work great with the defaults we give you out of the box, but they'll really shine when you customize them to your needs.

Setting your preferred currency and date formats

If you don't live in the US and need to customize the currency and date format in your invoice, Noko has a pre-configured list of languages, regions, and currencies.

You can customize your date format and currency at the very top of your invoice in the dark gray box.

For example, this is an invoice with the defaults English (United States) and $ for the currency symbol:

If you change the date format to German (Austria), Noko automatically selects Euro as currency and € for the currency symbol, as well as formats the date in German:

If you switch to Japanese, you'd get:

The best thing? Noko will automatically save the date format and currency you choose for any future invoices of that project so next time you create an invoice in the same project all the hard work is already done.

Customizing labels and text

Enter or edit information in any of the light blue text fields and edit any labels (look for the dotted borders), to make the invoice look just like you want it. What you see is what you get when you later generate a PDF of the invoice or print it.

For the Description/Text and the Invoice Footer fields, Noko supports a limited version of Markdown to format text in those fields.

Two line breaks means a new paragraph.

Here's a new paragraph! 

A single line break in text
results in a line break (not a new paragraph).  

You can write **bold** and _italic_ text.

Use "#" or "##" before a headline to make it bigger and bold: 

# Large Headline
## Small Headline

Adding custom CSS and HTML

You can fancy up your invoice using the Custom HTML field at the very top of your invoice.

With custom CSS and HTML you can do things like:

Add your company logo
Change the fonts
Customize colors

You can add just about anything you want to the Custom HTML field—any arbitrary HTML, custom CSS styling, images, text and whatever else you can think of.

Click here to see live of example of an invoice that has a logo, custom colors and custom fonts

The invoice uses the following custom HTML:

<link href='https://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'><style>#invoice,#invoice_report{font-family:'Grand Hotel';background:#ffe7f4;color:#531b3c;border:0.25cm double #982c70;padding:1cm !important;}@page{margin:0 !important;}</style>

<img src="https://asset0.nokotime.com/images/report-logo.png" width=200>

If you include images, fonts or external CSS files, please be sure to always serve them over SSL (URLs that start with https://instead of http://), otherwise your clients might get warnings about insecure content.