invoiceninja/docs/invoice_design.rst

Invoice Design
==============

Whether you're a design novice or programming pro, Invoice Ninja gives you the power to customize your invoice design, to give your invoices the exact look you want. The design tool is the perfect way to match your invoices to your company's graphical look and feel, including colors, fonts, logos, margin sizes, column names, headers, footers and much more.

You can design you invoice using the simple selection tools, or go deeper and customize it from the foundations with our customization feature.

The Invoice Design page is divided into two sections. The top section presents the various options for customization and the bottom section displays a real time PDF sample of your invoice, so you can see your changes as you go along.

To customize the invoice design, there are five tabs to choose from. Let's go through them one by one:

General Settings
""""""""""""""""

Standard Design: Invoice Ninja provides a selection of design templates. Examples include 'Bold', 'Elegant', 'Hipster' and 'Business'. The default template setting is 'Clean'. To change the template setting, select a design from the drop down menu. The PDF invoice display below will automatically update to show you a preview of the design template.

Quote Design: You can also select a design template for your quotes. Choose from the available options in the drop down menu.

.. TIP:: Your chosen design will only apply after you click the Save button. Feel free to play with the various designs and explore your options before saving.

- **Body Font**: Select the desired font for the body text of the invoice.
- **Header Font**: Select the desired font for the header text of the invoice.
- **Page Size**: Select the desired page size, from among the dozens available.
- **Font Size**: Select the desired font size for the text that appears in the invoice.
- **Primary Color**: Select the desired primary color of the invoice design.
- **Secondary Color**: Select the desired secondary color of the invoice design.

.. TIP: The invoice design templates are based on a two-tone color scheme. Make sure to select primary and secondary colors that are complementary and reflect your design taste and your company's design theme.

Invoice Labels
""""""""""""""

Want to change the column names or field names on your invoice template? To customize any field name on your invoice, choose the relevant label from the drop down menu, and enter the new name in the empty field. After you click the green Save button, the new field name(s) will appear on the live PDF of the invoice template.

Invoice Fields
"""""""""""""""
You can change the order and location of any fields on your invoice template by using the 'drop and drag' feature. The fields are coordinated in groups: Invoice Fields, Client Fields and Company Fields. Use your mouse to drag and drop the fields in the order and location you prefer.

Product Fields
""""""""""""""

You can change the order and location of any product or task fields on your invoice template by using the 'drop and drag' feature. Use your mouse to drag and drop the fields in the order and location you prefer.

Invoice Options
"""""""""""""""

Hide Paid to Date If you wish to hide the Paid to Date column until payment has been made, check the box. Then, your invoices won't ever display 'Paid to Date 0.00'.

Embed documents You can choose to attach documents to your invoice, such as samples, testimonials, etc. Check the box to enable embedding of documents to your invoices.

Show Header on / Show Footer on Want your header and footer to appear on all pages of the invoice, or the first/last page only? Select the desired setting here.

Want your header and footer to appear on all pages of the invoice, or the first page only? Select the desired setting here.

Once you've selected all your settings, click the green Save button and the new settings will apply.

Customize
"""""""""

If you have design experience, you can customize the invoice exactly as you want, beyond the options provided by Invoice Ninja. To work on the invoice document, click the blue Customize button. You'll be redirected to the programming page, where you'll have the option of working on the invoice Content, Styles, Defaults, Margins, Header and Footer layout. Simply click on the relevant tab and work away. The design changes you make will be reflected in the sample PDF invoice on the right side of the page.

To change the invoice design template, select the desired design from the drop down menu at the bottom left of the page.

To save your customized changes, click the green Save button at the bottom of the page.

To cancel your customized changes, click the gray Cancel button at the bottom of the page.

Need help with your customized coding? Click the gray Help button at the bottom of the page.