Help in setting a background image as a letter head in custom themes

1

Going over the forums, I understood that manager does not allow the user to add a Letter head for printed documents. And one solution is to print the document on blank letter heads. But sometimes I want to send my invoices through email already printed on a letter head.
Now I barely understand coding, HTML or liquid, but I managed to trick it by inserting the letter head as image under the business logo. Then I added a body above the table in a plain theme telling the software to use the business logo as a background image, (Or I can upload the letter head online and use its URL, same thing here). This the Code I used:
“<div {% if business.logo != null %} style=“background-image: url(‘{{ business.logo }}’);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
float: left;
padding-top: 150px;
padding-left: 0px;”
{% endif %} >”
I am having issues on how to tell the software to fit the letter head to an A4 size. When using the background-size as cover or contain, manager is thinking that the documents borders are only the table body. Thus the printout is showing as below:

Capture
Capture617×863 115 KB

I want help on my code to let the printout scale the image as full-A4-size background, not the full size of the table(by the table I mean the body of the document such as an invoice)
Or else, is there another trick to add a letter head to the document? I have the letter head as an image with the size of A4 paper. The letter head already contains my logo

2

This forum is not meant as a coding instruction resource. Users are responsible for their own custom themes. If you do not have the skills personally to code for the results you want, hire a local programmer.

3

1- Many people already asked about this issue, and I am giving half a solution here. Maybe someone can help fix it so everyone can use it.
2- My problem is not coding related, it is software related, like everyone else facing this issue
3- If there’s another solution to do it without coding I do not mind using it but so far no one has suggested anything.
4- Using custom themes is part of the software and thus should be part of the forums. The community grows if people can rely on the forums instead of using other sites that would not address a specific issue like this one
Regards.

4

I’m quite expert with markup languages. Where did you put the div container? You better put the whole theme’s code.

I’ve never tried to put a background image but, as a first try, I would add the background logo in the style of the main table of the theme.

5

You wrote specifically, “I want help with my code.”

There is no solution except a custom theme. The program allows themes to be added by users. That does not, however, mean the developer took on responsibility for addressing every user’s vision for a desired result. He has also made clear he wants the forum to concentrate on how to use features in the program. He does not want it to be the place for coding tutorials. Plenty of those already exist. With respect to custom themes, the feature that exists is a hook, not a final solution. No one could predict everything users might want.

6

I cloned the plain theme provided by the software and added my code first. Rest of the code I kept it as is. Please check below

div {% if business.logo != null %} style=“background-image: url(‘{{ business.logo }}’);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
float: left;
padding-top: 150px;
padding-left: 0px;”
{% endif %} >

<table style="padding: 30px">
<thead>
    <tr>
        <td colspan="99">
            <table style="margin-bottom: 20px"><tr>
                <td style="font-weight: bold; font-size: 32px">{{ title }}</td>
               <!-- {% if business.logo != null %}<td class="text-end"><img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" /></td>{% endif %}
           -->
            </tr></table>
            
            <table style="margin-bottom: 20px"><tr>
                <td>
                    <div style="font-weight: bold">{{ recipient.name }}</div>
                    <div>{{ recipient.address | newline_to_br }}</div>
                    <div>{{ recipient.identifier }}</div>
                </td>
                <td class="text-end">
                    {% for field in fields %}
                    <div style="font-weight: bold">{{ field.label }}</div>
                    <div style="margin-bottom: 10px">{{ field.text }}</div>
                    {% endfor %}
                </td>
                {% if business.address != null %}
                <td style="width: 20px"></td>
                <td class="border-start" style="width: 20px"></td>
                <td style="width: 1px; white-space: nowrap">
                    <div style="font-weight: bold">{{ business.name }}</div>
                    <div>{{ business.address | newline_to_br }}</div>
                    {% for field in business.custom_fields %}
                    <div>{{ field.label }} {{ field.text }}</div>
                    {% endfor %}
                </td>
                {% endif %}
            </tr></table>

            <div style="font-size: 14px; font-weight: bold; margin-bottom: 20px">{{ description }}</div>
        </td>
    </tr>
    <tr>
        {% for column in table.columns %}
        <td class="text-{{ column.align }} border-start{% if forloop.last == true %} border-end{% endif %}" style="font-weight: bold; padding: 5px 10px; border-bottom-width: 1px; border-top-width: 1px{% if column.nowrap %}; width: 80px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
</thead>
<tbody>
    {% for row in table.rows %}
    <tr>
        {% for cell in row.cells %}
        <td class="text-{{ table.columns[forloop.index0].align }} border-start{% if forloop.last == true %} border-end{% endif %}" style="padding: 5px 10px; {% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>
    {% endfor %}
    <tr>
    {% for column in table.columns %}
        <td class="border-start{% if forloop.last == true %} border-end{% endif %}" style="border-bottom-width: 1px">&nbsp;</td>
    {% endfor %}
    </tr>
    {% for total in table.totals %}
    <tr>
        <td class="text-end" colspan="{{ table.columns | size | minus:1 }}" style="padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td class="border-start border-end text-right" style="white-space: nowrap; border-bottom-width: 1px; padding: 5px 10px{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.text }}</td>
    </tr>
    {% endfor %}

    {% 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 %}

    <tr>
        <td colspan="99">
            {% if emphasis.text != null and emphasis.positive %}
            <div style="text-align: center; margin-top: 40px"><span style="color: #006400; border-width: 5px; border-color: #006400; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
            {% endif %}

            {% if emphasis.text != null and emphasis.negative %}
            <div style="text-align: center; margin-top: 40px"><span style="color: #FF0000; border-width: 5px; border-color: #FF0000; padding: 10px; font-size: 20px">{{ emphasis.text | upcase }}</span></div>
            {% endif %}
        </td>
    </tr>
</tbody>

If you van check if there’s something wrong in the code I wrote or point for me where it should placed I would really appreciate it. Regards.

Blockquote

7

First of all I see you didn’t close the “div”. Than you have to think that it is not HTML but a subset of HTML mixed with a specific language called liquid. I’ll check tomorrow if it is possible.

8

I managed to fix the issue by setting the height and width of div to the A4 paper size in mm, not pixels. Now the second issue is, any document using the custom theme is perfectly aligned. But the issue is the logo, or the image, does not repeat on the second pages of a long document. Do you have maybe a solution for this? or is there an option in the software to allow the business logo to repeat on every page?

9

You are trying to do a “risky” thing trying to setup fixed measures. What if the content is larger and the invoice is splitter between two different pages?

10

If you create PDFs, content above the main table of a transaction will repeat on continuation pages.

1 Like
11

That is what I am trying to fix now. This method works as long as my documents are only 1 page. In case there’s a second page the software consider it one page rendering two pages without any margin or repetition
Since my logo is moved outside it is designated column, using the PDF button redder the document without a logo. I am trying to do it through the print option.