Via de huisstijleditor in Moneybird stel je de opmaak van je facturen en offertes in. Wil je meer maatwerk? Dan kun je de geavanceerde CSS-mogelijkheden gebruiken. Dit artikel legt uit hoe je dat doet en welke aanpassingen je kunt maken.
Let op: CSS-styling op documenten in Moneybird is alleen aan te raden voor gevorderde gebruikers.
De CSS die je invoert heeft invloed op de basis HTML van Moneybird. Je kunt de HTML van facturen en offertes hier downloaden:
Wil je eerst experimenteren? Doe dat in een sandbox-administratie. Voor een basis CSS-handleiding verwijzen we naar w3schools.com.
CSS toepassen
Elke CSS-aanpassing voer je op dezelfde manier in:
Ga naar
Instellingen > Huisstijlenen klik op de betreffende huisstijl.Klik in de editor op de knop 'CSS'.
Plak de CSS-code in het tekstveld.
Klik ergens anders op de pagina om een voorbeeld te zien. Je kunt ook een voorbeeld-PDF openen.
Klik onderaan op 'Opslaan'.
De wijziging geldt direct voor conceptfacturen en nieuwe facturen. Verzonden facturen worden niet aangepast.
CSS-grondbeginselen
CSS staat voor Cascading Style Sheets, een taal om de opmaak van webpagina's te bepalen. Moneybird geeft documenten op drie manieren weer, elk met een eigen media type:
screen: webbrowser in Moneybird (alleen zichtbaar voor jou)print: PDF-weergave (wat je klant ontvangt)print_on_stationery: PDF op briefpapier (zonder logo en bedrijfsgegevens)
Hoewel we de weergave in browser en PDF zo gelijk mogelijk houden, kunnen er kleine afwijkingen optreden. Controleer daarom altijd de PDF na het aanpassen van CSS.
Logo, adres en andere elementen verplaatsen
Logo verschuiven
Verplaats het logo naar boven:
div.document div.header .logo { margin-top: -20px;}Verplaats het logo naar links:
div.document div.header .logo { margin-left: -20px;}Pas het getal aan naar wens. Een lager getal (zoals -40) plaatst het logo verder in die richting.
Afzenderadres rechts uitlijnen
div.document div.header .sender-address { text-align: right;}Klantadres hoger weergeven
div.document div.header .document-recipient { margin-top: -20px;}Pas het getal aan: hoe lager het getal (zoals -40), hoe hoger het adres komt te staan.
Bedrijfsnaam klant op twee regels
Als een lange bedrijfsnaam op één regel te breed wordt, kun je de breedte beperken:
div.document div.header .document-recipient { max-width: 300px;}Pas de waarde '300' aan naar wens.
Minder ruimte tussen factuurnummer en klantadres
div.document .document-header { margin-top: 300px;}Hoe lager het getal, hoe hoger het blok met het factuurnummer komt te staan.
Marges, randen en pagina-indeling aanpassen
Witte rand kleiner of groter maken
@page past de marge aan in de PDF, .page doet hetzelfde in de webbrowser:
@page { /* PDF */margin: 50px;}.page {padding: 50px !important;}Pas de waarde aan voor een smallere of bredere rand.
Witregel boven en onder pagina's
Voeg ruimte toe boven en onder elke pagina, behalve de eerste en de laatste:
@page {margin-top: 200px;margin-bottom: 200px;}@page:first {margin-top: unset;margin-bottom: 200px;}@page:last {margin-bottom: unset;}Achtergrond alleen op de eerste pagina
Het is niet mogelijk om voor de eerste pagina een andere achtergrond in te stellen dan voor de volgende pagina's. Wel kun je instellen dat de achtergrond alleen op de eerste pagina verschijnt:
Voeg via de huisstijleditor een CSS-afbeelding toe en klik op de blauwe bestandsnaam om de eerste regel code in het CSS-veld te laten verschijnen.
Voeg daar de onderstaande CSS omheen toe:
@page :first {@include background(123456789123456789, "no-repeat center center"); background-size: contain; }De cijfers staan voor het ID van je CSS-afbeelding.
Offerteregels op een nieuwe pagina beginnen
@media print, print-on-stationery {div.estimate-details {page-break-before: always;}}Dit effect is alleen zichtbaar in de PDF, niet in de Moneybird-weergave.
Kleur, lijnen en tekstopmaak aanpassen
Tekstkleur aanpassen
div.document { color: #FF0000;}div.document .document-header .content h2,div.document .document-header .content h2 em { color: #FF0000;}Vervang `#FF0000` door de gewenste HTML-kleurcode.
Lijnen weghalen
Lijn boven de tabel:
div.document .document-details thead th { border: none;}Lijnen tussen factuurregels:
div.document .document-details tr[class*="ledger_account"] td { border: none;}Onderste lijn tabel:
div.document .document-details tr.subtotal td { border: none;}Lijn boven veld 'Totaal':
div.document .document-details tr.total td { border: none;}Lijn boven betalingsvoorwaarden:
div.document .document-description p { border: none;}
Paginanummers verbergen
@page {@bottom {font-size: 0pt;}}
Voetnoot direct onder de tabel plaatsen
Standaard staat de voetnoot onderaan de pagina. Met deze CSS staat hij direct onder de factuurregels. Als de voetnoot niet op één pagina past, begint het vervolg bovenaan de volgende pagina:
div.document .document-description {float: none;}
Automatische btw-tekst verbergen
div.document .document-details tr[class*="ledger_account"] td.price sup, div.document .document-tax-text {display: none;}
Tekst loopt over de bedrukking van briefpapier
Gebruik je briefpapier met bedrukking boven- of onderaan? Dan kan de factuurtekst over die bedrukking heen lopen. Stel dan via de huisstijl in dat je op eigen briefpapier drukt (Geavanceerd > Eigen briefpapier), en gebruik daarna CSS om ruimte te maken.
Als de bovenkant van je briefpapier bedrukt is:
@media print,print-on-stationery { .document { padding-top: 150px; } div.document .header .document-recipient { margin-top: -150px; } div.document .header .logo { margin-top: -150px; } div.document .header .sender-address { margin-top: -150px; } div.document .document-header { margin-top: 200px; }}Als er aan de onderkant van je briefpapier bedrukt is:
@media print, print-on-stationery { @page { margin-bottom: 150px; @bottom { margin-bottom: 100px; } }}Combineer beide blokken als zowel boven- als onderkant bedrukt zijn.
Afbeeldingen toevoegen via CSS
Moneybird kan bij het genereren van PDF's geen afbeeldingen ophalen van externe servers. Upload de afbeelding daarom eerst in Moneybird. Na het uploaden verschijnt er een speciale CSS-code: `@include background(123456789, "no-repeat center center")`. Gebruik die code bij het gewenste element:
/* Achtergrond van de PDF */@page { @include background(123456789, "no-repeat center center");}Zet de code altijd binnen een element. Buiten een element geeft de PDF de foutmelding: 'Properties are only allowed within rules, directives, mixin includes, or other properties.'
Paginanummering opmaken
Bij langere facturen of offertes voegt Moneybird automatisch een paginanummer toe. De opmaak pas je zo aan:
/* Pas de lettergrootte van de paginanummering aan */@page { @bottom { font-size: 12pt; }}Lettertypen
In Moneybird kies je uit een aantal vaste lettertypen: Lucida Grande, Arial, Helvetica, Verdana, Georgia, Times New Roman en Courier. Het is niet mogelijk om externe lettertypen te uploaden. Dit vanwege beveiligingsrisico's voor de software.
Specifieke elementen op de factuur aanpassen via CSS-selectors
Alle elementen op de documenten zijn bereikbaar via CSS-selectors. Facturen en offertes hebben vrijwel dezelfde HTML-structuur, alleen de teksten boven en onder de tabel verschillen. Een paar voorbeelden:
/* Vergroot de totalen in de tabel op facturen */.invoice table.document-details td.emphasize { font-size: 24px;}/* Verplaats het afzenderadres naar beneden op offertes */.document.estimate div.header .sender-address { top: 30px;}/* Verplaats het adres van de ontvanger naar rechts */.document div.header.address-left div.document-recipient { left: 50px;}