Custom Changes to the Invoice Layout: Watermark, Two-Page Invoice and More

Overview

The invoice layout editor lets you change the logo, colors, fonts and the data shown, but some changes can’t be made from the visual editor, such as adding a watermark, hiding a certain element, or changing the order of the invoice sections. For these changes, the system provides two tools: CSS Code to add CSS code, and Edit Html to edit the layout structure directly. This article explains how to add the company stamp to invoices and estimates from the editor without code, then the two tools, with a complete example of adding a watermark. If you don’t have programming experience, you can request the change from the Custom Solutions team to carry it out for you.

Before you Begin

• You need the Edit General Settings permission.
• Make a copy of the layout before editing using Clone, and try the changes on the copy; HTML changes can’t be undone.
• Basic knowledge of CSS or HTML. If you don’t have this experience, contact the Custom Solutions team as described in Requesting the change from the Custom Solutions team.
• If you’ll use an image, it must not exceed 1 MB, and must be in JPG, PNG or GIF format. PNG with a transparent background is preferred for the watermark.

How to access it

• From the main menu: Sales, then Sales Settings, then Invoice/Estimate Layouts.
• Directly from the link: Invoice/Estimate Layouts.

The two custom editing tools

Tool	Where it is	Used for
CSS Code (CSS)	Layout editor › Style › CSS Code	Watermarks, changing sizes, colors and spacing, hiding an element. It’s the recommended tool because it doesn’t change the layout structure.
Edit Html	The actions menu next to the layout › Edit Html	Adding new elements, moving invoice sections, or editing the fixed header and footer.

Adding the company stamp or signature to invoices and estimates

The system has no separate setting for uploading the company stamp, but you can add the stamp (or signature) image to the invoice layout directly from the visual editor, without code. It then appears automatically on all invoices and estimates that use this layout.

Before you start

• Prepare the stamp image in PNG format with a transparent background (or JPG or GIF), with a size of no more than 1 MB.
• It’s best to crop the image around the stamp only, so it doesn’t take up a lot of space on the invoice.

Steps

1. Open Invoice/Estimate Layouts, and click Edit next to the layout in use.
2. From the side menu, choose where you want the stamp to appear:
   • Footer: at the bottom of every page; the best place for the stamp and signature.
   • Notes: at the bottom of the invoice, after the items and total.
   • Header: at the top of every page.
3. In the editor, place the cursor where you want it, and click the insert image button in the toolbar.
4. Choose the stamp image from your device and upload it. You can set its width and height from the image window.
5. Set the image alignment (right, center or left) from the alignment buttons in the toolbar. You can write text next to it, such as “Stamp” or “Signature”.
6. Click Save.
7. Open an invoice or estimate that uses this layout, and check how the stamp looks in the view, the print and the PDF file.

Showing the stamp on estimates too

The same layout can be used for both invoices and estimates. To show the stamp on both:

• In the layout editor, click More Options: and turn on Set this layout as default for invoices and Set this layout as default for estimates (and also the sales order, credit note and refund receipt options if you want).
• Or add the stamp with the same steps to the layout used for estimates, if it’s a different layout.
• If an invoice or estimate uses another layout in the Invoice Layout field, the stamp won’t appear on it until you choose the layout you added the stamp to.

Steps: adding CSS code

1. Open Invoice/Estimate Layouts, and click Edit next to the layout (or the copy you created).
2. From the side menu, click Style.
3. In the CSS Code field, write the CSS code without the <style> tag.
4. Click Save, then open an invoice that uses this layout and check how it looks in the view, the print and the PDF file.

Steps: editing the HTML

1. From Invoice/Estimate Layouts, click the actions menu (…) next to the layout, and choose Edit Html.
2. Three fields appear: HTML (the full layout code), Sticky Header (the header repeated on every page), and Sticky Footer (the footer repeated on every page).
3. Edit the code you need, keeping placeholders such as {%invoice_no%} and {%client_name%} as they are. To see all placeholders, open the Full Variables Guide.
4. Click Save. The save message appears and you go to the layout editor.
5. Check the invoice in the view, the print and the PDF file.

