You can customise the look of your sales documents (reports, invoices, quotes, pos) by adding your own CSS styling to the template.
This is useful when you want to adjust things like spacing, padding, colours, fonts, or the appearance of specific sections in the report.
Before you begin
Make sure you already have:
a report template set up
a report generated from a job or record
access to the Custom CSS section in your template
Step 1: Generate and preview the report
Start by generating the report using your chosen template.
For example:
Open a job or test result
Upload any images or documents you want included
Enable options such as Job Photos if needed
Generate the report
Open the preview using the correct template
Once the report preview is open, you can inspect the elements on the page to identify what you want to style.
Step 2: Inspect the element you want to change
On the preview page, find the part of the report you want to modify.
For example, you may want to change:
the report header
table colours
spacing around sections
padding inside report blocks
image layout
To inspect an element:
Right-click the part of the report you want to change
Select Inspect or Inspect Element
This opens your browser’s developer tools and highlights the HTML code for that specific element.
Step 3: Find the class or identifier
In the developer tools, look for the HTML class or element name linked to the section you clicked.
You may see class names related to:
the report title
a summary table
an asset section
a photo block
Important: only use selectors that start with user-.
These are the only selectors that you should rely on, as development has advised that user-* selectors will remain stable. Other selector names may be changed by the development team at any time, so using them in your CSS can be fragile and may break after updates.
For example, if you find something like .user-report-title or .user-summary-table, those are safer to use in your CSS.
If you want to change the colour of a table or remove padding from a section, target a user-* selector where available. Avoid using any selector that does not start with user-, as it is not considered safe for long-term use.
Step 4: Create your CSS
Once you know the class name, you can write CSS for it yourself or use AI tools such as ChatGPT to help generate the code.
Example requests you could use:
“Write CSS to remove padding from this class”
“Change the background colour of this report table to light grey”
“Make the report title bold and blue”
Step 5: Add the CSS to your template
Go to your report template and find the Custom CSS field.
Paste your CSS code into that section.
This is where all custom styling should be added for the report template.
Step 6: Save and test
After adding the CSS:
Save the template
Generate the report again
Review the preview to confirm the styling changes
You may need to repeat the inspect-and-adjust process a few times to get the exact result you want.
Example use cases
Here are a few examples of what you can customise with CSS:
remove padding from headers or tables
change font sizes and colours
restyle report titles
adjust spacing between sections
change how job photos appear in the report
Tips
Always inspect the element first before writing CSS
Use the report preview to test changes safely
Make small changes one at a time so it is easier to troubleshoot
If a style does not apply, double-check that you are targeting the correct class
Summary
To customise a report using CSS:
Generate and preview the report
Right-click the element you want to change
Use Inspect Element to find its class or identifier
Create CSS for that class
Paste the CSS into the template’s Custom CSS section
Save and test the result