Je kunt met CSS de layout van facturen en offertes aanpassen. In dit artikel vertellen we hoe je dat zelf kunt doen.
Op de pagina waar je de layout aanpast staat nu een onderdeel genaamd 'CSS'. Als je deze opent zie je een tekstveld waar je door middel van CSS de verschillende onderdelen van de factuur/offerte kunt aanpassen.

Wanneer je deze box geopend hebt kan je in het tekstveld CSS regels invullen. Aan het einde van dit artikel staat een lijst met de verschillende onderdelen (of classes) die onder andere gebruikt kunnen worden in dit tekstveld.

Voorbeeld

Als je bijvoorbeeld de kleur van de afzender wilt aanpassen naar blauw, vul je het volgende in:


Als je vervolgens op update klikt zal de kleur in de template aangepast worden en is de kleur van de afzender in het vervolg blauw (in dit geval). 

Het is ook mogelijk om meerdere onderdelen tegelijk aan te passen of meerdere karakteristieken binnen één onderdeel. Dit doe je simpelweg door meerdere regels in te vullen. Je kunt bestaande CSS overigens ook eenvoudig kopiëren naar dit tekstveld.

Verwijderen van kolommen

Het verwijderen van kolommen gaat op de volgende manier. Als je in jouw factuur/offerte de prijs niet wil laten zien dan voer je het volgende in:

Het gebruik van CSS is wel een vrij geavanceerde optie, dus wil je hier goed gebruik van kunnen maken is het een goed idee om eerst de beginselen van CSS onder de knie te krijgen. Of iemand vragen die hier al verstand van heeft natuurlijk. Hieronder hebben we een aantal links die verwijzen naar de basis van CSS.

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

NB. CSS wordt niet meegenomen op de factuur wanneer je deze omzet naar PDF

Lijst met classes: 

Logo
.logo

Afzender
.sender

Ontvanger
.recipient

Datum & vervaldatum
.dates
.invoicedate
.invoiceduedate

Titel
.title
.title-text

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

Beschrijving
.notes

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

Voorbeeld layout


Onderstaande code is een voorbeeld om een offerte (of factuur) mee op te maken. Onder de code zie je hoe de offerte er met deze CSS styling uit komt te zien. Je kunt deze code gewoon gebruiken en aanpassen waar nodig. Bijvoorbeeld om een bepaalde kleur aan te passen.

/* Logo */
.logo{}

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

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

/* Lijnen uit de tabel */
.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;
}

/* Marge voor en na de inleiding. Na de inleiding een pagina-einde voor de tabel */
.notes {
padding-top: 32px;
padding-bottom: 32px;
page-break-after: always;

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

/* Werkzaamheden invoegen als kop boven de opgesomde kosten */
div.rows:before { content: "Kostenoverzicht"; display: block;
font-size: 20px; font-weight: bold; padding-bottom: 16px;}

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

/* marge links eerste kolom eruit */
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;}

Heeft u het antwoord gevonden?