Audience: Builder
Read time: 2 min
Article contents: How to steps
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:
