Is there a visually responsive way to edit layouts?

Self-Hosted | v5
1

I’d like to edit my invoice design. To tighten things up, as there’s too little content getting onto a page (for my liking) due to excessive padding, font sizes, etc. Using the default designs will often mean invoices that would normally be 1 page, will end up with all their totals, etc., on a second page.

Is there any visually responsive (as in, make a change and it’s instantly viewable, like HTML + CSS) to play around with the layout? The design editor in Ninja requires the PDF preview to regenerate after every change, making it a rather slow hit and miss process.

I’d also like to stop the currency symbol (NZD, USD, etc.) from pre-fixing every dollar value. It’s really only necessary in the Invoice Total, yet it currently shows up on every item line, etc., making the values take up too much space, forcing them to wrap onto two lines.
Also, is there any documentation for what design customisation?

Thanks …
Jonathan

2

Hi,

We’re looking into adding an option to use the designer in ‘draft mode’ (@david) which would show the design as HTML/CSS rather than PDF. It should be faster but less accurate.

We should be able to support that by providing variables with different formatting. We don’t have much documentation yet for v5, what we have is here: https://invoiceninja.github.io/selfhost.html

3

Thanks Hillel. It would certainly be very helpful to have an easier way to customise the templates, as that’s a pretty important part of an invoicing system (as you know), since it’s what the public (customers) see and interact with from the merchant.

4

Are the samples of all the built in templates one can view somewhere?

I found this page, https://www.invoiceninja.com/invoice-template-designs/, but they have no names, and I’m not sure if they correlate to what comes with the self-host version.

5

@hillel - for now, is there a file a can look at that shows the selectors used on the output of templates? So I can at least add appropriate CSS to the Includes on a template design, in order to affect the layout and typography, etc.?

6

I’d also like to suggest not auto-updating the preview. Rather, have an “Update Preview” button. When trying to change the CSS, etc., I don’t find it particularly helpful to have the preview updating every time I pause for a few seconds.
There might be people who like the constant auto updates, so perhaps also have a selector field, for “Autoupdate preview”. That way it can be turned on, or off, and if off the user can hit the “Update preview” button when they are ready to have it update.

7

Thanks for the feedback!

  • You can see all of the CSS styles on the last tab called ‘includes’

  • We’ll look into adding an ‘auto-update’ option

8

Sorry, I wasn’t clear. I can see the styles, but not the underlying selectors they are affecting. So it’s a fair bit of hit-and-miss trying to change things around, as I can’t see the structure of the “page” (ordinarily an HTML page, that the CSS is affecting). Is there any way to see that? A file I can dig up off of the server?

9

@ben any thoughts on this?

10

Hey there, I think I’ve replied to this one in this thread. I have a plan to add selectors to each element pretty soon :+1:

Also, since you’re interested in the design customization, I’d like, if you have any ideas, to sugget them to me here in PM or Invoice Ninja Slack (Benjamin Beganović). We’d really love to provide best experience when it comes to customizing templates :+1:

1 Like