Custom themes

1

Hi all,
Is there a way of inserting an image of our letterhead into the background of quotes and invoices? I know how to change themes and adjust colours within custom themes however it would be nice to have our quotes and invoices on our letterhead so everything is consistent across our business.

Not sure if this is even possible and not the end of the world if it can’t be done but thought I’d ask.

Thanks
Maxine

2

Just use the HTML background-image tag.

BTW, the rules indicate that you must first post your best attempt:

If your question is related to custom themes or custom reports, always post the code or report definition you have developed and the results it produces. Do not simply post a picture of something you want and ask other users to tell you how to achieve it.

3

Thanks Mark.

I don’t know how to write html code, hence the reason I haven’t attempted it or provided code. The only thing I’ve done previously is change the colour codes that were in the built in code which was pretty simple.

Now I know it’s possible I’ll do some research and attempt to write the html code.

4

OK. Just put the code in line 1, e.g.:
<table style="padding: 30px; width: 100%; background-image: url('https://[url-of-the-image]'); background-repeat: no-repeat; background-position: center">

2 Likes
5

@Mark its showing on top of the document.

image
image1179×97 5.42 KB

image
image1105×485 39.4 KB

6

First of all delete line 2. Also paste the complete code because it’s not visible.

1 Like
7

Thanks. This is very helpful.
I’ll give it a go.

Might be a silly question but how do I get a url for the image? I only have it save to my computer at the moment.

8

You have to store it on an internet site eg google drive

Read this Add an image to a custom field | Manager

1 Like
9

Then use the local path to the image, like e.g. url('C:/Users/[user]/Downloads/[image.jpg]')

10

Hi Mark,
I had a go at the coding as you mentioned above.
I managed to delete the logo image which we didn’t need any more but the code that i tried to insert the letterhead in the background isn’t working.
any suggestions on how to fix it?

Screenshot 2022-07-01 094458
Screenshot 2022-07-01 0944581589×477 39.2 KB

image
image1568×495 15.4 KB

11

What is not working? Can you open that URL in a browser window? I remember the 1drv.ms domain gives a lot of problems so try another cloud storage provider or an image sharing site.

12

Thanks Mark,
I’ve tried using a google drive too but it wasn’t working either.
the image thats meant to be showing in the background is our letterhead which is a full A4 sized image.

The other option I have is the include a header image and a footer image instead of the full sized letterhead image.

13

Maybe it’s simply too big but, if you want, you can send it too me by private message (click on my nickname and then on Message) and I’ll see what I can do.

1 Like
14

it doesn’t seem to allow me to do that. it just says “This user’s public profile is hidden.”
sorry. are you able to private msg me and I can reply?

15

here is the coding of my theme i want align image in left corner to center of the invoice and colour lighter for use as watermark.
please help me dear managers

{% if business.logo != null %}{% endif %}
{{ title }} 
            <table style="margin-bottom: 10px"><tr>
                <td>
                    <div style="font-weight: bold; font-size:14px; font-family:Century Gothic;"><b>{{ recipient.code }} - {{ recipient.name }}</b></div>
                   
                <div style="font-weight: bold;font-size: 14px; font-family:Century Gothic;"><b>{{ recipient.address | newline_to_br }}</b></div>
                    <div>{{ recipient.identifier }}</div>
                </td>
                <td style="{% if business.address != null %}border-right-width: 1px; padding-right: 20px; {% endif %}text-align: right">
                    {% 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="padding-left: 5px; width: 1px; white-space: nowrap">
                    <div style="font-weight: bold;font-size: 14px; font-family:Andalus;">{{ business.name }}</div>
                    <div style="font-weight: bold;font-size: 14px; font-family:Andalus;">{{ 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: 5px">{{ description }}</div>
        </td>
    </tr>
    <tr>
        <td style="font-weight: bold;padding: 5px 10px; text-align: center; border-left-width: 5px; border-bottom-width: 5px; border-top-width: 5px; width: 1px">#</td>
        {% for column in table.columns %}            
        <td style="font-weight: bold;font-family:Arial Black; color: #; border-bottom-width: 5px; border-color: #; padding: 10px; text-align: {{ column.align }};border-bottom-width: 5px; border-left-width: 5px; border-bottom-width: 5px; border-top-width: 5px{% if forloop.last == true %}; border-right-width: 5px{% endif %}{% if column.nowrap %}; white-space: nowrap; width: 10px{% endif %}">{{ column.label }}</td>
        {% endfor %}
    </tr>
    {% for row in table.rows %}
    <tr>
        <td style="padding: 5px 10px; text-align: center;border-bottom-width: 1px; border-left-width: 1px; width: 1px">{{ forloop.index0 | plus:1 }}</td>
        {% for cell in row.cells %}
        <td style="padding: 5px 10px;border-bottom-width: 2px; font-weight:bold; font-family:Century Gothic; text-align: {{ table.columns[forloop.index0].align }};border-bottom-width: 1px; border-left-width: 1px{% if forloop.last == true %};border-right-width: 1px; padding-right: 20px{% endif %}{% if table.columns[forloop.index0].nowrap %}; white-space: nowrap; width: 80px{% endif %}">{{ cell.text | newline_to_br }}</td>
        {% endfor %}
    </tr>{% endfor %}
    {% for total in table.totals %}
    <tr>
        <td colspan="{{ table.columns | size }}" style="padding: 5px 10px;font-weight:italic; color: #000000; font-family:Arial Black; text-align: right{% if total.emphasis == true %}; font-weight: bold{% endif %}">{{ total.label }}</td>
        <td style="border-left-width: 1px; font-weight:italic; font-family:Arial Black; white-space: nowrap; border-right-width: 1px; border-bottom-width: 1px; padding: 5px 10px; text-align: right{% 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"><b>{{ field.label }}</b></div>
            <div><b>{{ field.text | newline_to_br }}</b></div>
        </td>
    </tr>
    {% endfor %}
    <td style="text-align:"><img src="" style="max-height: 150px; max-width: 300px" /></td>
    <img src="{{ business.logo }}" style="max-height: 150px; max-width: 300px" />
    <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>

Capture
Capture1468×816 46.3 KB

1 Like