Quotation Terms Display Issue

vignesh.ramji23 · July 5, 2023, 8:08am

Hi !
I am new to this application and need some help in making the quote terms appear properly.
I have been surfing around a lot and have not come across this issue. Any help would be appreciated.

In the attached image, there is a lot of space available on the page where i am displaying these conditions but for some reason, the text does not use the who space available in each line and ends up moving the text to the next line.

Apologies if this is a repeated topic but i want to know if this is something which can be rectified.

Edit: Adding to the above query, if i have configured the default quote terms in the default section, why does this not show up when i make the quote. I have some fields in my terms which will need to be edited. Is there some place where i need to configure wherein i can see the quote terms appear in the editable section of the quote while making a new quote?

Right now it is only displaying the default terms.

TIA

hillel · July 5, 2023, 9:00am

Hi,

@david can you please advise on the terms width?

Once you save the quote the default terms will be populated on the quote.

vignesh.ramji23 · July 5, 2023, 10:05am

Hi @hillel.
Yes, the default terms show up. Just verified.
Hoping to get some help on the width as well.

Very impressed with the platform and i need to showcase this to my team so we can consider using this platform.

david · July 5, 2023, 11:13am

Which design are you using?

The terms shares a section next to the totals, so it is restricted to about 2/3’s of the pages width.

vignesh.ramji23 · July 8, 2023, 5:11am

Hi @david,
I am using the Business layout.
I have figured out how to start my terms on the next page after digging into some CSS and HTML coding.

So now, I managed to start it on the next page, but it feels weird as to why this width is 2/3rd when i am on a new page. I can understand if this is applicable on the same page as the quote with the line items and totals.

Would it be possible to make it use the full width if Terms and Conditions are started on a new page??
Would be great if this is available as maybe an option / check box to allow this for users to select if they want it this way. I think many would be happy if this is possible.

TIA

david · July 9, 2023, 5:45am

@vignesh.ramji23

Small loom video here which may help with this:

vignesh.ramji23 · July 10, 2023, 3:14am

Hi @david, Could you try writing a line of text which goes till the end of the line in the second page? It tends to wrap the text right before the point where the Balance Due text starts on the next page.

If you can share how this is done to prevent the wrap text on page 2, that would solve my issue.
I am just getting started with Invoice Ninja and will now look into the custom design feature.

david · July 10, 2023, 7:37am

The new div will be full width.

vignesh.ramji23 · July 11, 2023, 9:21am

Hi @david
Thanks for the video and snapshot of the code.

I would love to make my own template but i have close to no knowledge on the code part of creating a custom template and unfortunately, i don’t find too much documentation or videos to help doing this.

I will need to pick up some of the HTML coding basics to dive deep into this as i tried what you said and it looks like this is only happening if the terms are static in this section of code?

I need to see how i can save my static terms under the defaults section for quote and make sure this text is editable when i make a quote under the terms section keeping in mind that i want the terms to begin in the new page and with full width.

if you could make a short video of this and share it, i would appreciate it a lot as we are slowly beginning to migrate to this tool and want to start in the right manner from the beginning.

TIA

david · July 11, 2023, 11:32pm

@vignesh.ramji23

If you follow the video above, that is all that is required when creating a new design.

Afterwards, just ensure your default quote terms are set in Settings > Company Details > Defaults and these will be used in each Quote.

vignesh.ramji23 · July 12, 2023, 11:41am

@david

Sorry but for some reason, I followed your steps and still see that this is showing only the text which $entity-details has on the next page.

I shall export my design and it would be great if you could see what it is I am doing incorrectly because i do not see my terms which is stored under Settings > Company Details > Defaults appear in the next page.