Example: adding a watermark

Text watermark

The easiest and fastest, and it doesn’t need an image. Paste the following code in CSS Code and change the text between the quotation marks:

body::before {
  content: "Original Copy";
  position: fixed;
  top: 45%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 90px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.08);
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
  z-index: 0;
  pointer-events: none;
}

Image watermark (such as the company logo)

1. Get the image link: in the layout editor, open the Header, click the insert image button and upload the image, then view the editor’s source code and copy the image link (it starts with https and ends with the image path). Then delete the image from the header if you don’t want it there.
2. Paste the following code in CSS Code, and put the image link in place of https://image-link:

body::before {
  content: "";
  position: fixed;
  top: 30%;
  left: 15%;
  width: 70%;
  height: 40%;
  background: url("https://image-link") no-repeat center;
  background-size: contain;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

Change the opacity value to control the watermark’s transparency (0.05 is lighter, and 0.2 is clearer), and the top, left and width values to control its position and size.

Field descriptions

Field	Location	Description
CSS Code	Style	CSS code applied to the invoice in the view, print, PDF and email. It’s written without the style tag.
Paper Size	Style	The page size for printing and the PDF file, such as A4.
Paper Margin	Style	The page margins. It doesn’t accept negative values.
HTML	Edit Html	The full layout code.
Sticky Header / Sticky Footer	Edit Html	The header and footer repeated at the top and bottom of every page in the PDF file.

Messages and how to fix them

Message	Cause	Solution
Saved Successfully.	The HTML edit was saved successfully.	—
Invoice layout has been saved	The layout was saved from the editor.	—
The image file size is larger than the allowed maximum size	The image is larger than 1 MB.	Reduce the image size.
Invalid file type required (jpg, png, gif)	The image format isn’t supported.	Convert the image to PNG or JPG.
You are not allowed to view this page	You don’t have the Edit General Settings permission.	Ask the account manager for the permission.

Cases that affect the changes

• Header and footer: if you edit the header or footer from Edit Html and then open and save it from the visual editor, the editor may reformat the code. So keep your custom changes in CSS Code or in the main HTML field.
• PDF file: it’s created with a print engine that may differ slightly from the browser view, so always check the result in the PDF. Elements with position: fixed are repeated on every page.
• Printing from the browser: if the watermark doesn’t appear when printing, turn on the Background graphics option in the print window.
• Previous invoices: the change appears on all invoices that use the layout when they’re opened or printed, including old invoices.
• Choosing the layout: the layout applies only to the invoices that use it, either because it’s the default layout, or because it’s selected in the Invoice Layout field in the invoice.

Two-page invoice template

There are two cases for printing the invoice on two pages:

1. The invoice extends to two pages automatically

If the items exceed the space of one page, the remaining items move to a second page automatically in the print and the PDF file. To format the pages:

• Put the page header in the Sticky Header field and its footer in the Sticky Footer field from Edit Html, so they repeat at the top and bottom of every page in the PDF file.
• Add the {%page_no%} placeholder in the footer to show the page number. If you don’t add it, the PDF file adds page numbering (1/2, 2/2) automatically at the bottom of the page.

2. Adding a fixed second page (such as a terms and conditions page)

1. Make a copy of the layout with the Clone button, and work on the copy.
2. From the actions menu next to the layout, choose Edit Html.
3. In the HTML field, scroll to the end of the code, and paste the following code where you want the second page to start (before the end of the code):

   <div style="page-break-before: always;"></div>
   <h2>Terms and Conditions</h2>
   <p>Write the content of the second page here...</p>

4. Replace the heading and text with the content of the second page. You can use placeholders such as {%invoice_no%} and {%client_name%} in it.
5. Click Save, then open an invoice that uses this layout and print it or download it as PDF to make sure the second page appears.

🛈

Need help? If you’re not used to editing HTML, the Custom Solutions team can design the two-page template for you.