just in case you still want to do this…
My start template is “Plain”
In the INCLUDES tab, add following code:
/** START terms and conditions on a new page **/
/** **/
/** SOURCE - https://forum.invoiceninja.com/t/how-to-put-the-terms-and-conditions-on-a-separate-page-of-the-pdf/11553/5**/
div.termspage
{
page-break-after: always;
page-break-inside: avoid;
}
[data-ref="total_table-terms"] { display: none }
/** END terms and conditions on a new page **/
Then in the Body add following code before last </div>
<div class="termspage">$terms</div>
This is not perfect, it will cause the Body div to stretch to the new page, and shift footer below it. Not sure how to fight that yet.
Make it pretty to your taste.
Full template code
{
"header": "<div class=\"repeating-header\" id=\"header\"></div>",
"body": "<div id=\"body\">\n <div class=\"header-wrapper\">\n <div id=\"company-details\"></div>\n <div id=\"company-address\"></div>\n <div>\n <img class=\"company-logo\" src=\"$company.logo\" alt=\"$company.name logo\"> \n </div>\n </div>\n <div class=\"client-wrapper\">\n <div id=\"client-details\"></div>\n <div id=\"vendor-details\"></div>\n <div id=\"shipping-details\"></div>\n <div>\n <table id=\"entity-details\" cellspacing=\"0\" cellpadding=\"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 d following\n <div class=\"termspage\">$terms</div>\n </div>",
"footer": "<div class=\"repeating-footerx\" id=\"footer\">\n <p data-ref=\"total_table-footer\">$entity_footer</p>\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</div>",
"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 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 table tr td,\n table tr,\n th {\n font-size: $font_size !important;\n }\n\n html {\n width: 210mm;\n height: 200mm;\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\n p {\n margin: 0;\n padding: 0;\n }\n\n .header-wrapper {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n line-height: var(--line-height);\n margin-bottom:10px;\n }\n\n .client-wrapper{\n display: grid;\n gap: 10px;\n grid-template-columns: 1fr 1fr 1fr;\n grid-template-areas: \"a b c \";\n grid-auto-columns: minmax(0, 1fr);\n grid-auto-flow: column;\n justify-content:left;\n line-height: var(--line-height);\n\n }\n\n .company-logo {\n max-width: $company_logo_size;\n }\n\n .header-wrapper #company-address {\n display: flex;\n flex-direction: column;\n line-height: var(--line-height);\n }\n\n #entity-details {\n text-align: left;\n width: 100%;\n line-height: var(--line-height) !important;\n white-space: nowrap;\n }\n\n #entity-details>tr,\n #entity-details th {\n font-weight: normal;\n padding-right: 3rem;\n line-height: var(--line-height) !important;\n }\n\n .header-wrapper #entity-details [data-element='entity-balance-due-label'],\n .header-wrapper #entity-details [data-element='entity-balance-due'] {\n background-color: #e6e6e6;\n }\n\n #client-details {\n display: flex;\n flex-direction: column;\n line-height: var(--line-height);\n white-space: nowrap;\n }\n\n #shipping-details {\n opacity: $show_shipping_address_visibility;\n flex-direction: column;\n line-height: var(--line-height);\n white-space: nowrap;\n }\n\n [data-ref=\"table\"] {\n margin-top: 1rem;\n min-width: 100%;\n table-layout: fixed;\n overflow-wrap: break-word;\n margin-bottom: 5px;\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 }\n\n [data-ref=\"table\"]>thead>tr>th {\n padding: 0.5rem;\n background-color: #e6e6e6;\n }\n\n [data-ref=\"table\"]>thead>tr>th:last-child {\n text-align: right;\n }\n\n [data-ref=\"table\"]>tbody>tr>td {\n border-bottom: 1px solid #e6e6e6;\n padding: 0.75rem;\n }\n\n [data-ref=\"table\"]>tbody>tr>td:last-child {\n text-align: right;\n }\n\n #table-totals {\n margin-top: 0rem;\n display: grid;\n grid-template-columns: 2fr 1fr;\n padding-top: .5rem;\n padding-left: .5rem;\n margin-right: .75rem;\n gap: 80px;\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: .25rem;\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(.25rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(.25rem * var(--tw-space-y-reverse));\n }\n\n #table-totals>.totals-table-right-side>*> :nth-child(2) {\n text-align: right;\n padding-right: 0px;\n }\n\n #table-totals>* [data-element='total-table-balance-due-label'],\n #table-totals>* [data-element='total-table-balance-due'] {\n font-weight: bold;\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: 1rem\n }\n\n #footer {\n margin-top: 30px;\n }\n\n [data-ref=\"totals_table-outstanding\"] {\n color: var(--primary-color)\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: #e6e6e6;\n color: black;\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\n .repeating-header {\n position: fixed;\n top: 0;\n }\n\n .repeating-footer {\n position: fixed;\n bottom: 0;\n }\n\n [data-element='product_table-product.description-td'],\n 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/** START terms and conditions on a new page **/\n/** **/\n/** SOURCE - https://forum.invoiceninja.com/t/how-to-put-the-terms-and-conditions-on-a-separate-page-of-the-pdf/11553/5**/\n div.termspage\n {\n page-break-after: always;\n page-break-inside: avoid;\n }\n\n [data-ref=\"total_table-terms\"] { display: none }\n\n/** END terms and conditions on a new page **/\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\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>"
}
Also, Split Terms and Public notes to dedicated pages - #24 by checkitsedo
has a better solution.
Still have to figure out how to repeat the footer…