Please wait...

ispecx News / Updates

Creating a Full Image Report Page Header

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;
         -webkit-print-color-adjust:exact; 
         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{
width:100%;
height:455px;
  
}

         
         /*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 }
         }
         .fix{overflow:hidden;}
         p{margin:0;}
         h4{margin:0;}
         
         @page { size: A4 }
</style>
<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;">
<div>
<hr /></div>

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

<div>&nbsp;</div>

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

<div>&nbsp;</div>
</div>
</div>
</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.

Check back soon for our Explainer Video!