Customize Your Royalty Statement Layout (2024)

Updated abril 20, 2026 16 min read

To help you customize your royalty statement layout, we ve provided three main components:

Header Royalty,
Royalty Template, and
Contract Template.

Below you will find the HTML/CSS code that you can use as a base to create your customized royalty statements.

1. Header Royalty

This section displays the logo and address on the top of the royalty statement.

<table style=“width: 965px; border-bottom: 1px solid #828282;” border=“0”>
<tbody>
<tr>
<td style=“text-align: left; width: 50%;vertical-align: top;”>
<img src=“URL TO YOUR LOGO” style=“width: 50%;” />
</td>
<td style=“text-align: right; width: 50%; vertical-align: top;”>
<span style=“font: 10pt Roboto;”>
YOUR NAME<br />
YOUR ADDRESS 1<br />
YOUR ADDRESS 2<br />
YOURZIP CITY<br />
YOUR COUNTRY
</span>
</td>
</tr>
<tr>
<td style=“text-align: left; width: 50%;vertical-align: top;”>&nbsp;</td>
<td style=“text-align: right; width: 50%; vertical-align: top;”>&nbsp;</td>
</tr>
</tbody>
</table>

► 2. Royalty Template

This section displays the Royalty Statement summary page and overview of contracts.

[% SET contact = data.contact; %]
[% SET stmt_summary = data.stmt_summary; %]
[% SET rp = data.rp; %]
[% SET ra = data.ra; %]
[% SET statement_info = data.statement_info; %]
[% SET contracts = statement_info.contracts %]
[% SET invoice_project = data.invoice_project %]
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
<title>Royalty Statement – [% ra.royalty_account_name %] – [% rp.start_date _’ – ‘_ rp.end_date %]</title>

<style type=”text/css”>
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap’);
body {
font-family: “Roboto”, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 10pt;
margin-left: 50px;
}
.grey_text {
color: #828282;
}
span {
line-height: 1.3 !important;
}
#footer {
margin-top: 50px;
clear: both;
display: block;
position: fixed;
bottom: 0;
display: none;
}
.page-header2 {
visibility: hidden;
}
tfoot,
#tfoot {
margin-top: 50px;
}
.button {
display: inline-block;
padding: 5px;
margin-right: 5px;
font-size: 12px;
color: #007bff;
text-align: center;
text-decoration: none;
border: 1px solid #007bff;
border-radius: 3px;
opacity: 1;
transition: background-color 0.3s, color 0.3s;
}

.green_number{
color: #333;
background-color: #e0f5e0;
padding: 0 0 0 5;
}
.red_number{
color: #333;
background-color: #ffacac;
padding: 0 0 0 5;
}
.page-break {
page-break-before: always;
break-before: always;
}
</style>
<style type=”text/css” media=”print”>
body {
margin-left: 0px;
}
#first_trailing_text {
margin-bottom: 50px;
position: absolute;
bottom: 0;
}
.page-header2 {
visibility: visible;
width: 100%;
}
#buttons{
display: none;
}

#footer {
margin-top: 50px;
display: block;
position: fixed;
bottom: 0;
}
tfoot,
#tfoot {
margin-top: 50px;
opacity: 0.0;
filter: Alpha(opacity=0);
}
.page-break {
page-break-before: always;
break-before: always;
}
</style>
</head>
<body>
<table style=”width: 965px; font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’;” border=”0″>

<thead>
<tr>
<td>
[% invoice_project.header_royalty %]
</td>
</tr>
</thead>
►
<tbody>
<tr>
<td>
<table style=”width: 965px;” border=”0″>
<tbody>
<p>&nbsp;</p>
<p>

