Factuur aanpassen met CSS

Geschreven:

Je kunt je layout helemaal naar eigen wens tunen met behulp van aangepaste CSS instellingen. Ga naar Instellingen, klik op 'Layout' en klik daar door op de button 'Aanpassen' of als je nog geen layout hebt "Voeg een nieuwe factuur layout toe". Je kunt ook een gemaakte factuur of offerte openen en in het rechtermenu klikken op 'Pas de layout aan'. Ga op je factuur layout naar tabje "Aangepaste CSS"

Layout 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; het opmaken van je website. Met CSS kun je eigenlijk alle stijling elementen die gebruikt worden op de factuur aanpassen. Uiteraard vergt dit wel de nodige kennis van CSS en kunnen we 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 uit te testen.

Voorbeeld classes:

• Adres veld:
.invoice_head .to_address

• Eigen adres:
.invoice_head .from_address

• Logo:
.invoice_head .invoice_logo

Voorbeeld:
Om iets aan te passen aan het adres veld, kopieer je eerst het stukje code voor adres veld naar het invul veld. Nadat de class geselecteerd is, kan je aangeven wat er moet worden aangepast. Doe dit altijd tussen deze brackets: { }. Als we bijvoorbeeld de tekst in het adresveld bold 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 ; en dat je aan het einde van je aanpassingen je de class afsluit met }.

Nuttige codes

We hebben de veel voorkomende 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; (deze kan je variabel aanpassen. Hoe hoger het getal, hoe lager hij komt te staan)
right:0px;
position: absolute;
left: 0px; (Hiermee kan je ook de uitlijning links bepalen)
text-align: left;
}

Afbreken lange bedrijfsnaam van klant
.invoice_head .to_address {
width:350px;
white-space: initial;
}

Paginanummering weglaten
.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;
}

Factuurdatum 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 verval data bold 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 je dan red vervangt door de HEX code die je nodig hebt.

Mocht je er niet uitkomen stuur ons een mailtje en we helpen je verder!