Styling PDF Documents with CSS

In Settings > Templates, you can specify CSS for each template. This is the style code to apply your own design to the PDFs.

The PDF documents are first formatted in HTML, and from there the PDF is generated. This is why you can style the PDFs with CSS.

CSS assistant

With the CSS assistant you don't have to write the CSS yourself. You describe in plain language what you want to change. Click 'CSS assistant' below the 'Custom CSS' field, and the preview next to it shows the result for each document.

HTML Source

To know which CSS classes you can use for styling, here are examples of the HTML code for the different documents:

• Picklist HTML
• Packing List HTML
• Purchase Order HTML
• Order Confirmation HTML
• Return HTML

Not all HTML elements are always displayed. For example, backorders, prices, and images depend on your settings in Picqer. The examples show all possible HTML elements you may encounter.

Setting Margins

If you use a background image and want to adjust the text margins to ensure the text aligns correctly, you can do this with CSS as well. Here's an example:

    @page {
        margin-top: 3.5cm;
        margin-left: 1.5cm;
        margin-right: 1.5cm;
        margin-bottom: 3.5cm;
    }

    #background {
        top: -3.5cm;
        left: -1.5cm;
        right: -1.5cm;
        margin-bottom: -3.5cm;
    }

With @page, you define the margins for each page, which you can set individually for each side. To make sure the background image starts at the right position, you need to apply the same distances but with negative values.