This guide will show you how to change the display of your specifications:
Steps
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:
β