Adding Image Styles to Inspection Reports

Creating a full-page image header for your report layout is easy. Copy the code below and paste it into your section layout source code page.

<style type="text/css">@page { margin: 0 }
         * {box-sizing:border-box;
         color-adjust: exact !important;}
         body { margin: 0; font-family: Arial, sans-serif;font-size:14px;}
         .sheet {
         margin: 0;
         overflow: hidden;
         position: relative;
         box-sizing: border-box;
         page-break-after: always;

.img_coversection img{

         /*h2,h3,h4{ font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }*/
         @media print {
         * {-webkit-print-color-adjust:exact; 
         color-adjust: exact !important; /*Firefox*/}
         body.A4.landscape { width: 297mm }
         body.A4, body.A5.landscape { width: 210mm }
         @page { size: A4 }
<section class="sheet padding-0mm" style="position:relative;"><!-- Main Start -->
<div class="main" style="font-family: sans-serif;font-size: 12px;overflow:hidden;width:100%;"><!-- Header -->
<div style="background:rgba(0,0,0,0.5);font-size: 41px;font-weight:bold;position: absolute;color: #fff;margin-left: 0%;border-bottom: 7px solid #fff;padding: 14px;display: block;width: 100%;line-height: 1;"><span style="font-size:26px;">{{ section_name }}</span></div>

<div class="img_coversection">{{ section_coverpage_image_macro }}</div>
<!-- content -->

<div class="fix box" style="margin-top:20px;font-size:14px;">
<div style="float: left;display: inline-block;overflow:hidden;">
<hr /></div>

<div> Macros and text can be placed here </div>


<hr />
<div id="mntl-sc-block_1-0">{{ add_SubSection_macro }}</div>

<!-- Main End --></section>

Data Collection

For the data collection image, you will need to add a new data field with an operator for the image. Images are best taken in landscape mode to better fit the image container.




Your report output will auto-insert the Section Title and provide you a very clean Section Title with an Image. You can easily adjust the height and title color/transparency header as well.


Bulk Image Layouts can be added just as easy Copy Paste and Edit !!

home inspection templates


<style type="text/css">.img_sp img{
border:1px solid #021a40; border-collapse: collapse;
border-radius: 0px;
padding: 0px;
margin: 1px;
img:hover { 
    cursor: zoom-in;
    opacity: 0.8;
<table border="0" cellpadding="1" cellspacing="1" style="display:inline; border-collapse: collapse;">
            <td class="img_sp" style="text-align: center;position:relative;">
            <h3 style="background: rgba(0, 0, 0, 0.5); font-size: 21px; font-weight: bold; position: absolute; color: rgb(255, 255, 255); margin-left: 0%; border-bottom: 4px solid rgb(255, 255, 255); padding: 8px; width: 300px; display: inline-block; line-height: 1; text-align: left;"><span style="font-size:16px;">{{ image_caption }}</span></h3>
            {{ image }}</td>