Factuur aanpassen met CSS

Geschreven:

Je kunt je lay-out helemaal naar eigen wens aanpassen met behulp van CSS. 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 factuurlay-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 factuurlay-out naar tabje 'Aangepaste CSS'.

Lay-out aanpassen met CSS

Pas je factuur naar eigen hand aan met CSS

Voor wie niet bekend is 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 classes

Adres veld

.invoice_head .to_address

Eigen adres

.invoice_head .from_address

Logo

.invoice_head .invoice_logo

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 (}).

Nuttige codes

We hebben veelvoorkomende aanpassingen hieronder voor je op een rij gezet.

Je bedrijfsgegevens links neerzetten en je klant rechts

.invoice_head .to_address {
  top: 0px;
  right: 0px;
  left: auto;
  text-align: right;
}
.invoice_head .from_address {
  top: 0px;
  right: auto;
  left: 0px;
  text-align: left;
}

Klantgegevens naar boven of naar beneden verplaatsen

.invoice_head .to_address {
  top: 200px;
  right: 0px;
  position: absolute;
  left: 0px;
  text-align: left;
}

"200px" staat voor 200 pixels. Je kan deze waarde naar wens aanpassen. Hoe hoger het getal, hoe lager hij komt te staan. Gebruik de "left" waarde om de klantgegevens naar links of naar rechts te verplaatsen.

De marge op de tweede pagina instellen (zodat de tekst lager begint)

.invoice_page.invoice_page_0 .invoice_content {
  padding-top:15mm
}
.invoice_page .invoice_content {
  padding-top: 70mm;
  padding-bottom: 30mm;
}

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;
}

Logo rechts en bedrijfsgegevens links

.invoice_head .from_address {
  right: auto;
  left: 0px;
}
.logo_holder .invoice_logo {
  right: 15mm;
  left: auto !important;
}

Factuur- en vervaldatum naar links

.invoice_head .invoice_date {
  left: 0px;
  right: auto;
  top: 300px;
}
.invoice_head .invoice_date ul li {
  text-align: left;
}

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!