Missing business logo

1

I have the same company on a Desktop and Laptop and both worked okay and were identical and worked as expected.
I did an uninstall of Manager on the Desktop and a fresh install from a new download.
Saved a back up file from laptop to usb and imported into desktop.
Logo shows in business details but when I view an invoice it does not show logo. all it show is a logo icon.
(I use a custom theme and invoice is checked)

I have even tried copying the theme from laptop and pasting as a new theme on desktop…to no avail

Yes I have deleted the logo from business details and chose a new copy of logo from a Manager folder in documents to see if that would fix.. but it did not.

If I uncheck Custom theme the logo shows on default invoice theme. But will not show in Custom theme.

This works okay on laptop.
Reason I did uninstall etc was I was trying to do a special theme and I stuffed up badly.

2

Hello @rquinn,

Please share screenshots of when the logo is replaced with an icon.

Also, you can share the part of your custom Theme that refers to the logo.

3

Custom theme

image
image1614×599 31.4 KB

default theme

image
image1582×421 91.2 KB

custom theme code

@page { size: A4; margin: 20mm; } 
    *, ::after, ::before, ::backdrop, ::file-selector-button {
        margin: 0;
        padding: 0;
    }

    *, ::after, ::before, ::backdrop, ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
    }

    body {
        margin: 0;
        padding: 50px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #171717;
        font-size: 12px;
        line-height: 1.428571429;
        min-width: 800px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    address {
        font-style: normal;
        line-height: 1.5em;
        font-size: 12pt;
    }

    dt {
        font-weight: bold;
        margin: 0 0 2px 0;
    }

    dd {
        margin: 0 0 16px 0;
    }

    dd:last-of-type {
        margin-bottom: 0;
    }

    @media print {
        body {
            padding: 0;
            min-width: auto;
        }
    }

    table {
        font-size: 12px;
        width: 100%;
    }

    tr#table-headers th {
        font-weight: bold;
        padding: 5px 10px;
        border: 1px solid #000;
        text-align: start;
        font-size: 10pt;
    }

    tbody#table-rows td {
        padding: 5px 10px;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        text-align: start;
        vertical-align: top;
        font-size: 10pt;
    }

    tbody#table-rows tr:last-child td {
        padding-bottom: 30px;
        border-bottom: 1px solid #000;
    }

    tbody#table-column-totals td {
        padding: 5px 10px;
        font-weight: bold;
        border: 1px solid #000;
        white-space: nowrap;
        text-align: right;
        vertical-align: top;
        font-size: 10pt;
    }

    h1#title {
        font-size: 12pt;
        line-height: 32px;
        font-weight: bold;
        margin-top: 126px; /* Adjusted margin-top to move down by 6mm */
        white-space: nowrap;
    }

    #footers {
        text-align: left;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 20px;
    }
</style>
Business Logo
South Australian Pistol and Shooting Club
PO Box 102
Stirling SA 5152
Email: secretary@sapistol.org.au

Tax Invoice






Invoice
Invoice Details
                <!-- Removed description since it should not be printed -->

                <table style="border-collapse: collapse; width: 100%">
                    <thead>
                        <tr id="table-headers"></tr>
                    </thead>
                    <tbody id="table-rows">
                    </tbody>
                    <tbody id="table-column-totals">
                    </tbody>
                    <tbody id="totals">
                    </tbody>
                </table>

                <script src="resources/qrcode/qrcode.js"></script>
                <div id="qrcode" style="margin-bottom: 20px"></div>

                <div id="custom-fields"></div>

                <table>
                    <tr>
                        <td>
                            <div id="footers"></div>
                        </td>
                    </tr>
                </table>

                <div id="status" style="text-align: center"></div>
            </td>
        </tr>
    </tbody>
</table>

