Advanced Royalty Layouts: How to Design Professional, Custom Templates

Details Team
  • Updated
Follow

This article shows how to create visually appealing, professional royalty statements in details using your own HTML and CSS. You can completely control the layout and presentation while the system continues to calculate all values automatically.

Important: Everything described here happens inside your Invoice Project. No separate hosting or libraries are required. All templates render safely within details.

Where to Find These Settings

  1. Log in to your details account.
  2. Go to Settings → Layouts.
  3. Select the layout you use for royalty statements.
  4. Open the fields named Royalty Header, Royalty Template (not yet available — coming soon!), and Royalty Footer.

These fields correspond to the database fields header_royalty, royalty_template, and footer_royalty. Additional customization areas include:

Field Purpose
style_royalty (not yet available — coming soon!) Contains your CSS rules.
leading_text_royalty (not yet available — coming soon!) Optional introduction above the statement.
trailing_text_royalty (not yet available — coming soon!) Optional note or disclaimer at the end.
b2b_email_template Defines the email body used for statement notifications.

About the Structure

The final statement is rendered by combining the fields in this order:

style_royalty (CSS) header_royalty royalty_template footer_royalty

This means your CSS (in style_royalty) loads first, followed by the HTML from your header, then the main layout (royalty_template), and finally your footer or script area.

Data You Can Display

Your templates can display any information provided by details during statement generation. Common variables include:

Category Example Variables
Account royalty_account_name, currency_iso
Period start_date, end_date, royalty_period_id
Balances opening_balance, royalty_amount, amount_payable, closing_balance
Contracts contracts[] with contract_name, payment_net_all
Physical sales physical_sales.rows[] such as item, format, country, royalty_amount
Digital sales digital_sales.rows[] such as usage_type_textkey, net_sales, royalty_rate
Licensing licence_sales.rows[] such as licence_name, income, royalty_amount

Creating a Custom Header

You can include your logo, company information, and the current royalty period.

<table style="width:100%; line-height:1.4em;"> <tr> <td style="width:50%;"> <strong>{{ company_name }}</strong><br> {{ address1 }} <br> {{ city }}, {{ country }} </td> <td style="width:50%; text-align:right;"> <strong>ROYALTY STATEMENT</strong><br> Period: {{ start_date }} – {{ end_date }} <br> Currency: {{ currency_iso }} </td> </tr> </table> <hr>

Building the Main Template

Use your royalty_template section for structure, tables, and summary areas. Below is a minimal example showing physical and digital sections with conditional logic.

<h3>Physical Sales</h3> {{#if physical_sales.rows.length}} <table style="width:100%; border-collapse:collapse;"> <tr><th>Item</th><th>Country</th><th style="text-align:right;">Amount</th></tr> {{#each physical_sales.rows}} <tr><td>{{ item }}</td><td>{{ country }}</td><td style="text-align:right;">{{ royalty_amount }}</td></tr> {{/each}} </table> {{else}} <p>No physical sales for this period.</p> {{/if}}

<h3>Digital Sales</h3> {{#if digital_sales.rows.length}} <table style="width:100%; border-collapse:collapse;"> <tr><th>Type</th><th style="text-align:right;">Amount</th></tr> {{#each digital_sales.rows}} <tr><td>{{ usage_type_textkey }}</td><td style="text-align:right;">{{ royalty_amount }}</td></tr> {{/each}} </table> {{else}} <p>No digital sales for this period.</p> {{/if}}

Adding a Footer

Use footer_royalty for closing notes, bank information, or automatic print styles.

<div style="font-size:10px; margin-top:30px; color:#555;"> <p>Calculated and issued by {{ company_name }} on {{ today }}.</p> <p>Bank details: {{ iban }} {{ bank_name }}</p> </div>

 

Important: For now, please use footer_royalty until access to the royalty_template section becomes available. You can download a sample file showing how to control CSS directly from footer_royalty here: Royalty Statement sample code .

Styling Recommendations

  • Use simple fonts and a clean hierarchy of headings.
  • Keep totals clearly separated from line details.
  • Reserve bold color accents for key figures only.
  • Add @media print rules to control page breaks for PDFs.

Example Layout Concepts

Classic Layout

A simple, print-friendly design:

  • Header with logo and address.
  • Summary table of balances and totals.
  • Detailed sections for physical, digital, and licensing.
  • Clean footer with contact and bank info.

Dashboard-Style Layout

A modern, data-rich view inside the same statement:

  • Two-column summary (balances on one side, monthly totals on the other).
  • Expandable or filterable contract tables.
  • Light background sections and clear spacing.
  • Optional visual summaries (countries, stores, or top tracks) using your own charting method.

Email Template (Optional)

Use b2b_email_template to define the message that accompanies automatic royalty emails:

Hello {{ recipient_name }}, Your royalty statement for {{ period }} is ready. View or download your statement: {{ statement_url }} Best regards, {{ company_name }} Team

Best Practices

  • Start from a copy: Duplicate an existing layout before large changes.
  • Keep CSS unified: all styling in style_royalty.
  • Be concise: avoid unnecessary scripts or remote files.
  • Test thoroughly: check both screen and PDF outputs.
  • Maintain consistency: align statement design with your company branding.

Need Help?

If you’d like assistance refining your layout, contact support@details.eu and include:

  • Your layout name (invoice_project_name)
  • A short description or screenshot of your current layout
  • What you’d like to improve or achieve

Related

Related articles