Adding custom CSS to your PDFs - PDF Styles

🚧

Editing your PDFs like this requires advanced knowledge of PDF HTML classes and how to select them for modification with CSS.

You must find the class names to then apply the styles in the PDF Styles code box in Orders > PDF Settings.

Finding Class names for your CSS selectors

You can inspect the PDFs to find their classes by going to Orders > PDF Settings and then clicking Preview under any of the Header Info HTML text areas. Then select the record which should be previewed.

Then Right Click > Inspect on the PDF document to open DevTools. From their you can browse the tree of elements which make up the document. Those class names can be used for applying custom CSS to the document.

❗️

This CSS will affect ALL of your PDFs.

Adding Row Numbers to your PDFs

Here is an example of CSS that can be added will display an increment for each item row:

.pdf-section.pdf-content-items .items-table thead tr:before {
    content: '';
    display: table-cell;
}

.pdf-section.pdf-content-items .items-table tbody tr {
    counter-increment: number;
}

.pdf-section.pdf-content-items .items-table tbody tr:before {
    content: counter(number)" ";
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 10px;
}

.pdf-section.pdf-content-items .items-table tbody tr.odd:before {
    background-color: #EFEFEF;
}

.classic-pdf .pdf-content-items table {
    border-left: 0
}

.classic-pdf .pdf-section.pdf-content-items .items-table thead tr:before {
    border-right: 1px solid;
    border-left: 0;
}

.classic-pdf .pdf-section.pdf-content-items .items-table tbody tr:before {
    border: 1px solid;
}