<script>
    window.addEventListener("message", (event) => {

        if (event.source !== window.parent) return;
        if (event.data.type !== 'context-response') return;

        const data = event.data.body;

        document.documentElement.dir = data.direction;

        document.getElementById("title").innerHTML = data.title || "No title";
        
        // Removed description assignment to avoid printing

        const recipient = data.recipient || {};
        document.getElementById("recipient-info").innerHTML = `<strong>${recipient.name || ""}</strong><br>${recipient.address ? recipient.address.replace(/\n/g, "<br>") : ""}`;

        const fieldsDiv = document.getElementById("fields");
        fieldsDiv.innerHTML = "";
        const fields = ["InvoiceDate", "InvoiceNumber", "DueDate"];
        fields.forEach(key => {
            const field = data.fields.find(f => f.key === key);
            if (field) {
                const dt = document.createElement("dt");
                dt.innerText = field.label;
                const dd = document.createElement("dd");
                dd.innerText = field.text;
                fieldsDiv.appendChild(dt);
                fieldsDiv.appendChild(dd);
            }
        });

        const headersRow = document.getElementById("table-headers");
        headersRow.innerHTML = "";
        (data.table.columns || []).forEach(col => {
            const th = document.createElement("th");
            th.innerHTML = col.label;
            th.style.textAlign = col.align;
            if (col.minWidth) {
                th.style.whiteSpace = 'nowrap';
                th.style.width = '1px';
            } else if (col.nowrap) {
                th.style.whiteSpace = 'nowrap';
                th.style.width = '80px';
            }
            headersRow.appendChild(th);
        });

        const rowsBody = document.getElementById("table-rows");
        rowsBody.innerHTML = "";
        (data.table.rows || []).forEach(row => {
            const tr = document.createElement("tr");
            row.cells.forEach((cell, i) => {
                var col = data.table.columns[i];
                const td = document.createElement("td");
                td.innerHTML = (cell.text || "").split("\n").join("<br />");
                td.style.textAlign = col.align;
                if (col.minWidth) {
                    td.style.whiteSpace = 'nowrap';
                    td.style.width = '1px';
                } else if (col.nowrap) {
                    td.style.whiteSpace = 'nowrap';
                    td.style.width = '80px';
                }
                tr.appendChild(td);
            });
            rowsBody.appendChild(tr);
        });

        const columnTotals = document.getElementById("table-column-totals");
        const tr = document.createElement("tr");
        (data.table.columns || []).forEach(col => {
            const td = document.createElement("td");
            td.innerText = col.sumText;
            tr.appendChild(td);
        });
        if (tr.innerText) columnTotals.appendChild(tr);

        const totalsBody = document.getElementById("totals");
        totalsBody.innerHTML = "";
        (data.table.totals || []).forEach(total => {
            const tr = document.createElement("tr");
            const tdLabel = document.createElement("td");
            const tdValue = document.createElement("td");
            tdLabel.innerHTML = total.label;
            tdLabel.colSpan = data.table.columns.length - 1;
            tdLabel.style = 'padding: 5px 10px; text-align: end; vertical-align: top';
            tdValue.innerHTML = total.text;
            tdValue.id = total.key;
            if (total.class) tdValue.classList.add(total.class);
            tdValue.dataset.value = total.number;
            tdValue.style = 'padding: 5px 10px; border: 1px solid #000; text-align: right; white-space: nowrap; vertical-align: top';

            if (total.emphasis) {
                tdLabel.style.fontWeight = 'bold';
                tdValue.style.fontWeight = 'bold';
            }
            tr.appendChild(tdLabel);
            tr.appendChild(tdValue);
            totalsBody.appendChild(tr);
        });

        const customFieldsDiv = document.getElementById("custom-fields");
        customFieldsDiv.innerHTML = "";
        (data.custom_fields || []).forEach(f => {
            const div = document.createElement("div");
            div.innerHTML = `<strong>${f.label || ""}</strong><br />${(f.text || "").split("\n").join("<br />")}<br /><br />`;
            customFieldsDiv.appendChild(div);
        });

        const footersDiv = document.getElementById("footers");
        footersDiv.innerHTML = "";
        (data.footers || []).forEach(f => {
            const div = document.createElement("div");
            div.style = 'margin-top: 20px';
            div.innerHTML = f;
            footersDiv.appendChild(div);

            const scripts = div.querySelectorAll("script");
            scripts.forEach(script => {
                const newScript = document.createElement("script");

                for (const attr of script.attributes) {
                    newScript.setAttribute(attr.name, attr.value);
                }

                if (script.textContent) {
                    newScript.textContent = script.textContent;
                }

                script.parentNode.replaceChild(newScript, script);
            });
        });

        const statusDiv = document.getElementById("status");
        if (data.emphasis?.text != null) {
            statusDiv.style.marginTop = '40px';
            const span = document.createElement("span");
            span.style = 'border-width: 5px; border-color: #FF0000; border-style: solid; padding: 10px; font-size: 20px; text-transform: uppercase';
            if (data.emphasis.positive) {
                span.style.color = 'green';
                span.style.borderColor = 'green';
            }
            if (data.emphasis.negative) {
                span.style.color = 'red';
                span.style.borderColor = 'red';
            }
            span.innerHTML = data.emphasis.text;
            statusDiv.appendChild(span);
        }

        if (data.legacyQrCodeForSaudiArabia) {
            function appendTLV(tag, text, byteList) {
                const encoded = new TextEncoder().encode(text);
                byteList.push(tag);
                byteList.push(encoded.length);
                for (let b of encoded) byteList.push(b);
            }

            const byteList = [];

            let businessName = 'No name';
            if (data.business) businessName = data.business.name;

            let vatNumber = '0000000000000';
            let vatField = data.business.custom_fields.find(item => item.key === "d96d97e8-c857-42c6-8360-443c06a13de9");
            if (vatField) vatNumber = vatField.text;

            let timestamp = new Date((data.timestamp - 621355968000000000) / 10000).toISOString();

            let total = 0;
            let totalElement = document.getElementById('Total');
            if (totalElement != null) total = parseFloat(totalElement.getAttribute('data-value'));

            let vat = 0;
            let taxAmounts = document.getElementsByClassName('taxAmount');
            for (let i = 0; i < taxAmounts.length; i++) {
                vat += parseFloat(taxAmounts[i].getAttribute('data-value'));
            }

            appendTLV(1, businessName, byteList);
            appendTLV(2, vatNumber, byteList);
            appendTLV(3, timestamp, byteList);
            appendTLV(4, total.toFixed(2), byteList);
            appendTLV(5, vat.toFixed(2), byteList);

            const tlvBytes = Uint8Array.from(byteList);

            const qrData = btoa(String.fromCharCode(...tlvBytes));

            new QRCode(document.getElementById("qrcode"), {
                text: qrData,
                width: 128,
                height: 128,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.L
            });
        }

        window.parent.postMessage({ type: "resize", width: document.documentElement.scrollWidth + 1, height: document.documentElement.scrollHeight + 1 }, "*");
    }, false);

    window.addEventListener("load", () =>
        window.parent.postMessage({ type: "context-request" }, "*")
    );
</script>
4

I’m going to be handling business logo just like any other image on themes which would be by using “image custom fields”.

Default theme won’t even be aware of business logo. If you prompt theme enhancer to “add business logo”, it will tell you to create “image custom field” under “business details” and set your logo there.

Then you go to theme enhancer again to “add business logo” and now theme enhancer will see your custom field and add the logo to your theme.

This will make things a lot more flexible because you can have multiple logos and your theme can pick the right one based on your conditions specified within the theme.

Anyway, you can already use it like that. The latest version with new theme enhancer fully support this:

5

The laptop uses the image from that in Business details. I do not have any images in Invoice defaults or even custom images on lap top.

When I was swapping data to desktop (cos it has a big screen and easy to work with) i didnt have the problem that I have
it doesnt require a new image iether a custom or including in form defaults.

doesn’t the default invoice theme pick up the image from business details, and then asking theme enhancer you get theme enhancer to move it to where you want it. thats how it worked when I created the custom theme on the lap top…and until now I have never had a problem moving the data between laptop to desktop.

Something else. I fixed the logo issue on desktop but when I did a back up it had still lost the logo when opened up on laptop…suggesting something is left behind when you do a back up.

Any ways I copied code from desktop and then onto lap top and all back to normal.