{"includes":"<style id=\"style\">\r\n    @import url($font_url);\r\n    \r\n    :root {\r\n        --primary-color: $primary_color;\r\n        --secondary-color: $secondary_color;\r\n        --line-height: 1.6;\r\n    }\r\n\r\n    html {\r\n        width: 210mm;\r\n        height: 200mm;     \r\n    }\r\n\r\n    body {\r\n        -webkit-font-smoothing: antialiased;\r\n        -moz-osx-font-smoothing: grayscale;\r\n        font-family: $font_name, Helvetica, sans-serif;\r\n        font-size: $font_size !important;\r\n        zoom: 80%;\r\n    }\r\n\r\n\r\n    table tr td, table tr, th {\r\n        font-size: $font_size !important;\r\n    }\r\n\r\n    @page {\r\n        margin-left: $global_margin;\r\n        margin-right: $global_margin;\r\n        margin-top: 0;\r\n        margin-bottom: 0;\r\n        size: $page_size $page_layout;\r\n    }\r\n\r\n    p {\r\n        margin: 0;\r\n        padding: 0;\r\n    }\r\n\r\n    .header-container {\r\n        display: grid;\r\n        grid-template-columns: 1.8fr 1fr 1fr;\r\n        grid-gap: 20px;\r\n        margin-bottom: 2rem;\r\n    }\r\n\r\n    .company-logo {\r\n/*        max-width: 65%;*/        \r\n        max-width: $company_logo_size;\r\n    }\r\n\r\n    .header-container > span {\r\n        display: block;\r\n    }\r\n\r\n    #company-details {\r\n        display: flex;\r\n        flex-direction: column;\r\n        color: #AAA9A9;\r\n        line-height: var(--line-height);\r\n    }\r\n\r\n    #company-address {\r\n        display: flex;\r\n        flex-direction: column;\r\n        color: #b1b1b1;\r\n        line-height: var(--line-height);\r\n    }\r\n\r\n    .entity-issued-to {\r\n        /* margin-top: 2rem; */\r\n        font-weight: bold;\r\n    }\r\n\r\n    .client-and-entity-wrapper {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        gap: 20px;\r\n        margin-bottom: 2rem;\r\n    }\r\n\r\n    #client-details {\r\n        display: flex;\r\n        flex-direction: column;\r\n        line-height: var(--line-height);\r\n        vertical-align: top;\r\n        margin-left: 1rem;\r\n    }\r\n\r\n    #client-details > p:nth-child(2) {\r\n        color: var(--primary-color);\r\n        font-size: 120%;\r\n    }\r\n\r\n    #shipping-details {\r\n        display: $show_shipping_address;\r\n        flex-direction: column;\r\n        line-height: var(--line-height);\r\n    }\r\n\r\n    #entity-details {\r\n        background-color: var(--primary-color);\r\n        padding: 1.2rem;\r\n        border-radius: 1rem;\r\n        width: 100%;\r\n        color: white;\r\n        text-align: left;\r\n    }\r\n\r\n    #entity-details p { margin-right: 20px; }\r\n\r\n    #entity-details th {\r\n        font-weight: normal;\r\n        padding-bottom: .5rem;\r\n    }\r\n\r\n    #entity-details > tbody > tr > th:nth-child(2) {\r\n        text-align: right;\r\n    }\r\n\r\n    [data-ref=\"table\"] {\r\n        margin-top: 0.5rem;\r\n        margin-bottom: 5px; \r\n        min-width: 100%;\r\n        table-layout: fixed;\r\n        overflow-wrap: break-word;\r\n    }\r\n\r\n    .task-time-details {\r\n        display: block;\r\n        margin-top: 5px;\r\n        color: grey;\r\n    }\r\n\r\n    [data-ref=\"table\"] > thead {\r\n        text-align: left;\r\n        background: var(--secondary-color);\r\n    }\r\n\r\n    [data-ref=\"table\"] > thead > tr > th {\r\n        padding: 1rem;\r\n        color: white;\r\n        font-weight: semibold;\r\n    }\r\n\r\n    [data-ref=\"table\"] > thead > tr > th:first-child {\r\n        border-top-left-radius: 1rem;\r\n    }\r\n\r\n    [data-ref=\"table\"] > thead > tr > th:last-child {\r\n        border-top-right-radius: 1rem;\r\n        text-align: right;\r\n    }\r\n\r\n    [data-ref=\"table\"] > tbody > tr > td {\r\n        padding: 1rem;\r\n    }\r\n\r\n    [data-ref=\"table\"] > tbody > tr > td:last-child {\r\n        text-align: right;\r\n    }\r\n\r\n    [data-ref=\"table\"] > tbody > tr:nth-child(odd) > td {\r\n        background: #F7F7F7;\r\n    }\r\n\r\n    [data-ref=\"table\"] > tbody > tr:nth-child(even) > td {\r\n        background: #f7f7f7;\r\n    }\r\n\r\n    [data-element='product-table-balance-due-label'],\r\n    [data-element='product-table-balance-due'],\r\n    [data-element='task-table-balance-due-label'],\r\n    [data-element='task-table-balance-due'] {\r\n        color: var(--secondary-color) !important;\r\n        font-weight: bold !important;\r\n    }\r\n\r\n    #table-totals > *:last-child {\r\n        border-bottom-left-radius: 1rem;\r\n        border-bottom-right-radius: 1rem;\r\n    }\r\n\r\n    #table-totals {\r\n        margin-top: 0rem;\r\n        display: grid;\r\n        grid-template-columns: 2fr 1fr;\r\n        gap: 80px;\r\n        padding-top: 0.5rem;\r\n        padding-bottom: 0.8rem;\r\n        padding-left: 0.7rem;\r\n        page-break-inside:auto;\r\n        overflow: visible !important;\r\n    }\r\n\r\n    #table-totals .totals-table-right-side>* {\r\n        display: grid;\r\n        grid-template-columns: 1fr 1fr;\r\n    }\r\n\r\n    #table-totals>.totals-table-right-side>*> :nth-child(1) {\r\n        text-align: $dir_text_align;\r\n        margin-top: .75rem;\r\n        padding-left: 7px;\r\n    }\r\n\r\n    #table-totals>.totals-table-right-side> * > :not([hidden]) ~ :not([hidden]) {\r\n        --tw-space-y-reverse: 0;\r\n        margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));\r\n        margin-bottom: calc(.75rem * var(--tw-space-y-reverse));\r\n    }\r\n\r\n    #table-totals>.totals-table-right-side>*> :nth-child(2) {\r\n        text-align: right;\r\n        padding-right: 17px;\r\n    }\r\n\r\n    #table-totals\r\n    > *\r\n    [data-element='product-table-balance-due-label'],\r\n    #table-totals\r\n    > *\r\n    [data-element='product-table-balance-due'] {\r\n        font-weight: bold;\r\n        font-size: 1.2rem;\r\n    }\r\n\r\n    #table-totals\r\n    > *\r\n    [data-element='product-table-balance-due'] {\r\n        color: red;\r\n    }\r\n\r\n    #table-totals > * > :last-child {\r\n        text-align: right;\r\n        padding-right: 1rem;\r\n    }\r\n\r\n    [data-ref=\"total_table-footer\"] {\r\n        padding-left: 0.8rem\r\n    }\r\n\r\n    #footer {\r\n        margin-top: 30px;\r\n    }\r\n\r\n    /** Markdown-specific styles. **/\r\n    [data-ref=\"table\"] h3 {\r\n        font-size: 1rem;\r\n        margin-bottom: 0;\r\n    }\r\n\r\n    [data-ref=\"totals_table-outstanding-label\"],\r\n    [data-ref=\"totals_table-outstanding\"] {\r\n        background-color: var(--secondary-color);\r\n        color: white;\r\n        padding-top: 7px;\r\n        padding-bottom: 7px;\r\n        padding-right: 7px;\r\n    }\r\n\r\n    [data-ref=\"statement-totals\"] {\r\n        margin-top: 1rem;\r\n        text-align: right;\r\n        margin-right: .75rem;\r\n    }\r\n\r\n    [data-ref*=\".line_total-td\"] {\r\n        white-space: nowrap;\r\n    }\r\n\r\n    /** .repeating-header,\r\n    .repeating-header-space, **/\r\n    .repeating-footer,\r\n    .repeating-footer-space {\r\n        height: 10px;\r\n    }\r\n    .repeating-header {\r\n        position: fixed;\r\n        top: 0;\r\n    }\r\n    .repeating-footer {\r\n        position: fixed;\r\n        bottom: 0;\r\n    }\r\n\r\n    [data-element='product_table-product.description-td'], td {\r\n        min-width:100%;\r\n        max-width: 300px;\r\n        overflow-wrap: break-word; \r\n    }\r\n\r\n    .stamp {\r\n      transform: rotate(12deg);\r\n        color: #555;\r\n        font-size: 3rem;\r\n        font-weight: 700;\r\n        border: 0.25rem solid #555;\r\n        display: inline-block;\r\n        padding: 0.25rem 1rem;\r\n        text-transform: uppercase;\r\n        border-radius: 1rem;\r\n        font-family: 'Courier';\r\n        mix-blend-mode: multiply;\r\n        z-index:200 !important;\r\n        position:  fixed;\r\n        text-align: center;\r\n    }\r\n\r\n    .is-paid {\r\n        color:  #D23;\r\n        border: 1rem double  #D23;\r\n        transform: rotate(-5deg);\r\n        font-size: 6rem;\r\n        font-family: \"Open sans\", Helvetica, Arial, sans-serif;\r\n        border-radius: 0;\r\n        padding: 0.5rem;\r\n        opacity: 0.2;\r\n        z-index:200 !important;\r\n        position:  fixed;\r\n        display: $show_paid_stamp;\r\n    } \r\n    \r\n    .project-header {\r\n        font-size: 1.2em;\r\n        margin-top: 0.1em;\r\n        margin-bottom: 0;\r\n        padding-bottom: 0;\r\n        margin-left: 0;\r\n        margin-right: 0;\r\n        font-weight: bold;\r\n        color: #505050;\r\n    } \r\n\r\n    .pqrcode {\r\n        \r\n    }\r\n    /** Useful snippets, uncomment to enable. **/\r\n\r\n    /** Hide company logo **/\r\n    /* .company-logo { display: none } */\r\n\r\n    /* Hide company details */\r\n    /* #company-details > * { display: none } */\r\n\r\n    /* Hide company address */\r\n    /* #company-address > * { display: none } */\r\n\r\n    /* Hide public notes */\r\n    /* [data-ref=\"total_table-public_notes\"] { display: none } */\r\n\r\n    /* Hide terms label */\r\n    [data-ref=\"total_table-terms-label\"] { display: none }\r\n\r\n    /* Hide totals table */\r\n    /* #table-totals { display: none } */\r\n\r\n    /* Hide totals table left side */\r\n    /* #table-totals div:first-child > * { display: none !important } */\r\n\r\n    /* Hide totals table right side */\r\n    /* .totals-table-right-side { display: none } */\r\n\r\n    /** For more info, please check our docs: https://invoiceninja.github.io **/\r\n    /** To find out selectors on your own: https://invoiceninja.github.io/docs/custom-fields/#snippets **/\r\n</style>","header":"<div class=\"repeating-header\" id=\"header\"></div>","body":"<div id=\"body\">\r\n               <div class=\"header-container\">\r\n                  <img src=\"$company.logo\" class=\"company-logo\" alt=\"$company.name logo\">\r\n                  <div id=\"company-details\"></div>\r\n                  <div id=\"company-address\"></div>\r\n               </div>\r\n               <div class=\"client-and-entity-wrapper\">\r\n                <div id=\"client-details\"><p class=\"entity-issued-to\">$entity_issued_to_label:</p></div>\r\n                  <div id=\"vendor-details\"></div>\r\n                <div id=\"shipping-details\"></div>\r\n                  <div class=\"entity-details-wrapper\">\r\n                     <table id=\"entity-details\" cellspacing=\"0\" dir=\"$dir\"></table>\r\n                  </div>\r\n               </div>\r\n               <table id=\"product-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n               <table id=\"task-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n               <table id=\"delivery-note-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n               <table id=\"statement-invoice-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n               <div id=\"statement-invoice-table-totals\" data-ref=\"statement-totals\"></div>\r\n               <table id=\"statement-payment-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n               <div id=\"statement-payment-table-totals\" data-ref=\"statement-totals\"></div>\r\n                            <table id=\"statement-credit-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n                            <div id=\"statement-credit-table-totals\" data-ref=\"statement-totals\"></div>\r\n               <table id=\"statement-aging-table\" cellspacing=\"0\" data-ref=\"table\"></table>\r\n               <div id=\"statement-aging-table-totals\" data-ref=\"statement-totals\"></div>\r\n               <div id=\"table-totals\" cellspacing=\"0\">$status_logo</div>\r\n               <div style=\"page-break-before:always; padding-top:20px\">$client</div>\r\n            </div>","product":"","task":"","footer":"<div class=\"repeating-footerx\" id=\"footer\">\n    <p data-ref=\"total_table-footer\">$entity_footer</p>\n\n\n<script>\n    // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.\n    document.addEventListener('DOMContentLoaded', () => {\n        let tables = [\n            'product-table', 'task-table', 'delivery-note-table',\n            'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',\n            'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table',\n            'client-details', 'vendor-details', 'swiss-qr', 'shipping-details', 'statement-credit-table', 'statement-credit-table-totals',\n        ];\n\n        tables.forEach((tableIdentifier) => {\n            document.getElementById(tableIdentifier).childElementCount === 0\n                ? document.getElementById(tableIdentifier).style.display = 'none'\n                : '';\n        });\n    });\n</script>\n\n</div>"}