[% IF contact.company_name != ” %][% contact.company_name %][% ELSE %][% contact.first_name _’ ‘_ contact.last_name %][% END %]<br />
[% IF contact.company_legalname != ” %][% contact.company_legalname %]<br />[% END %]
[% IF contact.address1 != ” %][% contact.address1 %]<br>[% END %]
[% IF contact.address2 != ” %][% contact.address2 %]<br>[% END %]
[% IF contact.city != ” %][% contact.city %]<br>[% END %]
[% IF contact.region != ” %][% contact.region %] – [% END %][% IF contact.postalcode != ” %][% contact.postalcode %][% END %]<br>
[% IF contact.country != ” %][% contact.country %][% END %]
</p>
<p>&nbsp;</p>
<p><span style=”font-size: 16pt;”>[% ra.royalty_account_name %]</span></p>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 100%; font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’;”>
<tbody>
<tr>
<td style=”width: 60%; margin-top: 0;”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 100%; font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’;”>
<tbody>
<tr>
<td style=”width: 50%; border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>Opening Balance</span>
</td>
<td style=”width: 50%; text-align: right; border-bottom: 1px solid #828282;”>
<span>[% stmt_summary.opening_balance | format(‘%.2f’) | format_number(“de”) %]</span>
</td>
</tr>
<tr>
<td style=”border-bottom: 1px solid black; padding: 7px 0;”>
<span class=”grey_text”>Royalty Amount</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid black;”>[% stmt_summary.royalty_amount | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
[% IF stmt_summary.additions != “” && stmt_summary.additions*1 != 0 %]
<tr>
<td style=”border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>Additions</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid #828282;”>[% stmt_summary.additions | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
[% END %]
[% IF stmt_summary.deductions != “” && stmt_summary.deductions*1 != 0 %]
<tr>
<td style=”border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>Deductions</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid #828282;”>[% stmt_summary.deductions | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
[% END %]

<tr>
<td style=”border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>Net Amount</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid #828282;”>
<span style=”border-radius: 5px; font-weight: bold;” class=”[% IF stmt_summary.net_amount > 0 %]green_number[% ELSIF stmt_summary.net_amount > 0 < 0 %]red_number[% END %]”>
[% stmt_summary.net_amount | format(‘%.2f’) | format_number(“de”) %]
</span>
</td>
</tr>
<tr>
<td style=”border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>VAT [% (rp.vat_rate || 0) | format(‘%.2f’) %]%</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid #828282;”>[% stmt_summary.vat_amount | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
[% IF stmt_summary.tax_amount != “” && stmt_summary.tax_amount*1 != 0 %]
<tr>
<td style=”border-bottom: 1px solid black; padding: 7px 0;”>
<span class=”grey_text”>Withholding Tax</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid black;”>[% stmt_summary.tax_amount | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
[% END %]
<tr>
<td style=”border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>Gross Amount</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid #828282;”>
<span style=”border-radius: 5px; font-weight: bold;” class=”[% IF stmt_summary.net_amount > 0 %]green_number[% ELSIF stmt_summary.net_amount > 0 < 0 %]red_number[% END %]”>
[% stmt_summary.gross_amount | format(‘%.2f’) | format_number(“de”) %]
</span>
</td>
</tr>

<tr>
<td style=”border-bottom: 1px solid #828282; padding: 7px 0;”>
<span class=”grey_text”>[% IF stmt_summary.closing_balance != ‘0.00’ %]
Closing Balance
[% ELSE %]
Amount Payable
[% END %]</span>
</td>
<td style=”text-align: right; border-bottom: 1px solid #828282;”>[% IF stmt_summary.closing_balance != ‘0.00’ %]
[% stmt_summary.closing_balance | format(‘%.2f’) | format_number(“de”) %]
[% ELSE %]
[% stmt_summary.amount_payable | format(‘%.2f’) | format_number(“de”) %]
[% END %]</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
<td style=”width: 10%;”>&nbsp;</td>

<td style=”width: 30%; vertical-align: top;”>
<table width=”100%” border=”0″ style=”font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’;”>
<tbody>
<tr>
<td>
<span class=”grey_text”>Date</span>
</td>
</tr>
<tr>
<td>[% data.today %]</td>
</tr>
<tr>
<td style=”line-height: 0.5;”>&nbsp;</td>
</tr>
<tr>
<td>
<span class=”grey_text”>Period</span>
</td>
</tr>
<tr>
<td>[% rp.start_date _’ – ‘_ rp.end_date %]</td>
</tr>
<tr>
<td style=”line-height: 0.5;”>&nbsp;</td>
</tr>
<tr>
<td>
<span class=”grey_text”>Statement Number</span>
</td>
</tr>
<tr>
<td>[% rp.royalty_period_id %]</td>
</tr>
<tr>
<td style=”line-height: 0.5;”>&nbsp;</td>
</tr>
<tr>
<td>
<span class=”grey_text”>Minimum Payment</span>
</td>
</tr>
<tr>
<td>[% stmt_summary.minimum_payment | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
<tr>
<td style=”line-height: 0.5;”>&nbsp;</td>
</tr>
<tr>
<td>
<span class=”grey_text”>Currency</span>
</td>
</tr>
<tr>
<td>[% data.currency_iso %]</td>
</tr>
<tr>
<td style=”line-height: 0.5;”>&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<p id=”buttons”>
<a href=”javascript:void(0)” class=”button” onclick=”window.open(window.location + ‘&’ + ‘xls=1’);”>Export Details to Excel</a>
<!– a href=”javascript:void(0)” class=”button” onclick=”window.open(‘[% invoice_external_link %]’, ‘_blank’, ‘menubar=yes,scrollbars=yes’);”>Credit Note</a>
<a href=”javascript:void(0)” class=”button”>Stock Report</a>
<a href=”javascript:void(0)” class=”button”>Digital Sales CSV</a –>
</p>
<p>&nbsp;</p>
<div id=”first_trailing_text” style=”padding: 20px;background-color: #f7f7f7;border-radius: 10px;opacity: 1; font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial,
‘sans-serif’; color: #333;”>
[% invoice_project.trailing_text_royalty %]
</div>
</tbody>
</table>
<div class=”page-break”></div>

<table style=”width: 965px;” border=”0″>
<thead>
<tr>
<td>
<div class=”page-header2″>
[% invoice_project.header_royalty %]
</div>

</td>
</tr>
</thead>
<tbody>

<table style=”width: 100%;” border=”0″>
<tr>
<td>
<p>&nbsp;</p>
<p><span style=”font-size: 16pt;”>[% ra.royalty_account_name %]</span></p>
<p>&nbsp;</p>
</td>
</tr>
</table>

<table
style=”width: 965px; border-collapse: collapse; font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’; color: #333; border: 0;”>
<tr>
<td style=” text-align: left; color: #999; font-weight: normal;”>Date</td>
<td style=” text-align: left; color: #999; font-weight: normal;”>Period</td>
<td style=” text-align: left; color: #999; font-weight: normal;”>Statement Number</td>
<td style=” text-align: left; color: #999; font-weight: normal;”>Minimum Payment</td>
<td style=” text-align: left; color: #999; font-weight: normal;”>Currency</td>
</tr>
<tr>
<td style=” text-align: left;”>[% data.today %]</td>
<td style=” text-align: left;”>[% rp.start_date _’ – ‘_ rp.end_date %]</td>
<td style=” text-align: left;”>[% rp.royalty_period_id %]</td>
<td style=” text-align: left;”>[% stmt_summary.minimum_payment | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: left;”>[% data.currency_iso %]</td>
</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<table
style=”width: 965px; border-collapse: collapse; font: 9pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’; color: #333; border: 0;”
cellpadding=”0″ cellspacing=”0″>
<tr>
<td style=” width:15%; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Royalty Contracts</span>
</td>
<td style=” width:8%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Contract<br/>Opening</span>
</td>
<td style=” width:10%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Advances/ Deductions</span>
</td>
<td style=” width:10%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Digital Sales</span>
</td>
<td style=” width:10%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Physical Sales</span>
</td>
<td style=” width:10%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Return<br/>Reserve</span>
</td>
<td style=” width:9%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Licensing</span>
</td>
<td style=” width:10%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Performance</span>
</td>
<td style=” width:10%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Contract<br/>Payable</span>
</td>
<td style=” width:8%; text-align: right; border-bottom: 2px solid #000;”>
<span style=”text-align: left; color: #999; font-weight: normal;”>Contract<br/>Closing</span>
</td>
</tr>
[%
SET total_opening_contract_all = 0;
SET total_advances = 0;
SET total_deductions_contract = 0;
SET total_roy_digital = 0;
SET total_roy_physical = 0;
SET total_return_reserve_amount = 0;
SET total_credit_reserve = 0;
SET total_roy_licensing = 0;
SET total_roy_performance = 0;
SET total_payment_net_all = 0;
SET total_closing_contract_all = 0;
%]
[% FOREACH row = contracts %]
[%
total_opening_contract_all = total_opening_contract_all + row.opening_contract_all;
total_advances = total_advances + row.advances;
total_deductions_contract = total_deductions_contract + row.deductions_contract;
total_roy_digital = total_roy_digital + row.roy_digital;
total_roy_physical = total_roy_physical + row.roy_physical;
total_return_reserve_amount = total_return_reserve_amount + row.return_reserve_amount;
total_credit_reserve = total_credit_reserve + row.credit_reserve;
total_roy_licensing = total_roy_licensing + row.roy_licensing;
total_roy_performance = total_roy_performance + row.roy_performance;
total_payment_net_all = total_payment_net_all + row.payment_net_all;
total_closing_contract_all = total_closing_contract_all + row.closing_contract_all;
%]
<tr>
<td style=” text-align: left; border-bottom: 1px solid #ddd;”>
<a href=”javascript:void(0)” style=”color: #007bff; text-decoration: none;” class=”contract-level-display” contract_id=”[% row.contract_id %]”
contract_period_id=”[% row.contract_period_id %]”>
[% row.contract_name %]
</a>
</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd; padding: 15px 0px;”>[% (row.opening_contract_all || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.advances || 0) | format(‘%.2f’) | format_number(“de”) %]<br>[% (row.deductions_contract || 0) |
format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.roy_digital || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.roy_physical || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.return_reserve_amount || 0) | format(‘%.2f’) | format_number(“de”) %]<br>[% (row.credit_reserve || 0) |
format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.roy_licensing || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.roy_performance || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd; font-weight: bold;”>[% (row.payment_net_all || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-bottom: 1px solid #ddd;”>[% (row.closing_contract_all || 0) | format(‘%.2f’) | format_number(“de”) %]</td>
</tr>
[% END %]
<tr>
<td style=” text-align: left; border-top: 2px solid black; padding: 15px 0px;”><a href=”#” style=”color: #000; text-decoration: none;”><strong>Total</strong></a></td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_opening_contract_all | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_advances | format(‘%.2f’) | format_number(“de”) %]<br>[% total_deductions_contract | format(‘%.2f’) |
format_number(“de”) %]</td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_roy_digital | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_roy_physical | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_return_reserve_amount | format(‘%.2f’) | format_number(“de”) %]<br>[% total_credit_reserve | format(‘%.2f’) |
format_number(“de”) %]</td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_roy_licensing | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=” text-align: right; border-top: 2px solid black;”>[% total_roy_performance | format(‘%.2f’) | format_number(“de”) %]</td>
<td style=”border-radius: 5px; color: #333; font-weight: bold; text-align: right; border-top: 2px solid black;”>
<span style=”background-color: #e0f5e0; “><strong>[% total_payment_net_all | format(‘%.2f’) | format_number(“de”) %]</strong></span>
</td>
<td style=” text-align: right; border-top: 2px solid black;”><strong>[% total_closing_contract_all | format(‘%.2f’) | format_number(“de”) %]</strong></td>
</tr>
</table>
</tbody>
</table>
</td>
</tr>
</tbody>
►
</table>
►
<div id=”footer”>
<table style=”width: 965px; font: 10pt Roboto, Gotham, ‘Helvetica Neue’, Helvetica, Arial, ‘sans-serif’;” border=”0″>
<tbody>
<tr>
<td style=”width: 100%; text-align: right;” class=”grey_text”>royalty processing by <a href=”https://www.details.eu”>www.details.eu</a></td>
</tr>
</tbody>
</table>
</div>
<script type=”text/javascript”>
document.addEventListener(‘DOMContentLoaded’, function() {
let load_data = false;
if (!load_data) {
load_data = true;
document.addEventListener(‘click’, function(evt) {
if (evt.target && evt.target.classList.contains(‘contract-level-display’)) {
let url = location.href;
let matches = url.match(/(.*/)(.*)/);
let main_part = matches[1];
let arr = matches[2].split(‘&’);
for (let i = 0; i < arr.length; i++) {
if (arr[i].match(‘action’)) {
arr[i] = ‘action=contract_level_display’;
}
}
let contract_period_id = evt.target.getAttribute(‘contract_period_id’);
arr.push(`contract_period_id=${contract_period_id}`);
url = main_part + arr.join(‘&’);
window.open(url, “_blank”);
}
});
}
});
</script>
</body>
</html>

3. Contract Template

This section displays details for a selected single contract.

<!– wp:paragraph –

Header Royalty,

Royalty Template, and

Contract Template.

1. Header Royalty

►

2. Royalty Template

3. Contract Template

Related Articles

Recently Viewed