Overview
Some design settings support extended styling options. This article explains what extended styling options are available.
Invoice template settings that support these extended styling options are:
Layout Settings
Design Settings
HTML
Heading Size / HTML fields supported
h1, h2, h3, i and p (space before as well).
div tags are also supported, a list of provided style classes is included in this article.
Non-Breaking Space
In HTML, the common non-breaking space, which is the same width as the ordinary space character, is encoded as or  
You must use  
Using will result in the invoice being unable to render.
Colours
The colours that are permitted are listed on the HTML Colour Codes site. Both the colour names and their corresponding hexadecimal codes are supported.
These colours can be added to html style attributes.
Classes
The following classes can be applied to html elements.
Sections
The following class names can be used to mark elements as part of the provided sections:
- contact-section
- usage-section
- paperless-section
Alignment
The following CSS class names are supported to control element alignment
- align-center
- align-left
- align-right
- align-justify
Text Classes
The following CSS class names can be used to control text display:
| Class Name | Description |
|---|---|
| uppercase | Capitalises all the text in the tag |
| lowercase | Reduces all the text in the tag to lowercase |
| capitalize | Capitalises the characters at the start of each word |
| small-text | Shrinks the size of the text in the tag |
| space-before | Adds additional spacing between this line and the previous. |
| space-after | Adds additional spacing between this line and the next. |
| space | Has the effect of both space-before and space-after. |
Colours
The following classes can be used to apply consistent colours across html elements.
| AliceBlue | ForestGreen | MistyRose |
| Amethyst | Fuchsia | Moccasin |
| AntiqueWhite | Gainsboro | NavajoWhite |
| Aqua | GhostWhite | Navy |
| Aquamarine | Gold | OldLace |
| Azure | Goldenrod | Olive |
| Beige | Gray | OliveDrab |
| bendigo-telco-pms-3115 | Green | Orange |
| bendigo-telco-pms-533 | GreenYellow | OrangeRed |
| Bisque | Honeydew | Orchid |
| Black | HotPink | PaleGoldenrod |
| BlanchedAlmond | IndianRed | PaleGreen |
| blue | Indigo | PaleTurquoise |
| Blue | Ivory | PaleVioletRed |
| BlueViolet | Khaki | PapayaWhip |
| Brown | Lavender | PeachPuff |
| burgundy | LavenderBlush | Peru |
| BurlyWood | LawnGreen | Pink |
| CadetBlue | LemonChiffon | Plum |
| Chartreuse | LightBlue | PowderBlue |
| Chocolate | LightCoral | Purple |
| Coral | LightCyan | Red |
| CornflowerBlue | LightGoldenrodYellow | RosyBrown |
| Cornsilk | LightGreen | RoyalBlue |
| Crimson | LightGrey | SaddleBrown |
| Cyan | LightPink | Salmon |
| DarkBlue | LightSalmon | SandyBrown |
| DarkCyan | LightSeaGreen | SeaGreen |
| DarkGoldenrod | LightSkyBlue | Seashell |
| DarkGray | LightSlateGray | Sienna |
| DarkGreen | LightSteelBlue | Silver |
| DarkKhaki | LightYellow | SkyBlue |
| DarkMagenta | Lime | SlateBlue |
| DarkOliveGreen | LimeGreen | SlateGray |
| DarkOrange | Linen | Snow |
| DarkOrchid | Magenta | SpringGreen |
| DarkRed | Maroon | SteelBlue |
| DarkSalmon | MediumAquamarine | Tan |
| DarkSeaGreen | MediumBlue | Teal |
| DarkSlateBlue | MediumOrchid | Thistle |
| DarkSlateGray | MediumPurple | Tomato |
| DarkTurquoise | MediumSeaGreen | Turquoise |
| DarkViolet | MediumSlateBlue | Violet |
| DeepPink | MediumSlateBlue | Wheat |
| DeepSkyBlue | MediumSpringGreen | White |
| DimGray | MediumTurquoise | WhiteSmoke |
| DodgerBlue | MediumVioletRed | Yellow |
| FireBrick | MidnightBlue | YellowGreen |
| FloralWhite | MintCream |
Icons
The following vector icons from fontawesome.io are installed available to use. Additional icons can be requested and will be considered on a case-by-case basis.
Use the listed class names below to use them from image tags. Check the example section below.
- icon-telephone
- icon-download
- icon-volume-up
- icon-battery
- icon-info-circle
- icon-map-marker
Examples
Below are some examples to assist.
This example below is the code entered into the Custom Message field.
<div class="align-center"> <p>NEW PLEASE REMIT PAYMENT PER THE TERMS LISTED ON THIS INVOICE.</p>   <p>PAYMENTS MADE VIA CREDIT CARD WILL INCUR A CONVENIENCE FEE.</p>   <p>Invoices not paid within the payment terms listed on this invoice will be subject to a finance charge of 1 1/2%.</p> <p>Finance charges will post monthly on any unpaid balance.   Thank you for your business!</p> </div>
This example below is the code entered into the Custom Message on Payment Advice field to produce the sample on the right.
<div class="contact-section">
<h1 class="Goldenrod">Contact Info</h1>
<h2 class="PeachPuff uppercase">My Heading</h2>
<h3 class="DarkOrange capitalize">SUPERCAPS</h3>
<p><i class="icon-map-marker"/>1300 737 881</p>
<p><i class="icon-volume-up"/>1300 737 881</p>
<p class="small-text space-before">blah</p>
</div>
