Skip to content

Template CSS

This page summarizes possible CSS-based 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
Tenant tenant-<Company_Name>
no-tenant
The tenant class name is composed of tenant- and the name of the tenant, 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.
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
Tenant tenant-<Company_Name>
no-tenant
The tenant class name is composed of tenant- and the name of the tenant, 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.

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 to 60%
.logo {width: 60%}
Align company log with right margin
.c1 .block_0 {
    width: 100%;
    text-align: right;
}
Display gross subtotal
.invoice-table .subtotal-calculated.gross {
    display: table-row;
}
Use criterion-specific subtotal labels
.subtotal-calculated.net.criteria-19_000-0_000 .label:after {
    content: "replaced net label for criteria change from 19% tax to 0% tax";
}
.subtotal-calculated.gross.criteria-19_000-0_000 .label:after {
    content: "replaced gross label for criteria change from 19% tax to 0% tax";
}
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 tenant-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 Tenant-Specific Logo and Footer.

#ONE, #TWO {
    position: absolute;
    left:0;
    top:0;
    display: none;
}

.footer-ONE, .footer-TWO {
    display: none;
}

.tenant-FIRST #ONE, .tenant-FIRST .footer-ONE {
    display: block;
}

.tenant-SECOND #TWO, .tenant-SECOND .footer-TWO {
    display: block;
}
Print transaction tables landscape
@page land {
    size: landscape;
}
.c9 {
    page: land;
}
Hide deposit installment
.is-print-invoice .depositInstallmentRow {
    display: none;
}
Hide balance table
tr.balances {
    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 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;
}
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 (see Adjusting Invoice Line Item Table).

Hide tax row if tax is 0%
.invoice-table .taxrate_0_000 {
    display: none;
}
Hide standard discount message block
.c1 .block_3 {
    display: none;
}