Borders and padding

How to add borders and padding for styling templates, text blocks and tables

Updated over a week ago

You can use a Background element for simple borders behind other elements or text styling

A. Background element

Drop a background element behind other elements and set empty background with required borderattributes

B. Text styling

Apply border and padding to text blocks and table cells using HTML styling inside the text box. 

1. Switch to HTML code view

Enter into full screen mode edit in a catalog

or template

Click Code View button in the opened popup text editor

2. Add HTML styling.

Wrap your text with HTML <div> tag with style attribute, e.g.

<div style="border-width: 1px; border-style: solid; border-color: #cccccc;padding: 2px;">My Text</div>


Switch back to normal view

  • You can apply styling for sides, e.g. bottom only or combine with top, left, right, etc.

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc;">My text </div>

Top and bottom

<div style="border-top-width: 1px; border-top-style: solid; border-top-color: #cccccc;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #cccccc;">My text </div>

  • A border requires three attributes to be displayed: border-*-color, border-*-width and border-*-style for each side or overall border (e.g. border-width, border-style and border-color or for bottom: border-bottom-width, border-bottom-style and border-bottom-color)

  • Change color using hex value in border-*-color (border-color: #5a6685; border-bottom-color: #cccccc;) attributes 

  • Cange border width using border-*-width attribute (border-width: 1px; border-top-width: 1px; )

  • Use padding attribute to create spacing within your bordered text (padding-left, padding-top, etc. can be applied too) 

  • Please note: PDF support only solid style of the border

3. Table styling  

Tables are using the same styling applied to header (th) or body (td) cells. You can manually update these styles.
Here is an a example of a table created by product list designer:

  • Please note that a product list generator can overwrite these changes, so keep them in notepad or update a table manually

<table style="width: 100%;border-width: 1px; border-style: solid; border-color: #cccccc;">
<thead>
<tr style="background-color:#5a6685; color:#ffffff;">
<th style="text-align:center;border-width: 1px; border-style: solid; border-color: #cccccc; padding:4px;width:50%;">Name</th>
<th style="text-align:center;border-width: 1px; border-style: solid; border-color: #cccccc; padding:4px;width:25%;">Code</th>
<th style="text-align:center;border-width: 1px; border-style: solid; border-color: #cccccc; padding:4px;width:25%;">Price</th>
</tr>
</thead>
<tbody>
<!--{{Products}}-->
<tr>
<td style="vertical-align: top;border-width: 1px; border-style: solid; border-color: #cccccc; padding:4px;">{{Name}}</td>
<td style="vertical-align: top;border-width: 1px; border-style: solid; border-color: #cccccc; padding:4px;">{{Code}}</td>
<td style="vertical-align: top;border-width: 1px; border-style: solid; border-color: #cccccc; padding:4px;text-align:right;">{{Price}}</td>
</tr>
<!--{{/Products}}-->
</tbody>
</table>

Did this answer your question?