Via de huisstijleditor in Moneybird is het mogelijk om de opmaak van documenten in je Moneybird-account te bepalen. Wanneer je meer flexibiliteit zoekt kun je gebruik maken van de geavanceerde mogelijkheden door het definiëren van de opmaak via CSS. Deze pagina bevat een uitleg over het toepassen van CSS op je facturen en offertes.

Let op: De ondersteuning van CSS styling op documenten in Moneybird is experimenteel en alleen aan te raden voor geavanceerde gebruikers. Gebruik van CSS is altijd op eigen risico.

De CSS die je invoert heeft invloed op onze basis HTML. Door je CSS te baseren op deze HTML, kunnen wij garanderen dat je opmaak nooit zomaar zal wijzigen. De HTML elementen en CSS classes zullen altijd beschikbaar blijven.

Cascading Style Sheets

CSS staat voor Cascading Style Sheets en is een taal gebruikt op het internet om de opmaak van webpagina's te definiëren. Moneybird maakt het mogelijk om de opmaak van facturen & offertes in Moneybird vast te leggen via CSS. De basisopmaak van documenten is door ons al vastgelegd in CSS, je kunt dit eenvoudig uitbreiden of overschrijven door een opmaak naar keuze. De documentatie op deze pagina bevat enkel specifieke informatie over CSS binnen Moneybird. Voor een basis handleiding CSS verwijzen we je graag door naar w3schools.com.

Media Types

De documenten in Moneybird worden op verschillende manieren weergegeven. Dit reflecteert zich in het media type dat gebruikt wordt in CSS. De volgende mediatypen kunnen voorkomen voor de weergave van documenten:

screen: Gebruikt wanneer een document weergegeven wordt in de webbrowser in de web applicatie. Dit zie je alleen zelf in Moneybird, je klant ziet dit niet.
print: Gebruikt wanneer het document als PDF weergegeven wordt. De online weergave die je klant ziet, is ook de PDF.
print_on_stationery: Gebruikt wanneer het document als PDF weergegeven wordt en gekozen is voor afdrukken op briefpapier. Standaard zullen het logo en het afzenderadres niet worden weergegeven.

Hoewel we er naar streven om de weergave van documenten op het web en in de PDF zoveel mogelijk gelijk te maken, is het helaas onmogelijk om dit te garanderen. Bij het omzetten van de HTML en CSS naar een PDF document kunnen er kleine wijzigingen optreden, het is daarom aan te raden om altijd ook de PDF variant te controleren na het maken van wijzigingen, zodat je zeker weet dat je klant het document met de juiste opmaak krijgt.

Via CSS is het mogelijk om specifieke opmaak voor een media type te bepalen. Bijvoorbeeld, de onderstaande CSS zal alleen op de PDF documenten de grootte van het factuurnummer aanpassen:

@media print,
print-on-stationery {
  .document .document-header h2,
  .document .document-header h2 em {
    font-size: 18px;
  }
}

Pagina opmaak

Documenten in Moneybird worden altijd weergegeven op een A4 pagina. Het is mogelijk om de marges van een pagina aan te passen. In PDF documenten is de marge te benaderen via de @page selector. In de web weergave in Moneybird zelf (niet zichtbaar voor je klant), wordt de A4 pagina weergegeven door een element met de selector .page. Deze div heeft standaard een witte achtergrond. De marge van de pagina kan als volgt worden bepaald:

@page {
  /* PDF */
  margin: 50px 50px 50px 50px;
}

.page {
  /* Web */
  margin: 50px 50px 50px 50px;
}

Elementen op de achtergrond

Alle elementen op de documenten zijn benaderbaar via selectoren in CSS. De HTML van een factuur en offerte verschillen minimaal, enkel in de teksten onder en boven de tabel op het document. In de HTML code voor de factuur en voor de offerte is het mogelijk om de CSS selectors af te lezen die gebruikt kunnen worden. Een voorbeeld:

/* Vergroot de totalen in de tabel op facturen */
.invoice table.document-details td.emphasize {
  font-size: 24px;
}/* Verplaatst het afzenderadres naar beneden op offertes */
.document.estimate div.header .sender-address {
  top: 30px;
}/* Verplaatst het adres van de ontvanger naar rechts op facturen en offertes */
.document div.header.address-left div.document-recipient {
  left: 50px;
}

Paginanummering

Als je een langere factuur of offerte maakt die niet op één pagina past, wordt er automatisch een tweede pagina toegevoegd. Daarnaast wordt er onderaan alle pagina's een paginanummering toegevoegd. Als je de opmaak van de paginanummering wilt aanpassen, kan dat. Een voorbeeld:

/* Pas de lettergrootte van de paginanummering aan */
@page {
  @bottom {
    font-size: 12pt;
  }
}

Fonts

In Moneybird kun je kiezen uit een aantal fonts. Het is alleen mogelijk om deze voorgedefinieerde fonts te gebruiken, het is niet mogelijk om externe fonts in te laden.

Afbeeldingen gebruiken in CSS

Wanneer je extra afbeeldingen toe wilt voegen aan je facturen, kun je dit via CSS instellen. Tijdens het genereren van de PDF documenten is het niet mogelijk om afbeeldingen op te halen vanaf externe servers. Om het toch mogelijk te maken om extra afbeeldingen te gebruiken op de factuur, kun je in Moneybird afbeeldingen uploaden.

Na het uploaden zal een speciale CSS code weergegeven worden: @include background(123456789, "no-repeat center center"). Voeg deze code toe bij het element waar je de afbeelding wil tonen. De code zal vertaald worden naar background: white url(...) no-repeat center center;. Hierbij zal de url verwijzen naar de correcte afbeelding in je administratie.

Let er op dat je de speciale CSS code in een element zet, bijvoorbeeld op de achtergrond van de PDF:

/* Voeg afbeelding toe aan PDF */
@page {
  @include background(123456789, "no-repeat center center");
}

Als je de afbeelding niet in een element zet, zul je in de PDF een foutmelding te zien krijgen: 'Properties are only allowed within rules, directives, mixin includes, or other properties.'