vignesh.ramji23 · July 12, 2023, 12:01pm

But the text you have entered is directly under the div in the custom template. This does not apply when you have the quote remarks. It still appears in the same place. Hope to hear more from your side.

david · July 13, 2023, 1:58am

@vignesh.ramji23

Do you mean the public notes?

These are bundle in the same location of the terms, so if you need to transfer these to the next page, you would follow the same steps.

{"includes":"<style id=\"style\">\n    @import url($font_url);\n    \n    :root {\n        --primary-color: $primary_color;\n        --secondary-color: $secondary_color;\n        --line-height: 1.6;\n    }\n\n    html {\n        width: 210mm;\n        height: 200mm;     \n    }\n\n    body {\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n        font-family: $font_name, Helvetica, sans-serif;\n        font-size: $font_size !important;\n        zoom: 80%;\n    }\n\n\n    table tr td, table tr, th {\n        font-size: $font_size !important;\n    }\n\n    @page {\n        margin-left: $global_margin;\n        margin-right: $global_margin;\n        margin-top: 0;\n        margin-bottom: 0;\n        size: $page_size $page_layout;\n    }\n\n    p {\n        margin: 0;\n        padding: 0;\n    }\n\n    .header-container {\n        display: grid;\n        grid-template-columns: 1.8fr 1fr 1fr;\n        grid-gap: 20px;\n        margin-bottom: 2rem;\n    }\n\n    .company-logo {\n/*        max-width: 65%;*/        \n        max-width: $company_logo_size;\n    }\n\n    .header-container > span {\n        display: block;\n    }\n\n    #company-details {\n        display: flex;\n        flex-direction: column;\n        color: #AAA9A9;\n        line-height: var(--line-height);\n    }\n\n    #company-address {\n        display: flex;\n        flex-direction: column;\n        color: #b1b1b1;\n        line-height: var(--line-height);\n    }\n\n    .entity-issued-to {\n        /* margin-top: 2rem; */\n        font-weight: bold;\n    }\n\n    .client-and-entity-wrapper {\n        display: flex;\n        justify-content: space-between;\n        gap: 20px;\n        margin-bottom: 2rem;\n    }\n\n    #client-details {\n        display: flex;\n        flex-direction: column;\n        line-height: var(--line-height);\n        vertical-align: top;\n        margin-left: 1rem;\n    }\n\n    #client-details > p:nth-child(2) {\n        color: var(--primary-color);\n        font-size: 120%;\n    }\n\n    #shipping-details {\n        display: $show_shipping_address;\n        flex-direction: column;\n        line-height: var(--line-height);\n    }\n\n    #entity-details {\n        background-color: var(--primary-color);\n        padding: 1.2rem;\n        border-radius: 1rem;\n        width: 100%;\n        color: white;\n        text-align: left;\n    }\n\n    #entity-details p { margin-right: 20px; }\n\n    #entity-details th {\n        font-weight: normal;\n        padding-bottom: .5rem;\n    }\n\n    #entity-details > tbody > tr > th:nth-child(2) {\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] {\n        margin-top: 0.5rem;\n        margin-bottom: 5px; \n        min-width: 100%;\n        table-layout: fixed;\n        overflow-wrap: break-word;\n    }\n\n    .task-time-details {\n        display: block;\n        margin-top: 5px;\n        color: grey;\n    }\n\n    [data-ref=\"table\"] > thead {\n        text-align: left;\n        background: var(--secondary-color);\n    }\n\n    [data-ref=\"table\"] > thead > tr > th {\n        padding: 1rem;\n        color: white;\n        font-weight: semibold;\n    }\n\n    [data-ref=\"table\"] > thead > tr > th:first-child {\n        border-top-left-radius: 1rem;\n    }\n\n    [data-ref=\"table\"] > thead > tr > th:last-child {\n        border-top-right-radius: 1rem;\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td {\n        padding: 1rem;\n    }\n\n    [data-ref=\"table\"] > tbody > tr > td:last-child {\n        text-align: right;\n    }\n\n    [data-ref=\"table\"] > tbody > tr:nth-child(odd) > td {\n        background: #F7F7F7;\n    }\n\n    [data-ref=\"table\"] > tbody > tr:nth-child(even) > td {\n        background: #f7f7f7;\n    }\n\n    [data-element='product-table-balance-due-label'],\n    [data-element='product-table-balance-due'],\n    [data-element='task-table-balance-due-label'],\n    [data-element='task-table-balance-due'] {\n        color: var(--secondary-color) !important;\n        font-weight: bold !important;\n    }\n\n    #table-totals > *:last-child {\n        border-bottom-left-radius: 1rem;\n        border-bottom-right-radius: 1rem;\n    }\n\n    #table-totals {\n        margin-top: 0rem;\n        display: grid;\n        grid-template-columns: 2fr 1fr;\n        gap: 80px;\n        padding-top: 0.5rem;\n        padding-bottom: 0.8rem;\n        padding-left: 0.7rem;\n        page-break-inside:auto;\n        overflow: visible !important;\n    }\n\n    #table-totals .totals-table-right-side>* {\n        display: grid;\n        grid-template-columns: 1fr 1fr;\n    }\n\n    #table-totals>.totals-table-right-side>*> :nth-child(1) {\n        text-align: $dir_text_align;\n        margin-top: .75rem;\n        padding-left: 7px;\n    }\n\n    #table-totals>.totals-table-right-side> * > :not([hidden]) ~ :not([hidden]) {\n        --tw-space-y-reverse: 0;\n        margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));\n        margin-bottom: calc(.75rem * var(--tw-space-y-reverse));\n    }\n\n    #table-totals>.totals-table-right-side>*> :nth-child(2) {\n        text-align: right;\n        padding-right: 17px;\n    }\n\n    #table-totals\n    > *\n    [data-element='product-table-balance-due-label'],\n    #table-totals\n    > *\n    [data-element='product-table-balance-due'] {\n        font-weight: bold;\n        font-size: 1.2rem;\n    }\n\n    #table-totals\n    > *\n    [data-element='product-table-balance-due'] {\n        color: red;\n    }\n\n    #table-totals > * > :last-child {\n        text-align: right;\n        padding-right: 1rem;\n    }\n\n    [data-ref=\"total_table-footer\"] {\n        padding-left: 0.8rem\n    }\n\n    #footer {\n        margin-top: 30px;\n    }\n\n    /** Markdown-specific styles. **/\n    [data-ref=\"table\"] h3 {\n        font-size: 1rem;\n        margin-bottom: 0;\n    }\n\n    [data-ref=\"totals_table-outstanding-label\"],\n    [data-ref=\"totals_table-outstanding\"] {\n        background-color: var(--secondary-color);\n        color: white;\n        padding-top: 7px;\n        padding-bottom: 7px;\n        padding-right: 7px;\n    }\n\n    [data-ref=\"statement-totals\"] {\n        margin-top: 1rem;\n        text-align: right;\n        margin-right: .75rem;\n    }\n\n    [data-ref*=\".line_total-td\"] {\n        white-space: nowrap;\n    }\n\n    /** .repeating-header,\n    .repeating-header-space, **/\n    .repeating-footer,\n    .repeating-footer-space {\n        height: 10px;\n    }\n    .repeating-header {\n        position: fixed;\n        top: 0;\n    }\n    .repeating-footer {\n        position: fixed;\n        bottom: 0;\n    }\n\n    [data-element='product_table-product.description-td'], td {\n        min-width:100%;\n        max-width: 300px;\n        overflow-wrap: break-word; \n    }\n\n    .stamp {\n      transform: rotate(12deg);\n        color: #555;\n        font-size: 3rem;\n        font-weight: 700;\n        border: 0.25rem solid #555;\n        display: inline-block;\n        padding: 0.25rem 1rem;\n        text-transform: uppercase;\n        border-radius: 1rem;\n        font-family: 'Courier';\n        mix-blend-mode: multiply;\n        z-index:200 !important;\n        position:  fixed;\n        text-align: center;\n    }\n\n    .is-paid {\n        color:  #D23;\n        border: 1rem double  #D23;\n        transform: rotate(-5deg);\n        font-size: 6rem;\n        font-family: \"Open sans\", Helvetica, Arial, sans-serif;\n        border-radius: 0;\n        padding: 0.5rem;\n        opacity: 0.2;\n        z-index:200 !important;\n        position:  fixed;\n        display: $show_paid_stamp;\n    } \n    \n    .project-header {\n        font-size: 1.2em;\n        margin-top: 0.1em;\n        margin-bottom: 0;\n        padding-bottom: 0;\n        margin-left: 0;\n        margin-right: 0;\n        font-weight: bold;\n        color: #505050;\n    } \n\n    .pqrcode {\n        \n    }\n    /** Useful snippets, uncomment to enable. **/\n\n    /** Hide company logo **/\n    /* .company-logo { display: none } */\n\n    /* Hide company details */\n    /* #company-details > * { display: none } */\n\n    /* Hide company address */\n    /* #company-address > * { display: none } */\n\n    /* Hide public notes */\n    /* [data-ref=\"total_table-public_notes\"] { display: none } */\n\n    /* Hide terms label */\n    [data-ref=\"total_table-terms-label\"] { display: none }\n    [data-ref=\"total_table-terms\"] { display: none }\n\n    [data-ref=\"total_table-public_notes-label\"] { display: none }\n    [data-ref=\"total_table-public_notes\"] { display: none }\n\n    /* Hide totals table */\n    /* #table-totals { display: none } */\n\n    /* Hide totals table left side */\n    /* #table-totals div:first-child > * { display: none !important } */\n\n    /* Hide totals table right side */\n    /* .totals-table-right-side { display: none } */\n\n    /** For more info, please check our docs: https://invoiceninja.github.io **/\n    /** To find out selectors on your own: https://invoiceninja.github.io/docs/custom-fields/#snippets **/\n</style>","header":"<div class=\"repeating-header\" id=\"header\"></div>","body":"<div id=\"body\">\n               <div class=\"header-container\">\n                  <img src=\"$company.logo\" class=\"company-logo\" alt=\"$company.name logo\">\n                  <div id=\"company-details\"></div>\n                  <div id=\"company-address\"></div>\n               </div>\n               <div class=\"client-and-entity-wrapper\">\n                <div id=\"client-details\"><p class=\"entity-issued-to\">$entity_issued_to_label:</p></div>\n                  <div id=\"vendor-details\"></div>\n                <div id=\"shipping-details\"></div>\n                  <div class=\"entity-details-wrapper\">\n                     <table id=\"entity-details\" cellspacing=\"0\" dir=\"$dir\"></table>\n                  </div>\n               </div>\n               <table id=\"product-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n               <table id=\"task-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n               <table id=\"delivery-note-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n               <table id=\"statement-invoice-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n               <div id=\"statement-invoice-table-totals\" data-ref=\"statement-totals\"></div>\n               <table id=\"statement-payment-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n               <div id=\"statement-payment-table-totals\" data-ref=\"statement-totals\"></div>\n                            <table id=\"statement-credit-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n                            <div id=\"statement-credit-table-totals\" data-ref=\"statement-totals\"></div>\n               <table id=\"statement-aging-table\" cellspacing=\"0\" data-ref=\"table\"></table>\n               <div id=\"statement-aging-table-totals\" data-ref=\"statement-totals\"></div>\n               <div id=\"table-totals\" cellspacing=\"0\">$status_logo</div>\n               <div style=\"page-break-before:always; padding-top:20px\">\n\n                   $entity.public_notes\n                   <br>   \n                   $entity.terms\n                   \n                </div>\n            </div>","product":"","task":"","footer":"<div class=\"repeating-footerx\" id=\"footer\">\n    <p data-ref=\"total_table-footer\">$entity_footer</p>\n\n\n<script>\n    // Clear up space a bit, if [product-table, tasks-table, delivery-note-table] isn't present.\n    document.addEventListener('DOMContentLoaded', () => {\n        let tables = [\n            'product-table', 'task-table', 'delivery-note-table',\n            'statement-invoice-table', 'statement-payment-table', 'statement-aging-table-totals',\n            'statement-invoice-table-totals', 'statement-payment-table-totals', 'statement-aging-table',\n            'client-details', 'vendor-details', 'swiss-qr', 'shipping-details', 'statement-credit-table', 'statement-credit-table-totals',\n        ];\n\n        tables.forEach((tableIdentifier) => {\n            document.getElementById(tableIdentifier).childElementCount === 0\n                ? document.getElementById(tableIdentifier).style.display = 'none'\n                : '';\n        });\n    });\n</script>\n\n</div>"}

vignesh.ramji23 · July 14, 2023, 8:19am

Thanks a lot for you support.
I have created my template with your shared template.

Much appreciated.