Before Your Start A Report Template: What You Need to Know

SETTING UP YOUR TEMPLATE CSS

IMAGE SIZE

Let's start with Image Size. A good starting point has three image-size classes 

1. Small - img_small
2. Medium - img_med
3. Large - img_large

Let's input your template sizes on the Master Template Page. These "Classes" will be called when you insert images anywhere in the template.

An example of how these will look like:

<p class="img_med"> {{ image_name }} </p>

<div class="img_large"> {{ waterheater_photo}} </div>

TIP: Any images inserted directly into the report template should be optimized. This can reduce file size to 86%, making for a faster loading report!!! 

COLORS

You should have your main text and icon colors recorded to keep your report template consistent.

Text Color #FFFFFF

H2 Color #FFFHTH

H1 Color #000000

OVERVIEW CHART

There are two styles of Overview charts. One on the website HTML page, and there is a new style that can be placed anywhere in a report using the {{ new_overview_chart }} macro.

You have complete control of the chart's Font size, Colors, and placement of the table text Key.

H1 and H2 Tags in your Template

H1 and H2 tags will compile the Reports TOC 'Table of Contents and sub-categories. So only place the tags in section heads or where you want the TOC to showcase.