Huisstijl in MoneyBird via CSS

Via de huisstijl editor 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.

Wat is CSS?

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 of mijnhomepage.nl.

Media types in MoneyBird

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, zowel in de web applicatie als in de online weergave voor de ontvanger.
print: Gebruikt wanneer het document als PDF weergegeven wordt.
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 zowel de HTML variant als de PDF variant te controleren na het maken van wijzigingen.

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 {
  h2 {
    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 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 documenten

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 */
.estimate div.sender_address {
  top: 30px;
}

/* Verplaatst het adres van de ontvanger naar rechts op facturen en offertes */
.document div.document_recipient {
  left: 50px;
}

Bekijk de HTML documenten voor meer informatie: factuur en offerte

Afbeeldingen gebruiken in CSS

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 achtergrondafbeeldingen te gebruiken op de factuur, kun je in MoneyBird afbeeldingen uploaden. Na het uploaden zal een speciale CSS code weergegeven worden: @include background(1, "no-repeat center center"). Voeg deze code toe aan het element dat je een background wilt geven, de code zal vertaald worden naar background: white url(...) no-repeat center center;. Hierbij zal de url verwijzen naar de correcte afbeelding in je account.

Voorbeeld thema's

Om een beeld te geven van de mogelijkheden van de CSS editor, kun je hieronder twee voorbeeld thema's downloaden. Kopieer de CSS in de editor om je de stijling op je eigen documenten door te voeren.

Thema 1:

Bekijk CSS · Download PDF
Thema 2:

Bekijk CSS · Download PDF