Lay-out - Factuur aanpassen met CSS

Geschreven:

Je kunt je lay-out helemaal naar eigen wens aanpassen met behulp van CSS.

Voordat je met CSS aan de slag gaat, controleer eerst even goed of je jouw aanpassing met de lay-out editer kunt doen: De lay-out van je factuur aanpassen met de lay-out editor

Ga naar Instellingen, klik op 'Lay-out' en klik daar door op de knop 'Aanpassen' of, als je nog geen lay-out hebt, 'Voeg een nieuwe factuur lay-out toe'. Je kunt ook een bestaande factuur of offerte openen en in het rechtermenu klikken op 'Pas de lay-out aan'. Ga op je factuur lay-out naar tabje 'Aangepaste CSS'.

Lay-out aanpassen met CSS

Pas je factuur naar eigen hand aan met CSS

CSS staat voor Cascading Style Sheets en wordt gebruikt voor het opmaken van websites. Met CSS kun je het uiterlijk van alle elementen op de factuur aanpassen. Uiteraard vergt dit wel de nodige kennis van CSS en we kunnen ons goed voorstellen dat je deze niet direct paraat hebt. TIP: Gebruik de element inspector in je browser om de juiste CSS class te vinden en direct jouw CSS te testen.

Voorbeeld CSS

Om iets aan te passen aan het adresveld, kopieer je eerst het stukje code voor het adresveld naar het CSS-invoerveld. Nadat de class gekopieerd is, kan je aangeven wat er moet worden aangepast. Doe dit altijd tussen accolades: { }. Als we bijvoorbeeld de tekst in het adresveld vet willen maken dan ziet de code er als volgt uit:

.invoice_head .to_address {  
  font-weight: bold;
}

Je kunt per class meerdere aanpassingen maken:

.invoice_head .to_address {  
  text-align: left;
  font-weight: bold;
}

Zorg altijd dat elke regel code wordt afgesloten met puntkomma (;) en dat je afsluit met een accolade (}).

Voorbeelden van codes

We hebben voorbeeld-aanpassingen hieronder voor je op een rij gezet.

De prijs per regel verbergen

.invoice_line td:last-of-type {
  display: none;
}

Afbreken lange bedrijfsnaam van klant

.invoice_head .to_address {
  width: 350px;
  white-space: initial;
}

Paginanummering verbergen

.invoice_footer {
  display: none;
}

Achtergrondkleur

.invoice_page .logo_holder {
  background-color: azure;
}

Factuur- en vervaldata vet maken

.invoice_date {
  font-weight: bold;
}

De lijnen van de factuurregels een andere kleur geven

table.lines tr.header th, table.lines tr.subtotal td, table.lines tr.total td {
  border-color: red;
}

Waarbij 'red' vervangen kan worden door de gewenste kleur. Dat kan ook een hexadecimale kleurcode zijn.

Ongeldige CSS

Ongeldige en onveilige CSS-code wordt automatisch verwijderd voordat deze op je factuur wordt toegepast. Daardoor kan het voorkomen dat jouw CSS niet het verwachte effect sorteert. Een voorbeeld van onveilige CSS is het gebruik van url() om bijvoorbeeld externe afbeeldingen en lettertypen te laden. Dit is dus niet mogelijk.

Vragen?

Mocht je er niet uitkomen stuur ons dan een e-mail en we helpen je verder!