We’re currently in the process of building a new invoice gallery with access to a bunch of predefined templates. Here’s a sneak preview from our development system:
If there’s one thing we’ve learnt over the years is that people love to customise, and they do so in ways that we are never quite able to second guess. With the invoice styling we’ve always just bolted on options in a very ad-hoc fashion. We want to try and avoid the perils of feature fatigue so a slightly different approach was in order.
In addition to these predefined templates we will also provide more advanced users access to an inline CSS editor, so you can customise until your heart is content.
Obviously CSS is not something that will be accessible to all users, but it does provide a good solid foundation for customising templates. Also simple colour changes, positioning and dimensioning is not to difficult to grasp even for novice users.
We plan to beta test these new tools in the forthcoming weeks. Feel free to register your interest here and I’ll update you when the tools are available.
The new invoice style gallery is now available for beta testers. @Healthpay and @BanksyBoy I have enabled this feature on each of your accounts. You can access the gallery in any invoice preview screen by clicking the green button in the top left.
You can customise any of the predefined styles by selecting the orange “Customise this style” button.
Yes the link to the help file is a work in progress at the moment… We should have this ready by tomorrow.
We intend to keep all the general controls in account/invoiceStyle.aspx for the time being, this area will cover all the visibility settings and text based customisation (footers, labels etc). The new gallery and CSS editor provide an additional layer of aesthetic control which allows for a great deal of freedom through the medium of CSS.
Eventually we will allow custom styles to be applied to specific invoices and clients, but we’re a little way off that at the moment. Also some work needs to be done in relation to bringing these two areas together.
Would recommend having client address LHS and sender RHS to fit window envelopes. I have figured this can be tweaked in the CSS which leads me to point…
Where the CSS editor slides stays present whilst scrolling up and down I cannot get to the SAVE button!
Many thanks for the beta access, look forward to tweaking more.
Yes perhaps that should be the default, I’ll have a think about that. Many of these templates won’t work with our own iMail service (which goes into a windowed envelope) mainly due to the address been too high rather than the horizontal position.
What resolution screen are you using, are you saying the “Save” button is never visible?
We’ve fixed the editor window, it should no longer mask the buttons. Let me know if that works for you? I’m working on a guide at the moment to show how various styles can be applied, I’m hoping to have that ready later today.
Yeh I see what you mean…this will definitely require some CSS intervention. I’ve manually fixed this for you, I’m pretty sure this will crop up a lot so I’ll need to have a look at a better solution to this problem. Rectangular logos should be ok but square ones may risk overlapping.
OK, I have had a good play. I admit I did know a bit about CSS before, but I read your CSS editor guide and it is very clearly written and helpful
However the “F12 to peer into the page markup” needs a bit more elaboration, because there is so much on the page in the way of Quickfile menus and buttons etc that the user needs a bit of help to find the invoice bits they want.
I have successfully copied your neon template and amended the colour to my corporate colour, and all is working very well, thanks.
The only template that will work with iMail (without modification) is the “Standard” template. We did consider this when designing the new system and any user sending via iMail will see a warning and a shaded red box as a way to verify that the recipient address position is compatible with iMail.
I will add some clarification to our help file on this matter today, I’ll also add some additional notes on the debugging tools John mentioned. If you’d like to use one of the other styles and retain usage of the iMail service you could always reposition the address. I’m happy to advise on how this can be done.
