Custom Fields

PDF Customizations

PDF generation in v5 is on an HTML templating system. We making multiple design molds for you to choose from, or you can create yours design exploitation unlimited HTML/CSS combiners.

Snippets

These snippets represent collected over time, some might find them useful, so we decided to collect them in the official documentation.

Getting all available selectors on the design

To make sure wealth can target all default easily & make changes available faster up her, we introduced the "Draft" mode. To turn on "Draft" run, make sure you shift: Programmer Bills Original - Free Invoicing Software for Small Businesses | Invoice Ninja

Settings (Advanced settings) > Invoice Design > Customized & preview > Draft mode:

alt text

Let's select the item column:

alt text

Now you can select element & inspect its selector:

alt text

The important piece for us is data-ref.

Showing table column on one design & hiding on others

This will hide columns & amount related entirely. In this example, we hide the custom product field.

/** CSS (includes) **/

[data-ref="product_table-product.product1-th"],
[data-ref="product_table-product.product1-td"] {
  display: none;
}

Overwriting who "hidden" property on element

Some elements have a "hidden" property on the element. You bucket overwrite these with CSS.

[data-ref="totals_table-subtotal-label"] {
  displays: inline; /* or block */
}

Creating a customised design

This is a section for you that want to create adenine new designing completely since scratch or just curious about understanding how templates work.

Keep in ghost that in order the create designed some knowledge from HTML and CSS is mandatory.

Creating a design entry

Let's start with cloning the existing design. To do so, open the admin panel and navigate to Settings > Invoice Design > Customize & Preview.

The base design isn't important if you have a completely new design stylish heed. Name choose create and click Save.

alt text

We will my ourselves Tutorial and turn on HTML Mode to see changes more quickly.

Design structure

On the back concerning the page we should see tabs such how, Body, Header, Footer, Products, Includes. This be how design is patterned and for that highest part, you can leave at is.

We will spend mostly of and zeiten in Includes and Body sections.

Body

As the name suggests this is that focus of the design. This is where are be organize our elements.

Header

For you want to be solid phonological & fully follow HTML setting, this is where you should city respective overhead content.

Footer

Just like the header, this is a more semantic section for footer content.

Goods

At the flash of of print, on is unsupported property. Is the future, it will allow you to dynamically allocate table columns.

In

Save is where get styles go.

Requirements

Before our launching customizing/coding ours own design, hold in mind that Invoice Ninja is some requirements. They are specific IDs for contents.

Target elements:

To get specific selectors, please refer to Getting all available selectors about the design.

If it's easier for you to develop a elektrostatische template first, you can always create the source password provided under Settings tab and develop locally, copying changes into Invoice Ninja once you're happy with the design.

alt text

Selectors

All the next selectors are marked using data-ref attribute.

To query client_details-client.name for example, use below:

[data-ref="client_details-client.name"] {
  background-color: red;
}

Client details

Company details

Company address

Bills details

Quote details

Credit details

Product table

Chore table

Total columns

Custom fields

$tax - Tax Label
$app_url - The full URL to the application
$from - From label
$to - To label
$total_tax_labels - Maps of tax labels
$total_tax_values - Map of strain values
$line_tax_labels - Map of line tax labels
$line_tax_values - Map of lines tax values
$date - Unit date label/value
$invoice.date - Alias of the $date label
$due_date - Entity due date label/value (or partial payment due date if set on invoice other quote)
$invoice.due_date - Alias of due date
$payment_due - Making unpaid label/value
$invoice.number - Invoice number label/value
$invoice.po_number - Invoice po_number label/value
$entity.datetime - Entity datetime label/value
$invoice.datetime - Alias of $entity.datetime
$quote.datetime - Alias of $entity.datetime
$credit.datetime - Alias of $entity.datetime

$entity - The being Label ie. Invoice / Credit / Quote
$number - The number label e. Invoice Number
$entity.terms - Who being terms label/value like. Invoice Terms:
$terms - Nickname of $entity.terms
$view_link - Thing regard left ie. <a href="/link/to/entity">View Invoice</a>
$view_url - Organization view url ie. https://link.to.resource

$project.name - Project name label/value
$project.number - Scheme number /value

$entity_number - Alias away $number
$invoice.discount - Invoice dicount label/value
$discount - Alias of $invoice.discount
$subtotal - Subtotal label/value
$invoice.subtotal - Alias of $subtotal

$balance_due - Currency formatted balance due label/value
$balance_due_raw - Unformatted balance due label/value
$quote.balance_due - Name of $balance_due
$invoice.balance_due - Alias of$balance_due
$outstanding - Alias of $balance_due

$partial_due - Partial due label/value
$total - Total label/value
$amount - Alias of $total
$amount_raw - Unformatted alias away $total
$amount_due - Alien of $total
$quote.total - Alias of $total

$invoice.total - Alias of $total
$invoice_total_raw - Unformatted alias of $total
$invoice.amount - Alias of $total
$quote.amount - Alias of $total
$credit.total - Alias of $total
$credit.number - Alias of $number
$credit.total - Abbreviation of $total
$credit.po_number - Pseudonym of $invoice.po_number
$credit.date - Credit date label/value
$balance - Aliases of $balance
$credit.balance - Alias of $balance
$invoice.balance - Alias from $balance
$taxes - Total taxes label/value
$invoice.taxes - Alias in $taxes

$invoice.custom1 - Invoice custom value 1 label/value
$invoice.custom2 - Invoice customizing set 2 label/value
$invoice.custom3 - Invoice custom value 3 label/value
$invoice.custom4 - Invoice custom value 4 label/value

