All Collections
Estimating
The Quote letter
Custom Templates - how do you show Specification images inline with description?
Custom Templates - how do you show Specification images inline with description?

We will go over how you can get your Custom Templates Specification section to appear how it used to with the images inline with the text

Matt Govett avatar
Written by Matt Govett
Updated over a week ago

This guide will show you how to change the display of your specifications:

Steps

  1. First you will want to select the Specifications section to make that active:
    ​

2. Once that is active, you will want to select 'Advanced Editing':

3. You will then be presented with the following screen. You will need to click on the highlighted area to target that area:

4. If you have selected it correctly you will see a window popout from the left that will show you the HTML of that section:

In that HTML textbox on left, you will want to highlight all the HTML in there and delete it.
​
5. You will then want to 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: 10px;
background: white;
margin: 0 10px;
}

.specifications-item-wrap {
flex: 0 0 20%;
display: inline-block;
page-break-inside:avoid !important;
}

.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-category-gap {
margin-bottom: 25px;
}

.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
}



</style>
</head>
<body>
<div style="background-color: #F6F7F7; padding: 10px">
{{#estimateSpecifications}}
<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 (isNotNull 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 class="specifications-wrapper-table specification-category-gap" style="padding-top: 30px; padding-bottom: 20px; ">
<table class="font-row specifications-table">
{{#specifications}}
<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: 40%;">{{specification}}</td>
<td class="specifications-row-data" style="width: 45%;">
{{#if (isNotNull imageUrl)}}
<div class="specifications-image-div">
<img class="specifications-image" src="{{imageUrl}}">
</div>
{{else}}

{{/if}}
</td>
</tr>
{{/specifications}}
</table>
</div>
{{/estimateSpecifications}}

</div>
</body>
</html>


Result

This should allow your specifications to appear like the following:
​

Did this answer your question?