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.
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.
