Help > Answers

How do I Add Custom Colors for Text & Backgrounds in PDF Templates for Invoices?

Cancel

Updated on February 17, 2017 04:24AM by Admin

The standard drag-and-drop editor supports only a basic set of colors to pick from. While this is nice and simple in most cases, perhaps you're a marketing agency, and want to take an extra step to match the colors exactly to your brand. This is possible using the print/web layouts "JSON Editor" view.  From here, you will be able to set any hex/rgb color, along with a whole lot of other powerful modifications.

What is the JSON Editor?

First, if you aren't familiar with JSON, it's nothing but a way to store and communicate complex data, such as the layout of a PDF file! Apptivo stores our template in JSON, and gives you the capability to modify & update that JSON directly, which provides additional power beyond the drag and drop editor. If you aren't a programmer, or at least tech savvy, you may want to stop here.

Changes made in the JSON editor can be updated, and then viewed & changed further from within the drag and drop editor.  Simply click on the JSON editor when modifying your PDF layout, then check the box for "Show as plain text" to view the JSON data, and click “Update JSON” when complete.

JSON example - Changing Background Color in a Table

In this example, we'll show you how we changed the invoice & estimate PDF templates in our own Apptivo billing system. The standard color is a nice standard grey, but we wanted to use our Apptivo blue (rgb 47, 173, 231).

  1. Navigate to Invoices App Settings - Print/Web Layouts.
  2. Edit a template.
    select pdf template
  3. Click "JSON Editor" tab. Check "Show as plain text".
  4. Press CTRL+F and find your column name. In our case the first column is "Item Name".
    search item name
  5. Once found, shortly below you'll see the current "backgroundColor" attribute. This is where we input our color, either rgb(47,173,231) or #2fade7.
  6. Click the "Update JSON" button to save.
    click update jason
  7. Navigate back to Drag and Drop editor to preview the change on first column.
    preview column color
  8. If everything looks good, use the JSON editor to change all other colors, and save the layout.
    background color changed

Optional Tip: Use a JSON beautifier to make browsing the template easier.
Just copy the JSON from Apptivo, and paste into a tool like this: https://jsonformatter.curiousconcept.com/

jason formater