Responsive Template Builder components

Contents

Responsive Template Builder components

Overview

This page explains components programming for the Template Builder.

How to use it

Understanding file extension

.tmsg
Designate a message saved as template. To create a .tmsg file :

Option 1:
Create your code locally
Save it as a .tmsg file
Upload your file to the eFlyerMaker application using the “Content -> Document Library” section.
Your file will be shown in the “Saved templates” panel Option 2:
Go to the “Create message” section
Design your message in the text editor
Click the “save as template” button
A popup will appear to allow you to choose the name of your template.
If a .tmsg file with the same name exists, you can overwrite it using the “Overwrite template if it exists” check box.
Click save and your template will be shown in the “Saved templates” panel

***Note: .tmsg files can be deleted only in the “Content -> Document Library” section.***

.tpl
Designate a message created in the Template Builder interface and saved as template. To create a .tpl file:

Go to “Content -> Create/Manage message”
Click on the “Template Builder” panel
In the Template builder interface: design your message by adding a new content
Click the “Save” button on the menu bar
Choose your template name
If a .tpl file with the same name exists, you can overwrite it using the “Overwrite template if it exists” check box.

***Note: .tpl files can be deleted only in the “Content -> Document Library” section.***

.tpo
Designate a draggable component from the “Custom” panel in the Template Builder interface. To create a .tpo file:

Create your code locally
Save it as a .tpo file
Upload your file to the eFlyerMaker application using the “Content -> Document Library” section.
Your file will be shown in the Template Builder interface under the “Custom” panel

Very Important Note: If your HTML contains Javascript coding, you will not be able to save it. An error message will appear and you will need to make the necessary modifications before saving.

Prepend the HTML

Template needs the class "table_container" and width "700px".
The code must be valid HTML markup
Editable “td” needs at least four classes: column, editable, changeBgColor and templateBgColor.

Editable Class Reference

Editable

HTML Container : TD
Usage:
Is the main class for each “td”. It contains elements to be modified (text, image, button…).

Caution:

1- Don't mix text, images and separators in the same “td”. Make a “td” for each element.

2- Don't add editable, editable-btn, editable-img, editable-nav and spacer classes to the same element.

Button

I.d: btn

editable-btn

HTML Container : TD
Usage:
To make td button editable. Use the “data-btn-num” attribute to give the button number like “btn-X-Y”. We use X as the template number and Y as the button number in this template (1, 2, 3…). Add this value to the “td” before/after the button as a class width “-L” and “-R” at the end to determine the left/right “td”.

Exemple:v btn-37-1, btn-37-1-L, btn-37-1-R. this will help to determine the position of the button and/or the background color. You should specify the max width that the button can have using the attribute data-max-width.

editable-btn-link

HTML Container : A
Usage:
To control the link and to prevent a change of color when using theme to change links color. The other links will change color but not this one because you prevent it.

btn-side

HTML Container: TD Usage:
Used to control the button height. Every button is composed of three horizontal parts and three vertical parts:

The central “td” with the “editable-btn” class should contain the “a” element with “editable-btn-link” class You can add other classes to control the view in small devices (as column or hide-small)

Design

I.D: bgColor

templateBgColor

HTML Container : TD
Usage:
This class is added to elements that should change background color using the theme palette.

ChangeBgColor

HTML Container : TD
Usage:
This class is used to change the background color of the element “td”. If you add some “td” to make spaces you should add to the “editable” element a new class called “linked-bg” and an attribute “data-linked-to”. The value of this attribute is the name of the class of the empty-spacer “td” that changes his background color when changing the background color of the editable element.

Image

I.D: img

editable-img

HTML Container: TD, A
Usage:
Used to edit an image.

Navigation Bar

I.D: Nav

editable-nav

HTML Container: TD Usage:
This class is used to control the navigation bar elements.

editable-nav-link

HTML Container: A Usage: <
> This class is added to each link of the navigation bar element

Separator

I.d: Spacer

spacer

HTML Container : TD
Usage:
Used for separator elements

spacer_height

HTML Container : TD
Usage:
If this class is present with spacer class, the user can change the height of the separator.

Small Devices

column

HTML Container : TD
Usage:
Used for small devices to get responsive design. This class will set the element width to 100% and it will display it as a block

hide-small

HTML Container : TD
Usage:
Hide element for small devices!

Text

I.d: editable

HTML Container: TD
Usage:
This class is used in each “td” containing a text

Examples

Text with bgcolor linked

   1 <table class="table_container"  cellpadding="0" cellspacing="0"
   2 style="width:700px;" data-module="M1"> <tr> <td width="10"
   3 class="td-1"> </td> <td class="column editable ChangeBgColor
   4 col-border templateBgColor linked-bg" data-linked-to="td-1" width="700"
   5 align="left" valign="top" bgcolor="#FFFFFF" style=" font-family:
   6 arial,sans-serif; font-size: 14px; line-height: 18px; color: #000000;">
   7 Your text </td> <td width="10" class="td-1"> </td> </tr> </table>

Image

   1 <td align="right" class="column-center editable-img ChangeImgBgColor" width="350" valign="middel">
   2  <a href="javascript:void(0)" class="" target="_blank">
   3   <img src="imgPath.png" width="60"  align="center" style="display: block; border: 0;" />
   4  </a>
   5 </td>

Button

   1 <tr> <td width="175" class="column
   2 btn37-1-L"> </td> <td align="center" width="350" height="60"
   3 bgcolor="#3498DB" valign="middle" class="column editable-btn"
   4 data-user-align="center"  data-btn-num="btn37-1" data-max-width="700"
   5 style="line-height:60px;">  <a
   6 style="color:#FFFFFF;text-decoration:none;font-family:Helvetica,Arial,
   7 sans-serif;line-height:100%; font-size:18px;" href="http://"
   8 class="editable-btn-link" target="_blank" >Confirmation</a>  </td>
   9 <td width="175" class="column  btn37-1-R"> </td> </tr>

A non-break space is important before and after the <a> link markup to preserve a space when the button is align left or right.