action.skip

Template CSS

This page summarizes possible CSS-based standard template modifications.

Generic Concepts

The layout, styling, positioning of the template building blocks is controlled using CSS rules. JustOn defines a default set of CSS rules, which are part of the Visualforce page DefaultInvoiceStructure. To view it, change to Setup and navigate to Custom Code > Visualforce Pages > DefaultInvoiceStructure > Preview > CSS.

According to your organization's requirements, you must adjust the default CSS using custom CSS rules. Doing so, you can modify

  • the page size of the resulting PDF document
  • margins for containers and text blocks
  • the look and feel of the invoice line item table, like border properties
  • font attributes of text elements like text size, color, etc.
div containers of commonly used building blocks

The following table lists the div containers that include the commonly used building blocks as listed in PDF Contents.

div Container PDF Contents
page-header page header
page-footer footer
c1 header incl. logo
c2 billing address
c3 recipient address
sender address
c4 display type
c5 info left
info right
c6 text 1
c7 invoice line item table
c8 text 2
text 3

JustOn supports specific CSS classes that allow for applying some custom styling to the contents of certain invoice or dunning fields.

CSS classes in the body element of the invoice PDF
Considered Invoice Field Available CSS Classes Notes
Class class-Invoice
class-Credit
Type type-Installment
no-type
Email Invoice is-email-invoice
no-email-invoice
Print Invoice is-print-invoice
no-print-invoice
Business Entity business-entity-<Company_Name>
no-business-entity
The business entity class name is composed of business-entity- and the name of the business entity, where the allowed characters include a–z, A–Z, 0–9, and underscore (_). That is, you must replace dots, commas or spaces with underscores, and special characters with their nearest ASCII neighbor.
For compatibility reasons, JustOn supports the business entity-specific CSS class names that use tenant, like no-tenant.
CSS classes in the body element of the dunning PDF
Considered Dunning Field Available CSS Classes Notes
Level level-1
Email Dunning is-email-dunning
no-email-dunning
Print Dunning is-print-dunning
no-print-dunning
Business Entity business-entity-<Company_Name>
no-business-entity
The business-entity class name is composed of business-entity- and the name of the business-entity, where the allowed characters include a–z, A–Z, 0–9, and underscore (_). That is, you must replace dots, commas or spaces with underscores, and special characters with their nearest ASCII neighbor.
For compatibility reasons, JustOn supports the business entity-specific CSS class names that use tenant, like no-tenant.

You can define the field AdditionalStyleClass on the invoice or dunning. Its content will be normalized and added as an additional style class to the body element. Use this field to consider the values of further invoice or dunning fields to be styled using CSS.

Info

To identify an actual CSS class, use the template debug mode.

Modifying Template CSS

  1. Open the template to be edited.
  2. In the Layout & Design section, double-click the Custom CSS field and specify the CSS code as required.
  3. Click Save.

CSS Use Cases

Resize company logo
  • Using a percentage value:
    .logo {width: 60%}
    
  • Using an absolute value:
    .logo {width: 3cm}
    
Align company logo
  • Aligning the logo with the right margin:
    .c1 .block_0 {
        width: 100%;
        text-align: right;
    }
    
  • Centering the logo:
    .c1 .block_0 {
        width: 100%;
        text-align: center;
    }
    
Display gross subtotal
.invoice-table .subtotal-calculated.gross {
    display: table-row;
}
Use criterion-specific subtotal labels
tr.subtotal-calculated.gross.criteria-19_000-0_000 td.SubTotalGross.label:after  {
    content: "Subtotal for taxable products";
    visibility: visible;
}

tr.subtotal-calculated.gross.criteria-last-0_000 td.SubTotalGross.label:after  {
    content: "Subtotal for tax-exempt products";
    visibility: visible;
}
Display total net and total tax
.invoice-table tr.totalNet,
.invoice-table tr.totalTax {
    display: table-row;
}
Hide header, footer and logo
.is-print-invoice .page-footer, .is-print-invoice .page-header, .is-print-invoice .header, .is-print-invoice .logo {
    display: none;
}
Display business entity-specific logo and footer

This example assumes that you provide two images and two footer texts (in addressable DIV elements) for one template, as described in Printing Business Entity-Specific Logo and Footer.

#50130000000014A, #50240000000025B {
    position: absolute;
    left:0;
    top:0;
    display: none;
}

.footer-Entity1, .footer-Entity2 {
    display: none;
}

.business-entity-AMERICA #50130000000014A, .business-entity-AMERICA .footer-Entity1 {
    display: block;
}

.business-entity-EUROPE #50240000000025B, .business-entity-EUROPE .footer-Entity2 {
    display: block;
}
Print transaction tables landscape
/* sets landscape page format */
@page land {
    size: landscape;
}
.c9 {
    page: land;
}
/* forces using the available page width */
.transaction-records-table {
    width: 25cm;
}
Hide balance table
tr.balances {
    display: none;
}
Hide payment amount row

Under certain conditions, you may want to hide the payment amount row.

.invoice-table tr.paymentAmount {
    display: none;
}
Modify table column behavior

This example assumes that you want the text in the first table column to be right-aligned, and in all other table columns left-aligned.

The first rule addresses all columns, the second rule overwrites the first rule for all but the first column.

td {
    text-align: right;
}
td + td {
    text-align: left;
}
Prevent overlapping table cells
.invoice-table td {
    width: 1px;
}
Prevent page break in table cells
tr {
    page-break-inside: avoid;
}
Define fixed column width

This example assumes that you want a fixed column width for line item total column:

.invoice-table th.PosTotalNet__c {
    width:2.5cm;
}

You can repeat this rule for any defined table column, replacing PosTotalNet__c (see Adjusting Invoice Line Item Table).

Hide Information invoice line items
tr.product.Information {
    display: none;
}
Hide tax row if tax is 0%
.invoice-table .taxrate_0_00000 {
    display: none;
}
Hide standard discount message block
.c1 .block_3 {
    display: none;
}
Show additional character

When displaying an invoice line item's service period in the title or description column, for example, you can add a dash (or another character) to indicate the time span.

.ServicePeriodStart__c::after {
    content: " – "
}
.ServicePeriodEnd__c::after {
    content: none
}
Invert currency amounts

By default, JustOn shows debits (that is, invoices) with a positive amount, and credits with a negative amount. To comply with legal or other regulations in some countries, however, your business may require to invert these amounts for display purposes on the invoice PDF. To this end, you can swap the plus and minus signs specifically for currency values:

.currency .positive:before {
    content: "-";
}
.currency .negative {
    display: none;
}
Show the Tax on Received Payments ([Tax Rate]) lines
.invoice-table .received-payments-tax-by-taxrate {
    display: table-row;
}
Show the Received Payments (gross) line
.invoice-table .received-payments-gross {
    display: table-row;
}
Hide the Received Payments (net) line
.invoice-table .received-payments-net {
    display: none;
}