WhatsApp Contact
UX verbeteraar Around Seven uit Amersfoort. Ontwerpt voor jouw klanten.

Informer layout facturen aanpassen

19-05-2017, Algemeen

Informer layout facturen aanpassen

Ik was jaren klant bij Moneybird. Op zich naar tevredenheid. Strakke vormgeving, fijne interface en er rolden keurige facturen en offertes uit.
Op een gegeven moment kwam mijn boekhouder met de vraag of ik niet eens Informer wilde proberen. Dit kwam tegelijk met het moment dat Erna (mijn vrouw) zelf meer de administratie zou gaan doen. Met Informer kan een boekhouder direct meekijken en kan Erna al veel voorwerk doen (zoals het wegboeken van alle inkoop en verkoop). Ik probeer graag nieuwe dingen uit dus zei vrijwel meteen ja. Ik had wel even rondgeklikt op de site van Informer en het zag er allemaal behoorlijk compleet uit.

Inmiddels staat mijn administratie vrijwel volledig in Informer. Daar zijn best wat uurtjes in gaan zitten. En toen kwam het moment dat ik een eerste offerte in Informer ging maken..
De layout viel me tegen. Ik was gewend aan de strakke opmaak van Moneybird en de facturen en offertes van Informer zien er simpelweg een stukje minder strak uit. Ze bieden wel templates maar die vond ik eigenlijk allemaal lelijk. Ik wilde gewoon mijn Moneybird opmaak!

Opmaakmogelijkheden Informer Offertes en Facturen

Nou heeft Informer wel degelijk een aantal opties om de layout van de offertes en de facturen aan te passen.

Zo kan je via ‘Opmaak’ (je komt daar via Instellingen > Layout Editor > Offerte/Factuur) een lettertype instellen, de lettergrootte (van een deel van de offerte), de bedrijfsinformatie en nog wat opties.

En je kan zoals gezegd een Template kiezen.

Ten slotte heb je nog een Custom CSS mogelijkheid, waarmee je de styling van de offerte/factuur kan aanpassen als je kennis hebt van CSS.

Informer Facturen en offertes in de stijl van Moneybird

Ik wilde graag mijn facturen en offertes in de stijl van Moneybird. Ik zocht in de templates maar vond daar helaas geen Moneybird template. Daarna ging ik aan de slag met het schuiven van de blokken (je kan het adres, de afzender en het logo verslepen en zo de positie bepalen). Helaas ontbreekt een fatsoenlijke preview mogelijkheid dus ik maakte een testfactuur en offerte om het resultaat steeds te checken. Al snel bleek dat de positionering niet 1 op 1 overeenkwam met wat ik verwachtte.

Dus ging ik aan de slag met de Custom CSS optie. Mijn kennis van CSS is voldoende om een site naar wens te stylen, dan moet een offerte/factuur toch ook lukken. In de help documenten van Informer vond ik gelukkig de opbouw van de HTML. Gek genoeg bleven er een aantal dingen scheef staan. Zonder de css die standaard wordt ingeladen kwam ik er niet goed uit. Dus ik nam contact op met de helpdesk:

Ik zou graag meer controle hebben over de styling. Ik heb de optie om css aan te passen gevonden. Ik heb ook de HTML gevonden. Maar ik mis de default css. Zou ik die kunnen krijgen? Dan kan ik ook makkelijker aanpassingen doen. Nu tast ik een beetje in het duister wat ik moet overriden.

Al redelijk snel volgde het antwoord:

Dit zal ik even voor u aan de ontwikkelaar moeten vragen ik stuur u een bericht zodra ik meer weet

Ik stuurde voor de zekerheid nog even dit berichtje:

Nog een toevoeging. Ik kom van Moneybird af. Zou mooi zijn als jullie hun ontwerp ook in een template zouden gieten. Dan zou ik in 1 klap van alle problemen af zijn. En jullie kan het helpen om het voor overstappers aantrekkelijker te maken.

Informer kwam met de vraag of ik een voorbeeld Factuur wilde sturen. Meteen gedaan natuurlijk en vol spanning gewacht tot ze met een antwoord kwamen op mijn eerste vraag. Helaas was het antwoord niet helemaal zoals gehoopt:

