Introducing HTML/CSS templates

Lubos im using WIn 7.
As i can figure out (im not sure…) Manager user internet explorer browser to open.
If yes its that problem with IE that cant print even with @media print some css
Maybe if we have the option to use for example another browser (Chrome??)

If i right click into the invoice inside manager i can select option (from right click) print preview and i dont see my custom css colors (inside divs) with this manipulated a little Edit fiddle - JSFiddle - Code Playground

some info about the IE problem:
css - Why are my print styles not being rendered in IE 7 and IE 8? - Stack Overflow)

Is there a way to get the standard HTML template?

I want to change some basic stuff like color text. Is there a way to change this field, result on the sales invoices should be that both numbers are not near to each other but each on a different line.

I Want compulsary Tax column whether single tax rate is there for all item, Table height should be about 10 rows whether there is only 1 item or 2 or 10. Else everything I have done. Pl reply

I was able to change the “view template” and add the customer telephone by adding {{ customer.telephone }} in a div tag. Now I am trying to add the customer mobile and {{ customer.mobile }} does not work. Is this the var i should be using or is it just not available?

{{ customer.mobile }} variable hasn’t been added. I suggest wait until end of this month. View template support will be extended across all printable content and the complete list of available variables will be documented. Then feel free to make suggestions to add new variables.

1 Like

Thank you for your reply. I love the product. I would love a post that lists all the variables that are available.

Yes… i will revive the topic just to get informed about the progress

I’m currently working on new guides and it will include section with list of all variables available on invoice template. You should be able to see it in a few days.

Hi,

Thanks for the amazing software lubos, Just wondering how you went with the variables etc?

really looking at getting the customer.mobile in my invoice.

Thanks in advance.

I am using Manager 15.3.5 in my Mac. I would like to modify the invoice template, but as it was mentioned in this forum I can’t find the HTML Template tab under settings or even under customise. Is this function available for this version? If it is how do I modify my invoice template?

Go to Settings >> View Templates. When you click New View Template, the HTML code for the default Sales Invoice template appears as a starting point.

is there a way to modify the “delivery note” template

Not yet, though increased capability to modify all reports has been mentioned.

I’m also wondering if the updated guide with full list of available variables is ready yet.

I’m looking for GST inclusive line totals. (I want the Ex GST amounts in one column, and the Inc GST in the next column.)

I’ve also found a few little CSS oddities as I play around with this:

(1) The ‘box-sizing’ property does not seem to be supported. … When I apply ‘border-box’ to any element in a Manager template, it has no effect. (EDIT Sorry, my mistake. The reason it wasn’t changing, is that ‘border-box’ sizing is applied by default.)

(2) The invoice page appears to have some kind of margin or padding that I can’t get rid of. If I knew what this inbuilt ‘page’ element was, perhaps I could set margin and padding to zero and remove it. Setting it on ‘html’ or ‘body’ doesn’t work.

(3) Using the asterisk (*) wildcard to apply styles globally does weird and wonderful things to the Manager interface! Try this:

	* {
		border: 1px solid red;
	}

I’d already guessed that the Manager interface was web-based, but I wasn’t expecting this. :slight_smile: Looks like the templating system isn’t properly sandboxed (if that’s the right term?)

Have look here: Manager Guides

This is correct. I’m planning some improvements which will address this issue.

I know. It’s not a big deal though as you can’t really use this to hack the system. One exception is that if you use multi-user version and give restricted user access to view templates, they could inject javascript code to steal your cookies. Normally restricted users wouldn’t have access to view templates but it is a potential problem. I imagine in future I will make HTML code subject to some sanitizing just in case. As for breaking UI, it could be solved by moving the whole template into IFRAME but that creates new set of issues which I’m not ready to deal with yet.

Thanks Lubos.

I can’t see a variable there for tax-inclusive line totals. Is there such a thing? (I still want to enter prices as ex-GST amounts, but I want a second column which shows the inc-GST prices.)

Another issue I found… Applying a font-size to the h1 tag had no effect. I had to use the ‘!important’ property to force it to stick. That tells me there are some default styles that are overriding my own, making developing templates just a little bit hit and miss at the moment. Would be great if there were no overrides so that what I see in other WebKit browsers on my Mac (Safari, Coda) matches up with what I see in the Manager preview. It almost matches up, but not quite in a couple of spots, and it can be a little hard to work out what styles are being overridden.

In the latest version (15.3.63), I’ve added new variable into Tax object called amount.

When you loop through line items on invoice, to show tax amount, use {{ line.tax.amount }}

{% for line in lines %}
    {{ line.tax.amount }}
{% endfor %}

If you have line totals entered as GST-exclusive, then to get GST-inclusive line total, you can add {{ line.total }} and {{ line.tax.amount }} together.

{% for line in lines %}
  {{ line.total | plus:line.tax.amount }}
{% endfor %}

As for CSS issues, don’t use H1 tag at all. Use generic Div tag.

‘line.tax.amount’ is just what I needed. Many thanks!

Thanks too for a great program, and for taking the time to help out personally on the forums.

@lubos: Just two more questions that have come up for me…

  1. Is it possible to group charges for disbursements separately from other chargeable items on the invoice? This is how I was doing it in other software—two separate tables on the same invoice. It’s not a biggie, but it would be nice if it were possible to split them up.

  2. Are there formatting options for the date? I’d like it to appear as ‘28 July 2015’ rather than 28/7/2015. Again, no biggie but it would be nice.