Bij TimeChimp ontwikkelen we niet om het ontwikkelen. We werken graag samen met de mensen die onze tool elke dag gebruiken. Daarom werken we met een feedback-pagina waar onze gebruikers hun ideeën kunnen achterlaten wat betreft nieuwe functionaliteiten. Ook kan je daar stemmen op al ingediende ideeën. Daar wordt gretig gebruikt van gemaakt en één van de items die veel stemmen kreeg, was het aanpassen van de offerte en factuur sjabloon. Daar zijn we dus mee aan de slag gegaan en vanaf vandaag kan je zelf aan de slag met het ‘customizen’ van je factuur of offerte! Hoe je dat kunt doen lees je in dit blog.
Offerte/factuur lay-out aanpassen
We hebben een aantal opties toegevoegd waarmee je jouw factuur/offerte eenvoudig kunt aanpassen. Zo kan je nu bijvoorbeeld het veld met daarin de afzender makkelijk aanpassen.
Afzender aanpassen
Verder hebben we nu een nieuw drop-down menu waarin je al je factuur lay-outs kan zien en selecteren. Zowel de lay-outs die wij standaard aanleveren als de lay-outs die je zelf hebt opgemaakt. Deze vind je onder het tandwiel en vervolgens ‘Instellingen’ -> ‘Facturen/Offertes’ -> ‘Standaard layout’.
Kies eenvoudig een factuur sjabloon uit
Hier vind je ook de opties om een nieuwe lay-out te creëren of een bestaande offerte of factuur lay-out aan te passen. Handig natuurlijk, want nu hoef je maar één keer een lay-out te maken en kan je die vervolgens blijven gebruiken. Of je creëert meerdere lay-outs als je bijvoorbeeld per klant/project een andere opmaak wilt meegeven.
Layout maken of bewerken
Layout facturen/offertes aanpassen met CSS
Mocht bovenstaande niet voldoende zijn, bieden we ook de optie om de factuur lay-out of offerte lay-out met CSS aan te passen. Daarmee kun je nog veel verder gaan wat betreft het customizen van je lay-out. Let wel, dit vereist enige kennis van CSS.
Je kunt met CSS de lay-out van facturen en offertes aanpassen. Op de pagina waar je de offerte/ factuur lay-out aanpast staat nu een onderdeel genaamd ‘CSS’. Als je deze opent zie je een tekstveld waar je door middel van CSS de verschillende onderdelen van de factuur/offerte kunt aanpassen.
CSS tekstveld
Wanneer je deze box geopend hebt, kun je in het tekstveld CSS regels invullen. Aan het einde van dit artikel staat een lijst met de verschillende onderdelen (of classes) die onder andere gebruikt kunnen worden in dit tekstveld.
Voorbeeld van een factuur sjabloon
Als je bijvoorbeeld de kleur van de afzender wilt aanpassen naar blauw in je offerte of factuur sjabloon, vul je het volgende in: .sender { color: blue; }. Als je vervolgens op update klikt zal de kleur in de template aangepast worden en is de kleur van de afzender in het vervolg blauw (in dit geval).
Kleur afzender aanpassen
Het is ook mogelijk om meerdere onderdelen tegelijk aan te passen of meerdere karakteristieken binnen één onderdeel in de factuur lay-out. Dit doe je simpelweg door meerdere regels in te vullen. Je kunt bestaande CSS overigens ook eenvoudig kopiëren naar dit tekstveld.
Meerdere onderdelen aanpassen
Verwijderen van kolommen
Het verwijderen van kolommen in het factuur sjabloon gaat op de onderstaande manier. Deze regels kan je bijvoorbeeld gebruiken als je in jouw factuur/offerte de prijs niet wil laten zien.
Kolommen verwijderen
Het gebruik van CSS is wel een vrij geavanceerde optie, dus wil je hier goed gebruik van kunnen maken, dan is het een goed idee om eerst de beginselen van CSS onder de knie te krijgen. Of iemand vragen die hier al verstand van heeft natuurlijk. Hieronder hebben we een aantal links die verwijzen naar de basis van CSS.
Voor een lijst met classes die je kan gebruiken ga je naar ons help-artikel.
Feedback
Graag horen we jullie bevindingen op het gebied van de layout van je factuur/offerte aanpassen. Werkt dit goed voor je? Mis je bepaalde zaken? Alle feedback is welkom! Je kunt je feedback doorgeven via onze chat, mail (support@timechimp.com) of onze feedback-pagina.
We zien jullie reacties graag tegemoet!
Werk je met teams? Lees dan ons vorige blog waar we uitgebreid vertellen over deze nieuwe functionaliteit.
