This guide will show you how to change the display of your specification images to have them pinned to the top of the category.
Click on the Specifications section:
Once that is active, click on Advanced Editing:
The following screen will appear. Click in the highlighted area shown below to select that area:
Once selected, a window will pop open on the left showing you the HTML for that section:
Select all the text in the HTML textbox and delete it.
Then paste the following HTML into that same box.
<html>
<head>
<style>
td {
padding: 0px !important;
}
.u-col-100 {
min-width: 320px !important;
max-width: 950px !important;
}
.specifications-wrapper {
display: table;
padding: 10px;
background: white;
margin: 0 10px;
}
.specifications-wrapper-table {
padding-left: 10px;
padding-right: 10px;
background: white;
margin: 0 10px;
}
.specifications-item-wrap {
flex: 0 0 20%;
display: inline-block;
page-break-inside: avoid !important;
vertical-align: top;
}
.specifications-item {
background: white;
margin: 10px;
flex: 1;
page-break-inside: avoid !important;
max-width: 170px;
}
.specifications-image-padding {
padding: 35px;
border: 2.5px solid #dcdcdc;
}
.specifications-row-odd:nth-child(odd) {
background-color: #edeef0;
}
.specifications-row-even:nth-child(even) {
background-color: white;
}
.specifications-table {
width: 100%;
border-collapse: collapse;
page-break-inside: auto;
}
.specifications-body {
background-color: #f6f7f7;
padding: 0 10px;
color: #525d6c;
}
.specifications-row-data {
padding: 10px !important;
color: #525d6c;
}
.specification-table-row {
page-break-inside: avoid;
page-break-after: auto;
}
.specifications-image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.specifications-image-div {
width: 160px;
margin: auto;
height: 150px;
border: 3px solid #dcdcdc;
page-break-inside: avoid;
margin-bottom: 5px;
position: relative;
}
.font-heading {
font-size: 22px;
}
.font-subheading {
font-size: 16px;
}
.font-row {
font-size: 14px;
}
.header-images {
page-break-inside: avoid !important;
}
.specification-item {
margin-bottom: 25px;
}
.keep-together {
page-break-inside: avoid;
}
@page {
size: a4;
margin: 35px;
}
</style>
</head>
<body>
<div style="background-color: #f6f7f7; padding: 0px 10px 10px 10px">
{{#estimateSpecifications}}
<div class="specification-item">
<div class="keep-together">
<div class="header-images">
<div class="font-heading"
style="
margin: 0 10px;
background-color: #dcdfe2;
color: #525d6c;
padding: 15px;
font-weight: bold;
font-family: Arial;
page-break-inside: avoid;
">
{{category}}
</div>
<div class="specifications-wrapper">
{{#specifications}} {{#if (isNotNullAndEmpty imageUrl)}}
<div class="specifications-item-wrap">
<div class="specifications-item">
{{#if (showSpecsNumber)}}
<div style="font-size: 14px; color: #525d6c">Ref: {{specificationNumber}}</div>
{{/if}}
<div class="specifications-image-div">
<img class="specifications-image" src="{{imageUrl}}" />
</div>
<div class="font-row" style="text-align: left">
<span style="font-weight: 700; color: #525d6c">{{specification}}</span>
</div>
</div>
</div>
{{/if}} {{/specifications}}
</div>
</div>
<div class="specifications-wrapper-table specification-category-gap" style="padding-top: 30px">
<table class="font-row specifications-table">
<!-- Keeps the top 2 specifications attached with header avoid page break right after header -->
{{#specifications}} {{#if (indexLessThan 2)}}
<tr class="specifications-row-odd specifications-row-even specification-table-row">
{{#if (showSpecsNumber)}}
<td class="specifications-row-data" style="width: 15%">Ref: {{specificationNumber}}</td>
{{/if}}
<td class="specifications-row-data" style="width: 85%">{{specification}}</td>
</tr>
{{/if}} {{/specifications}}
</table>
</div>
</div>
<div class="specifications-wrapper-table specification-category-gap" style="padding-bottom: 20px">
<table class="font-row specifications-table">
<!-- All the specifications except top 2 are displayed in a list below header-->
{{#specifications}} {{#if (indexGreaterOrEqual 2)}}
<tr class="specifications-row-odd specifications-row-even specification-table-row">
{{#if (showSpecsNumber)}}
<td class="specifications-row-data" style="width: 15%">Ref: {{specificationNumber}}</td>
{{/if}}
<td class="specifications-row-data" style="width: 85%">{{specification}}</td>
</tr>
{{/if}} {{/specifications}}
</table>
</div>
</div>
{{/estimateSpecifications}}
</div>
</body>
</html>
This process should mean that your specifications appear like the following:
