[16.11.24] Added ability to create custom themes

I understand. I really like this template and not to be able to translate it over to the themes feature yet is a little annoying but I shall keep doing I have been doing and using the link to still use it until such time I work out how I translate it over unless we have enough updates to help me do that ie CSS.

Themes are created in Liquid. Don’t expect that to change.

I noticed that after adjusting a theme (as advised by lubos in the Nov 16 entry above) this works fine for what is displayed on the screen and for the “pdf” option.

However it seems like the “print” option is not using this “modified theme” but still prepare the document as per the original (default) theme…

Is this on purpose or possibly a bug…?

Many things have been discussed in this thread. So you need to furnish more detail. Can you post screen shots showing what you mean?

Should be quite straight forward…

  1. I asked how to make a minor (cosmetic) change in the default theme for e.g. Sales invoice as our Company name gets wrapped over two lines.
    .

  2. Lubos replied;you can increase width for business name on line 22.

It would say:
style=“padding-left: 20px; width: 200px”

so you might change it to:
style=“padding-left: 20px; width: 220px”

  1. My question now is that this works fine for “what I see on the screen” and when clicking “pdf”. However when clicking “print” the default “width” is used.

/A

That is because Print uses the operating system’s printing processes, drivers, etc. Exact behavior depends on those factors, which are beyond Manager’s control. For example, your particular printer driver may have a definition of printable area that limits total width, so it is working with a different width parameter than Manager’s PDF generator. You may need different a custom theme for direct printing.

To avoid that, generate a PDF first, then print it. In most cases, the printer driver will then scale the page as needed to fit (or at least give you that option).

It is impossible for Manager to know every operating system, printer, and driver combination in the world. But it can generate PDFs based on what you see onscreen.

I don’t think that would be the case. Try to increase from 200px to 250px. Font on the screen is different from the font which is used in PDF.

Anyway, PDF generator is still being improved so it’s better at allocating spaces horizontally. Then it won’t be required to set number of pixels in themes.

That worked…! Many thanks…

Hi,
I have installed the 17.1.38 version but I don’t have the ‘‘Edit Theme’’ option.
Is something wrong with the installation?

There is a minor change and this button is only available if you are using custom theme. For in-built themes, “Edit Theme” button will not show.

If you don’t have a custom theme yet, you can create it under Settings tab, then Themes.

Ok.
Thank you very much.
You have created a really excellent software.

Is there a list of available variables for themes.
or could you explain structure of these

I am trying to do if customfield == value
but failing to figure out were to find it

What templating engine you using or if it is custom one what is available? (if, for, …???)

All variables are used in the default template.

The code in the default theme having to do with custom fields is this portions:

     {% for field in custom_fields %}
            <tr>
                <td colspan="99">
                    <div style="font-weight: bold; padding-top: 20px">{{ field.label }}</div>
                    <div>{{ field.text | newline_to_br }}</div>
                </td>
            </tr>
            {% endfor %}

The contents of a custom field are in field.text.

Themes are created using Liquid.

Thank you!

In case some one else needs:
in beginning of theme I did add code to set business_area variable

{% for field in custom_fields %}
    {% if field.label == 'Business Area' %}
        {%- assign business_area = field.text | strip_newlines | rstrip -%}
    {% break %}
    {% endif %}
{% endfor %}
...

to remove unnecessary spaces and breaks I had to add

| strip_newlines | rstrip

and later in template I use it for switching logo

...
{% if business_area == 'Amberoot' %}
<td style="text-align: right"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKUAAAAkCAYAAADox/qnAAAACXBIWXMA=" style="max-height: 150px; max-width: 300px"></td>
 {% else %}
{% if business.logo != null %}<td style="text-align: right"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px"></td>{% endif %}
 {% endif %}
...

image converted to base64 using http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/result/

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKUAAAAkCAYAAADox/qnAAAACXBIWXMA=

hope someone finds it helpful :slight_smile:

Link to liquid documentation:
https://shopify.github.io/liquid/basics/introduction/

Also list of all variable in default themes:

Document Specific:	
	title
	description
	fields (array of document fields like Invoice date, Invoice number, Order number etc.)
		field.label
		field.text
Recipient Details:
	recipient.name
	recipient.code 
	recipient.address 
	recipient.identifier 
Business Details:
	business.name
	business.address 
	business.identifier
	business.logo
	
Table Details		
	table 
		table.columns
			column.align
			column.label
			
		table.rows
			row.cells
				cell.text
				
		table.totals
			total.emphasis
			total.label
			total.text
Custom Fields		
	custom_fields
		field.label
		field.text
Emphasis (Used for labels like "PAID IN FULL")
	emphasis.positive
	emphasis.negative
	emphasis.text
7 Likes

Hi Lubos,

I am using Manager 17.3.10 version. I want to create new theme but in this version I could not find Edit Theme. Only Switch Theme option is available, please guide. (screenshot is attached for your reference please).

Thanks

The Edit Theme button appears only when viewing a custom theme. Built-in themes cannot be edited. To create a custom theme from a built-in theme, go to Settings => Themes. Click on the one you want and copy its code. Then create a custom theme, paste in the code from the built-in, and modify it.

Just want to ask how to re arrange the column in Invoice? for example I want the QTY first before Item Code Description and Unit Cost then Total Amount.

That would be major code surgery, well beyond the scope of this forum. If you don’t have the skills, hire someone locally to write your theme for you.

Cool @isklerius :smiley: this definitely help a lot to develope email template and adjusting invoice template. :heart_eyes:

1 Like