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.

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

To customize the invoice design general settings, click on the General Settings tab. You have a number of options for setting changes:

Design Invoice Ninja provides a selection of design templates to choose from. 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.

.. 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.
- **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 terms on your invoice template? To customize the names of the Item, Description, Unit Cost, Quantity, Line Total and Terms on your invoice, enter the desired text in the relevant field.

Invoice Options
^^^^^^^^^^^^^^^

Hide Quantity If your line items are always 1, then you can opt to hide the Quantity field. To hide Quantity, check the box.

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'.

Header/Footer
^^^^^^^^^^^^^

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. You'll be provided with a link to our support forum and to the website of the software provider, where you can explore how to use it.