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
`c9`	transaction records
`c10`	outstanding invoices table
`c11`	tax table

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

Open the template to be edited.
In the Layout & Design section, click next to the Custom CSS field and specify the CSS code as required.
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

.c8 .block_5 {
    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;
}