HTML/CSS editor not working

Good afternoon everyone,
I’m afraid I can’t get the HTML/CSS editor to work. Every time I close the window (after clicking “Save”, of course) my design gets back to the standard format. I can’t get to v5 if I can’t create my invoices…

Regards,
Gabriel Crespo

Hi,

Are you creating a custom design? You would need to also select the custom design either on the settings tab on the invoice edit page or set is as the default on Settings > Invoice Design.

Hi Hillel,
I’m afraid I did not explain correctly myself. The problem comes out while I’m editing a custom design (let’s name it ‘RL1’). So:

  • I click “Invoice Design”
  • I select ‘RL1’ in the “Invoice Design” menu
  • I click “Customize & preview”
  • I select again ‘RL1’ and click “Edit”
  • I enable “HTML mode”
  • I write down something like “margin: 20mm;”
  • It gets correctly previewed. I save the changes
  • I get out of that screen (the changes have been saved!!!)
  • I try to create a new invoice with design ‘RL1’
  • No changes. ‘RL1’ is just the ‘Clean’ design again
  • I check under “Invoice design”. ‘RL1’ is selected there.
  • I check the changes editing the design again. NO changes there.
  • Loss of time, frustration, etc

Regards,
Gabriel Crespo

Thanks, understood. Any changes to the HTML preview are discarded, it can only be used to preview your changes. To create a design you need to update the design template itself.

Ok. And how should I do that? Any instructions?

Regards,
Gabriel Crespo

There’s some info here:

https://invoiceninja.github.io/docs/custom-fields/

Hi Hillel,
Thank you for the info. It has taken me quite a long tim to understand how all this works and I have to say it’s not very clear in the documentation. Some note about the HTML preview would be of great help.

Regards,
Gabriel Crespo

@hillel I’m having this same issue. I was easily able to make adjustments to the invoice template in v4, but the HTML editor in v5 is not saving any of my changes.

@gcrespo Did you ever get this figured out?

Hi,

Is it possible you’re updating the HTML preview rather than the template?

@hillel Yes I realized that editing the preview was what I was doing wrong. Thank you for following up.

I have the same issue. Could you give us a sort of step by step guide ? Thak you

I don’t have a step by step guide, but if you want to update the design you need to make the changes in the raw HTML template. If you update the HTML preview the changes will be lost.

Hi Hillel,
To be honest, I think the real problem is that nowhere says “this is just a preview” or “these are the templates”. In fact, I think the preview is quite useless, but that’s just my opinion.

Regards,
Gabriel Crespo

Thanks a lot, where can i find the raw html ? I can only see the preview. I think I’m doing something wrong but I don’t know what it is.

@gcrespo we’ll work to clarify it

@Dalmale if you enable the “HTML Mode” option the variables sections will be replaced with the raw HTML

Ok, but how can i save changes ?

You need to update the HTML/CSS in the tabs, ie. body, header, footer, etc

It works ! Thank you very much

1 Like