Met InformerOnline kun je de opmaak van je facturen en offertes aanpassen door gebruik te maken van de optie "Custom CSS" Deze optie kun je vinden via instellingen -> layout editor -> custom css.
Het gebruik van de custom css is alleen aan te raden voor gebruikers die ervaring hebben in het gebruik van CSS. Tevens kan de PDF afwijken van het voorbeeld welke wordt weergegeven bij het opmaken van de CSS.
Wat is CSS?
Met CSS kun je de opmaak en vormgeving vanuit één bestand regelen voor een internetpagina. Dit betekent dat je vanuit een style sheet niet alleen bijvoorbeeld de kleur en het lettertype van de tekst kunt bepalen, maar de vormgeving, opmaak en presentatie van je lay-out. Meer informatie over CSS kun je vinden via w3schools.com.
HTML structuur van de lay-out
Hieronder vind je de HTML structuur welke wordt gebruikt bij het opbouwen van de lay-out. Hieruit kun je opmaken welke classes je kunt aanpassen via de CSS.
<div class="document"> <div class="document-header"> <div class="document-recipient"> Sales BV<br> Verkoopstraat 28<br> 3456 AJ Willemstad </div> <div class="document-logo"><img src="logo.jpg" class="logo"></div> <div class="document-sender"> Informer Software BV<br> Laan van Zuid Hoorn 60<br> 2289 DE Rijswijk<br> [email protected]<br> BTW nr.: NL807182072B01<br> KvK nr.: 27155153</div> </div> <div class="document-details"> <div class="document-information"> <h1 class="document-title">Factuur</h1> <div class="document-information-details"> <div class="document-number"> <div class="label">Factuurnummer:</div> <div class="value">20150010</div> </div> <div class="document-date"> <div class="label">Factuurdatum:</div> <div class="value">23-03-2015</div> </div> <div class="document-expiry-date"> <div class="label">Vervaldatum:</div> <div class="value">23-03-2015</div> </div> <div class="document-reference"> <div class="label">Referentie:</div> <div class="value">Geen referentie</div> </div> </div> </div> <div class="document-details-lines"> <table> <thead> <tr> <td width="80"><span>Aantal</span></td> <td><span>Omschrijving</span></td> <td width="90" align="right"><span>Prijs</span></td> <td width="110" align="right"><span>Korting</span>(%)</td> <td width="90" align="right"><span>Totaal</span></td> <td width="80" align="right" class="tax"><span>BTW</span></td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Factuur regel 1</td> <td align="right">50,00</td> <td align="right">0.00</td> <td align="right">50,00</td> <td align="right">21.00</td> </tr> <tr> <td>1</td> <td>Factuur regel 2</td> <td align="right">50,00</td> <td align="right">0.00</td> <td align="right">50,00</td> <td align="right">21.00</td> </tr> </tbody> </table> <div class="subtotals"> <div class="subtotals-discount"> <div class="title">Korting</div> <div class="amount">€ 10,00</div> </div> <div class="subtotals-subtotal"> <div class="title bold">Subtotaal</div> <div class="amount">€ 10,00</div> </div> <div class="subtotals-vat"> <div class="title">BTW over € 50,00</div> <div class="amount">€ 3,00</div> <div class="title">BTW over € 50,00</div> <div class="amount">€ 10,05</div> </div> <div class="subtotals-total"> <div class="title bold">Totaal</div> <div class="amount bold">€ 113,00</div> </div> </div> <div class="clear"></div> </div> </div> <div class="document-comment"> <p>Factuur opmerking</p> </div> <div class="document-footer"> <p>We verzoeken u vriendelijk het bovenstaande bedrag van € 2.662,10 voor 02-01-2013 te voldoen en op onze bankrekening onder vermelding van het factuurnummer 20130010.</p> </div></div>
In de HTML structuur hierboven zie je de class "document", binnen deze class valt de gehele lay-out.
Wil je de tekstkleur aanpassen van de gehele layout kun je de volgende CSS opmaak gebruiken.
.document { color: #999; }Wil je de korting niet tonen als je hier wel gebruik van maakt kun je de volgende CSS opmaak gebruiken.
.subtotals-discount { display: none; }Als je gebruik maakt van een briefpapier met een afbeelding of informatie aan de zijkant kun je de volgende CSS opmaak gebruiken om de lay-out op te schuiven.
.document { padding-left: 100px; }