You can adjust the layout of invoices and quotes with CSS. In this article we explain how you can do it by yourself.

Go to Settings – Invoices and choose ‘New Layout’. A new page opens with an example invoice.

On the page where you adjust the layout there is a section called 'CSS'. If you open this, you will see an empty text field where you can adjust the various parts of the invoice / quotation using CSS. In this box you can enter CSS rules. At the end of this article there is a list with various parts (or classes) that can be used in the CSS field. 

How does CSS works?

As said before, with CSS is it possible to change the layout of an invoice. For example: if you want to change the colour of the sender to blue, enter the following: 

.sender { color: blue; }.

If you click op “update” the colour in the template will be adjusted and the sender’s colour will be blue.  

It is also possible to adjust multiple components at the same time or multiple characteristics within one component. You can do this simply by entering multiple lines. You can also easily copy existing CSS to this text field.

Delete columns

It is possible to remove certrain columns. For example, if you don’t want to show the price in your invoice/quotation, enter the following: 

.price-label {
Color: white;
}

.price-value {
Color: white;
}

The use of CSS is a fairly advanced option, so if you want to make good use of it, it is a good idea to first learn the basics of CSS. Or ask someone who already understands CSS. Below we have a number of links that refer to the basics of CSS. For those who decide to learn CSS: Good luck! 

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS https://www.w3schools.com/css/default.asp

CSS is not included on the invoice when you convert this to PDF. It will only be shown on your webinvoice. 

List with classes

Sender
.sender

Recipient
.recipient

Dates & Invoice due date
.dates
.invoicedate
.invoiceduedate

Title
.title
.title-text

Characteristics
.invoicenumber-label
.invoicenumber-value
.reference-label
.reference-value
.customerrelation-label
.customerrelation-value
.customervatnumber-label
.customervatnumber-value

Notes
.notes

Lines .invoice-lines
.description-label
.description-value
.amount-label
.amount-value
.price-label
.price-value
.total-label
.label-value
.vat-label
.vat-value
.sub-total-label
.sub-total-value
.total-vat-label
.total-vat-value
.total-incl-vat-label
.total-incl-vat-value

Example layout

The code below is an example for creating a quotation (or invoice). Under the code you can see how the quote will look with this CSS styling. You can simply use this code and adjust as necessary. For example, to adjust a certain colour.

/* Logo */
.logo{}

/* Sender */
.sender {font-size: 10px !important; color: rgb(40, 182, 197);}

/* Title */
h2 {font-size: 20px !important; font-weight: bold !important;}
h2 {display:block; padding-bottom: 20px;}

/* Lines from the table */
.invoicelayout0 .rows-table thead th {
border-bottom: 0px;
padding-bottom: 15px;
}
.invoicelayout0 .rows-table .top-border {
border-top-width: 0px;
}
tbody tr td {
padding-bottom: 26px !important;
}

tbody tr.tax td,
tbody tr.subtotal td {
padding-bottom: inherit !important;
}

/* Margin before and after the introduction. After the introduction, a page break for the table */
.notes {
padding-top: 32px;
padding-bottom: 32px;
page-break-after: always;

}
.notes:after {
content: "\A \A Sincerely, \A Aad Wagner";
white-space: pre;
}

/* Insert work as a heading above the listed costs */
div.rows:before { content: "Cost overview"; display: block;
font-size: 20px; font-weight: bold; padding-bottom: 16px;}

table thead:before {content: "" !important; padding-bottom: 16px;display: block; white-space:pre;}

/* margin left first column out */
td, th {padding-left: 0px !important;}
td:last-of-type {padding-right: 0;}

th {font-weight: normal; font-size: 10px; text-transform: uppercase; color: rgb(40, 182, 197);}

.vat-label, .vat-value {
padding-right: 0px !important;}

.sub-total-label, .sub-total-value {padding-top: 20px !important;}

.total-incl-vat-label, .total-incl-vat-value {padding-top: 1em !important; font-weight: bold; font-size: 16px;}

.description-value {width: 60%; padding-bottom: 20px;}

td {color: rgb(153, 153, 153);}
td + td {color: rgb(0, 0, 0);}

td:first-line {margin-bottom: 15px; color: rgb(0, 0, 0);}
td + td:first-line,
tr.subtotal > td:first-line,
tr.tax > td:first-line {font-weight: inherit; font-size: inherit; color: rgb(0, 0, 0);}

.footer {background-color: white;border-top:0px !important; margin-top:0px; padding-top:0px; border-top:0;}

Did this answer your question?