CSS Styling PDF Invoices

These step-by-step instructions are intended to guide you in customizing the appearance of your PDF invoice template using your own CSS styles. They are designed to give you a basic understanding of how to start, allowing you to tailor your invoices to align with your brand and design preferences.

Please note that you will need some knowledge of CSS writing and familiarity with using the Chrome Developer Tools, particularly the Inspector tool.

Open an invoice in PDF preview mode:

To access any invoice within your CRM and view it in PDF Preview Mode, simply follow the URL format provided below.

CSS Styling PDF Invoices

(1) Open a URL in your CRM and append “pdf?view=preview” to it.

(2) Activate the Chrome Developer Tools and select the Inspection tool.

(3) Click on the element in the invoice that you wish to style.

(4) Copy the existing CSS style for that specific element.

Write your own custom CSS to edit the element(s):

invoices-css-1

You can utilize the settings section shown above to apply your custom CSS for styling the element(s) on the PDF invoice.

Important Note: The PDF rendering engine used in the CRM currently supports only CSS 2.1.

Contact us:

We will reply you within 1-2 business days.