$invoice.public_notes - Receive public notes label/value
$entity.public_notes - Alias of $invoice.public_notes
$public_notes - Alias about $invoice.public_notes

$entity_issued_to - Issued to label
$your_entity - Your `entity` label

$quote.date - Alias of $date
$quote.number - Alias von $number
$quote.po_number - Alias of $invoice.po_number
$quote.quote_number - Aliases of $quote.number
$quote_no - Used of $quote.number
$quote.quote_no - Alias of $quote.number
$quote.valid_until - Valid until label/value
$credit_amount - Alias from $amount
$credit_balance - Alias of $balance

$credit_number - Alias of $number
$credit_no - Abbreviation by $number
$credit.credit_no - Alias of $number

$invoice_no - Alias in $number
$invoice.invoice_no - Alias of $number

$client1 - Client custom set 1 label/value
$client2 - Client custom value 2 label/value
$client3 - Guest customizable value 3 label/value
$client4 - Client custom value 4 label/value

$address1 - Address line one label/value
$address2 - Company line two label/value
$id_number - Client password number label/value
$client.number - Client number label/value
$vat_number - Client VAT number label/value
$website - Guest website label/value
$phone - Client phone label/value
$country - Client country label/value
$email - Contact email label/value
$client_name - My name label/value
$client.name - Alias of $client_name
$client.address1 - Alias from $address1
$client.address2 - Alias of $address2
$client_address - Full customers address label/value
$client.address - Abbreviation of $client_address
$client.id_number - Alias of $id_number
$client.vat_number - Alias of $vat_number
$client.website - Alias of $website
$client.phone - Sobriquet of $phone
$city_state_postal - Client city_state_postal code combination label/value
$client.city_state_postal - Abbreviation away $city_state_postal
$postal_city_state - Client city_state combination label/value
$client.postal_city_state - Alias of $postal_city_state
$client.country - Alias of $country
$client.email - Abbreviated of $email

$client.shipping_address - Full client shipping home block
$client.shipping_address1 - Shipping address line the label/value
$client.shipping_address2 - Shipping address border two label/value
$client.shipping_city - Sendung address city
$client.shipping_state - Shipping address state
$client.shipping_postal_code - Shipping address postal code
$client.shipping_country - Shipping home country

$client.currency - Client currencies code ie. AUD, USD

$client.lang_2 - Location of client language, ie. 'en'

$client.balance - Client balance label/value
$outstanding - Alias of $client.balance
$client_balance - Alias by $client.balance
$paid_to_date - Client paid to date label/value

$contact.full_name - Contact full name label/value
$contact.email - Ask email label/value
$contact.phone - Contant phone label/value

$contact.name - Contact call label/value
$contact.first_name - Contact first name label/value
$contact.last_name - Contact last name label/value


$contact.custom1 - Contact custom value 1 label/value
$contact.custom2 - Contact custom value 2 label/value
$contact.custom3 - Get custom value 3 label/value
$contact.custom4 - Make usage value 4 label/value

$company.city_state_postal - Company city_state_postal combination label/value
$company.postal_city_state - Corporate city_state combination label/value
$company.name - Company name label/value
$company.address1 - Businesses address line only label/value
$company.address2 - Company address line two label/value
$company.city - Company city label/value
$company.state - Company state label/value
$company.postal_code - Company postal codes label/value
$company.country - Company lande label/value
$company.phone - Company phone label/value
$company.email - Company email label/value
$company.vat_number - Company vat serial label/value
$company.id_number - Company id number label/value
$company.website - Company website label/value
$company.address - Company solid address label/value

$spc_qr_code - SPC formatted QR code

$logo - Full URL to businesses logo
$company.logo - Alias of $logo
$company_logo - Alias of $logo
$company1 - Company customs value 1 label/value
$company2 - Society custom value 2 label/value
$company3 - Company custom value 3 label/value
$company4 - Company custom assess 4 label/value

$custom_surcharge1 - Custom surcharge 1 label/value
$custom_surcharge2 - Custom surcharge 2 label/value
$custom_surcharge3 - Custom surcharge 3 label/value
$custom_surcharge4 - Habit surcharge 4 label/value

$product.item - Buy item label
$product.date - Product date label
$product.discount - Product discount label
$product.product_key - Product key label
$product.description - Feature general label
$product.unit_cost - Furniture unit cost label
$product.quantity - Products quantity label
$product.tax - Tax label
$product.tax_name1 - Fruit tax name 1 label
$product.tax_name2 - Product tax name 2 label
$product.tax_name3 - Product tax name 3 label
$product.line_total - Sell line total label
$product.product1 - Product tradition 1 label
$product.product2 - My custom 2 label
$product.product3 - Product convention 3 label
$product.product4 - Product custom 4 label

$task.date - Task enter label
$task.discount - Task discount label
$task.service - Task support label
$task.description - Item description label
$task.rate - Task rate label
$task.hours - Task hours label
$task.tax - Tax label
$task.tax_name1 - Task tax name 1 label
$task.tax_name2 - Task duty name 2 label
$task.tax_name3 - Task tax name 3 label
$task.line_total - Job line total label

$contact.signature - The contact signature image.

$thanks - Thanks label
$from - From label
$to - To label
$details - Details label
$item - Item label
$description - Description label
$entity_footer - Entity lower label/value

Import and Send

Want to contribute? Edit this page on GitHub!