Zoals hij nu staat onder instellingen -> lay out editor is hoe hij er uit kan komen te zien.
Helaas zijn meer opties niet mogelijk.

De preview van de layout editor is vrij slecht. Die geeft niet exact weer hoe de offerte/factuur er uiteindelijk uit komt te zien. Je zal dus moeten testen met een test facturen en offertes. Dus ik kwam niet veel verder.

Toch gelukt. Soort van.

Ik moet de komende dagen een aantal facturen en offertes versturen. En ik wil dat die er gewoon netjes uitzien. Dus… Ik ben vanmiddag druk bezig geweest met de Custom CSS optie en heb een stylesheet gemaakt die mijn facturen en offertes in ieder geval meer in de buurt brengen van de opmaak van de Moneybird facturen en offertes.

Dit zijn de stappen die je moet nemen als je dit ook wilt.

Stap 1. Opmaak

Informer facturen in moneybird stijl. Stap 1

Ik heb gekozen (bij gebrek aan beter) voor Calibri in 9pt. De bedrijfsinformatie lijn ik links uit en ik heb een <span> met de class header-bold om de bedrijfsnaam heen. Ook heb ik wat gegevens verwijderd en een entertje gezet.

Stap 2. Schuiven maar!

Informer facturen in Moneybird stijl. stap 2

Zet het logo helemaal linksboven in de hoek.
Zet het adres van de ontvanger helemaal links. Bepaal zelf hoe laag je het wil hebben t.o.v het logo. Het inspringen van dit adres regelen we later met css.
Zet de bedrijfsgegevens helemaal rechtsboven. Wel opletten. Je zal hem iets naar links moeten trekken anders gaat Informer sommige gegevens over meerdere regels tonen (IBAN bijvoorbeeld).

Stap 3. Custom CSS

Informer Custom CSS Moneybird facturen

Voeg ten slotte deze css toe in de Custom CSS editor:


.document {
padding: 40px;
padding-right: 30px;
line-height: 1.9em;
}
.document-header {
margin-bottom: 60px;
}
.document-recipient {
margin-left: 105px;
margin-top: 15px;
line-height: 1.8em;
}
.document-logo {
margin-left: 80px;
margin-top: 55px;
}
.document-details {
padding-left: 0;
margin-left: 0;
}
.document-information {
margin-left: 0;
}
.document-sender {
margin-right: 80px;
margin-top: 55px;
line-height: 1.8em;
}
.document-details-lines {
width: 620px;
}
.document-details-lines tbody td {
line-height: 2em;
border-bottom: 1px solid #EEE;

}
.header-bold {
font-weight: bold;
}
.document-title {
font-size: 26px;
font-weight: 300;
}
.document-footer
{
margin-top: 80px;
}

Als het goed is heb je vervolgens dit:

Missie geslaagd.

Wist je trouwens dat…

  • Facturen in kleur eerder betaald worden
  • Mannen eerder geneigd zijn te kopen als de prijs in ’t rood staat
  • Jouw BTW nummer en KVK nummer op je factuur moeten staan
  • Ik een hekel heb aan het stylen van facturen maar je wel graag help met het ontwerpen van optimale gebruikerservaringen

Ontvang tips en maak kans op het boek Online Invloed

Kan jij wel wat kennis gebruiken? Ik geef het boek Online invloed gratis weg.  Het enige wat ik van je vraag is even aangeven dat ik je mag mailen met tips. Je ontvangt dan op onregelmatige basis  UX / Design / Conversie tips en ik betrek je graag in korte gebruikersonderzoeken van mijn eigen projecten (hoef je niet aan mee te doen, mag).

Onder de inschrijvers verloot ik het boek, als bedankje voor jullie support.

Vond je dit leuk? Geef een applausje!

Lees lekker
verder.
Je kan me inhuren voor UX projecten of specifiek Visual Design. Voor huisstijl projecten heb ik beperkt ruimte. Ik word ingehuurd door diverse internetbureaus en bedrijven die graag op UX vlak de concurrentie voor willen blijven.
UX verbeteraar Around Seven uit Amersfoort