Via de layout editor bieden we al uitgebreide mogelijkheden voor het personaliseren van documentlayouts. Als je echter nog meer specifieke aanpassingen wilt doorvoeren, kun je dit doen met behulp van de CSS-editor, helemaal onderaan de pagina.
Om je op weg te helpen, hebben we alle aanpasbare klassen voor je opgesomd in een overzichtelijke lijst, inclusief een voorbeeld van een mogelijke aanpassing. Voor een volledig inzicht in de HTML-structuur kun je een export van een layout nemen en het template.html-bestand openen.
| Klasse | Beschrijving | Voorbeeld aanpassing |
|---|---|---|
| .body | Algemene stijl van de pagina. | .body { background-color: #f9f9f9; } |
| .document-content | Hoofdcontainer voor de inhoud van het document. | .document-content { padding: 20px; } |
| .header | De koptekst. | .header { background-color: #f1f1f1; } |
| .background | Achtergrondinstellingen voor het document. | .background { opacity: 0.5; } |
| .document_title | De documenttitel. | .document_title { color: #333; font-size: 1.5em; } |
| .client_details | De klantgegevens. | .client_details { margin-left: 50px; } |
| .client_delivery_address | Het leveringsadres van de klant. | .client_delivery_address { font-style: italic; } |
| .company_name | De bedrijfsnaam. | .company_name { font-weight: bold; } |
| .documentdata | Hoofdcontainer voor documentgegevens. | .documentdata { padding: 20px; } |
| .table | Algemene stijl voor tabellen. | .table { border: 1px solid #ccc; } |
| .totals-table | De totalentabel. | .totals-table { background-color: #f8f8f8; } |
| .notes | Opmerkingen onderaan het document. | .notes { font-size: 0.9em; color: #666; } |
| .footer | De voettekst. | .footer { position: fixed; bottom: 0; } |
| .signature | De handtekeningsectie. | .signature { border: 2px dashed #000; } |
| .markdown-body | De opmaak van tekst in Markdown. | .markdown-body h1 { font-size: 2em; } |
Voorbeeld
We willen de documenttitel aanpassen zodat deze gecentreerd wordt weergegeven en een groter lettertype krijgt, waardoor het duidelijker wordt om welk document het gaat.
Door deze CSS-code toe te passen op de layout kunnen we de gewenste wijzigingen doorvoeren.
.document_title {
font-size: 88px; /* Lettergrootte aanpassen */
font-weight: bold; /* Dikke tekst */
color: white; /* Tekstkleur zwart */
text-align: center; /* Tekst centreren */
margin: -50px 80px 0px 0px ; /* Pas de marges aan indien nodig */
}Nadat de wijzigingen zijn doorgevoerd en opgeslagen, kun je via het afdrukvoorbeeld bekijken wat het resultaat is.
