Jonas Software 1.800.352.6647  |  [email protected]  //  clubsystems group 1.800.356.4242  |  [email protected]
Homee3 HelpEducationServicesContact Us
 
Home
Contacts
Messages
Content
   Hosting
   Content Tags
   Feeds
   Webforms
   Headers / Footers
   Custom Templates
Reporting
WYSIWYG Email Editor
CSG Export Utility
Jonas Export Utility
Frequently Asked Questions
Webinars
Content > Custom Templates This document outlines Clubbroad Cast's template framework and provides the specifications necessary to create custom designed templates.
Custom Templates

Templates are single web pages that can be created with any HTML or web page editor. The designer can code particular sections of the templates with tags designated for template design. The end user can then compose a message based on the template by simply supplying the content necessary to complete each section. When designing your template, it is important to remember that you are designing for email and not necessarily the web. Here are a few pointers:

Note - All templates MUST be XHTML compliant.

  • Use table based layouts instead of CSS based.
  • Use inline CSS to provide a default style for your content.
  • Optimize images for the web.
  • Less is more. Keeping your layouts simple will help to reduce rendering problems.

If you have any questions on best practices when designing your template, please do not hesitate to contact support. After the web page is designed and coded, add the template tags as described below to define which sections of the template will be editable. The final step is to upload the template and all related images. To begin uploading a template, go to Content->Templates and click Upload Template

Previous Considerations

Template tags, such as %%!attribute1%%, from previous versions of the application were deprecated with the May 2006 product release. Additionally, templates tags that use <ins> as a means of defining template content were deprecated with the November 2006 update.

Note - The current framework will not affect existing templates that use <ins> tags. However, you will need to re-code your template(s) according to the most recent framework if you wish to take advantage of the repeatable sections functionality.

Terms You Need To Know

We'll begin by taking a look at some common terms you'll see throughout the documentation below.

  • Block - Blocks are editable regions in your template. For example, the logo, article header, and article content may all be editable blocks.
  • Attribute - Attributes define the specifics of a block, such as the font style or appearance of content placed into the block.
  • Section - Sections are areas in the template that the user can clone in order to extend the template to accommodate additional content. Sections can contain one or more blocks.

Coding Templates

You'll be using <div> tags to create template blocks. Attributes can be added to these tags to define the block, and also how the end-user will supply content for the block. Thus, a template-specific tag would take the following form:

1

<div block="1" linked="1" key="body_one" description="Enter the body content" name="Body Content 1"

2

display="plainlarge">

Technically, these attribute additions would make the <div> tag not XHTML-compliant. However, this doesn't affect the XHTML compliance of any messages based on templates since the end user's content would replace the extended <div> tags before messages are sent.

Attributes

Each template-specific <div> tag can have the following six attributes:

  • block - The block attribute is required to make an editable block. Any <div> tag that does not have this attribute will not be editable. Set the block attribute to a number to create an editable block. A good way of keeping track of your editable blocks is to assign them sequential numbers. For example the first editable block of your template would use block="1" as it's block attribute, and the next editable block would use block="2".
  • key - Each block tag has its own unique key, a simple word that enables the template system to differentiate one block from another. This attribute is also required for all editable blocks. key attributes may only contain letters, numbers, and underscores. No spaces are allowed. Also, it is recommended to keep the id in lowercase in order to ensure that the template is as transferable as possible. Here is an example of this attribute: key="heading_1". The keys should follow a consistent naming convention.
  • linked - linked is an optional attribute that you can use to create linked template blocks. For all blocks that you wish to link, set the linked attribute to the same value. For example, linked="1". By doing so, all blocks with the same key attribute that are set to linked="1" will change to reflect the same content when one of them is edited. This attribute is useful for repeated content within the template, such as a date or section headings included in both the message table of contents and the message body.
  • name - The name attribute is an optional attribute that determines the label the end-user will see when editing a template. Here is an example: name="Title". If you do not set the name attribute, then the key value will display in the template editor.
  • description - The description attribute is an optional attribute that determines the label that the end-user will see below the block name when editing a template. Here is an example: description="The title of your newsletter".
  • display - The display attribute is another required attribute. It determines the type of form control used by the end user when composing a message based on the template. Available display types are plain, plainlarge, rich, survey, image, and link:
    • plain will load a one line input box.
    • plainlarge will load a multi-line text area.
    • rich will load the standard WYSIWYG editor.
    • survey loads the survey editor that includes functionality to include radio buttons, checkboxes, menus, etc.
    • image will allow for the selection of an image. The user can browse and select images stored in the hosting area, or specify the URL of the desired image. Also, the user can specify a URL to go when that image is clicked, a border for the image, alt tag text, and horizontal and vertical padding for the image. You'll want to make sure to use a border size of "0" if you apply a URL to an image, otherwise you'll get an unattractive blue border.
    • link allows the user to enter the URL for an <a href="">. For example, the display attribute may appear as: display="rich"

So, here is one last look at a standard editable block tag that can be used in your template:

1

<div block="1" key="heading_1" name="Main Heading" description="Main Heading goes here." display="plain">

2

    Main Header can be placed here.

 

3

</div>

Repeatable Sections

Repeatable Sections are areas in the template that can be cloned in order to extend the template to accommodate additional content. For example, a newsletter template may be coded to have a repeatable section containing a section header and a section body, with each header/body section designed to represent an "article" for the newsletter. This type of design would allow the end-user to clone the section as many times as necessary to accommodate the story sections intended for the newsletter.

Coding Repeatable Sections

To specify a repeatable section, add the section attribute to the <div> or <span> tags that wrap the template blocks you wish to group in the section. For example:

1

<div section= "1">

2

    <div block="1" key="company_logo" name="Logo" description="Select your company's logo to appear at the bottom of the page." display="image"></div>

 

3

 

4

    <div block="1" key="body_text" name="Body text" description="Enter text for the message body" display="image"></div>

 

5

</div>

This example would repeat the logo section and body and allow you to place different content into each repeatable section. You can have more than one repeatable section in a template.

Note - Sections can only be wrapped around other <div> tags or block-level elements, such as <p> or <table>. You cannot use sections to add columns or rows to a table.

Using Repeatable Sections

Repeatable sections are denoted in the template UI with a dotted outline and a green "add" icon in the upper-right corner that allows the user to clone the section.


After cloning a section, a new section will appear that displays the default section content. You will be able to add new content to this section. Also, you can reorder or delete the cloned sections by using the "up", "down", and "delete" icons which are described in the Using The Template Editor section of this document.


Example Code For A Custom Template

Below, you will find an example of a completely coded custom template. You can copy and paste this example code and use it as a reference for creating your own custom template. You could also see what this example custom template looks like by copying and pasting the code into a text editor or HTML editor, saving the file as an HTML file, and then opening the HTML file in a browser. Additionally, the screen shot below shows what the example template code actually looks like.

001

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

002

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

003

<html xmlns="http://www.w3.org/1999/xhtml">

004

 

 

005

<head>

006

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

007

 <title>

008

  Example Template Design

 

009

 </title>

010

</head>

 

011

<body bgcolor="#000000">

012

 <table align="center" border="0" cellpadding="0" cellspacing="0">

 

013

  <tr>

014

   <td width="600" align="center" bgcolor="#FFFFFF">

 

015

   <!-- Notice the attributes assigned to the <div> below-->

016

    <div block="editable" name="headerimage" description="Editable Image Section" id="image" key="image" display="image">

 

017

     <a href="http://www.google.com">

018

     <img src="http://hosting-source.bronto.com/8428/public/googlelogo.gif" width="276" height="110" border="0" alt="Software Main Logo Image" />

 

019

     </a>

020

    </div>

 

021

   </td>

022

  </tr>

 

023

  <tr>

024

   <td width="600" height="15" bgcolor="#FFFFFF">

 

025

   </td>

026

  </tr>

 

027

  <tr>

028

   <td width="600" valign="top">

 

029

    <table border="0" cellpadding="0" cellspacing="0">

030

     <tr>

 

031

      <td width="215" bgcolor="#035F39" valign="top">

032

       <table border="0" cellpadding="0" cellspacing="0">

 

033

        <tr>

034

         <td bgcolor="#035F39" height="10" width="215" colspan="3"></td>

 

035

        </tr>

036

        <tr>

 

037

         <td width="14" bgcolor="#035F39"></td>

038

         <td width="187">

 

039

          <table border="0" cellpadding="0" cellspacing="0">

040

           <tr>

 

041

            <td width="187">

042

            <!-- The section attribute designates a repeatable section-->

 

043

             <div section="1">

044

              <table border="0" cellpadding="0" cellspacing="0">

 

045

               <tr>

046

                <td height="1" width="187" bgcolor="#000000" colspan="3"></td>

 

047

               </tr>

048

               <tr>

 

049

                <td width="1" bgcolor="#000000"></td>

050

                <td width="185" valign="top" bgcolor="#035F39">

 

051

                 <table border="0" cellpadding="0" cellspacing="0">

052

                  <tr>

 

053

                   <td width="185" height="5" bgcolor="#29A853" colspan="3"></td>

054

                  </tr>

 

055

                  <tr>

056

                   <td width="185" bgcolor="#29A853" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:20pt; font-weight:bold; color:#ffffff;" colspan="3">

 

057

                  <!-- An example of an editable header block-->

058

                    <div block="editable" name="header" description="Header goes here" id="header" key="header" display="plain" style="font-family:Arial, Helvetica, sans-serif; font-size:18pt; font-weight:bold; color:#ffffff;">

 

059

                     Headline Here

060

                    </div>

 

061

                   </td>

062

                  </tr>

 

063

                  <tr>

064

                   <td width="185" height="5" bgcolor="#29A853" colspan="3"></td>

 

065

                  </tr>

066

                  <tr>

 

067

                   <td width="185" height="5" bgcolor="#035F39" colspan="3"></td>

068

                  </tr>

 

069

                  <tr>

070

                   <td width="5"></td>

 

071

                   <td width="175" bgcolor="#035F39" style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#ffffff;">

072

                   <!-- An example of an editable body block-->

 

073

                    <div block="editable" name="body" description="Body goes here" id="body" key="body" display="rich" style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#ffffff;">

074

This body section will use WYSIWYG editor to insert images or text. Mauris molestie sapien nec diam. In vehicula rutrum augue. Maecenas hendrerit lorem sed leo. Mauris congue odio nec nisi. Proin neque. Maecenas auctor. Donec turpis. Cras nunc. Donec non nulla. Curabitur fringilla, nisi pretium fringilla consectetur, ligula lorem iaculis ligula, in malesuada justo mi et lectus.

 

075

                    </div>

076

                   </td>

 

077

                   <td width="5"></td>

078

                  </tr>

 

079

                  <tr>

080

                   <td width="185" height="5" bgcolor="#035F39" colspan="3"></td>

 

081

                  </tr>

082

                 </table>

 

083

                </td>

084

                <td width="1" bgcolor="#000000"></td>

 

085

                 </tr>

086

                 <tr>

 

087

                 <td height="1" width="187" bgcolor="#000000" colspan="3">

088

                 </td>

 

089

                </tr>

090

                <tr>

 

091

                 <td width="187" height="10" colspan="3"></td>

092

                </tr>

 

093

               </table>

094

              </div>

 

095

             </td>

096

            </tr>

 

097

           <tr>

098

            <td width="187">

 

099

            <!-- Another repeatable section-->

100

             <div section="2">

 

101

             <table border="0" cellpadding="0" cellspacing="0">

102

              <tr>

 

103

               <td height="1" width="187" bgcolor="#000000" colspan="3"></td>

104

              </tr>

 

105

              <tr>

106

               <td width="1" bgcolor="#000000"></td>

 

107

               <td width="185">

108

                <table border="0" cellpadding="0" cellspacing="0">

 

109

                 <tr>

110

                  <td width="185" height="5" bgcolor="#29A853" colspan="3"></td>

 

111

                 </tr>

112

                 <tr>

 

113

                  <td width="185" bgcolor="#29A853" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:18pt; font-weight:bold; color:#ffffff;" colspan="3">

114

                   <div block="editable" name="header2" description="Header goes here" id="header2" key="header2" display="plain" style="font-family:Arial, Helvetica, sans-serif; font-size:18pt; color:#ffffff; font-weight:bold;">

 

115

                    Another Side Headline Here

116

                   </div>

 

117

                 </td>

118

                </tr>

 

119

                <tr>

120

                 <td width="185" height="5" bgcolor="#29A853" colspan="3"></td>

 

121

                </tr>

122

                <tr>

 

123

                 <td width="5" bgcolor="#29A853"></td>

124

                 <td width="175" bgcolor="#29A853" style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#ffffff;">

 

125

                 <!-- A second editable body block -->

126

                  <div block="editable" name="body2" description="Body goes here" id="body2" key="body2" display="rich" style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#ffffff;">

 

127

This body section will use WYSIWYG editor to insert images or text. Mauris molestie sapien nec diam. In vehicula rutrum augue. Maecenas hendrerit lorem sed leo.

128

                  </div>

 

129

                 </td>

130

                 <td width="5" bgcolor="#29A853"></td>

 

131

                </tr>

132

                <tr>

 

133

                 <td width="185" height="5" bgcolor="#29A853" colspan="3"></td>

134

                </tr>

 

135

                <tr>

136

                 <td height="1" width="187" bgcolor="#000000" colspan="3"></td>

 

137

                </tr>

138

               </table>

 

139

              </td>

140

              <td width="1" bgcolor="#000000"></td>

 

141

             </tr>

142

             <tr>

 

143

              <td width="187" height="10" colspan="3"></td>

144

             </tr>

 

145

            </table>

146

           </div>

 

147

          </td>

148

         </tr>

 

149

        </table>

150

       </td>

 

151

       <td width="14" bgcolor="#035F39"></td>

152

      </tr>

 

153

      <tr>

154

       <td bgcolor="#035F39" height="10" width="215" colspan="3"></td>

 

155

      </tr>

156

     </table>

 

157

    </td>

158

    <td width="385" bgcolor="#035F39" valign="top">

 

159

     <table border="0" cellpadding="0" cellspacing="0">

160

      <tr>

 

161

       <td bgcolor="#035F39" height="10" width="385" valign="top" colspan="3"></td>

162

      </tr>

 

163

      <tr>

164

       <td width="14" bgcolor="#035F39"></td>

 

165

       <td width="357">

166

        <!-- A third repeatable section -->

 

167

        <div section="3">

168

         <table border="0" cellpadding="0" cellspacing="0">

 

169

          <tr>

170

           <td height="1" width="357" bgcolor="#000000" colspan="3"></td>

 

171

          </tr>

172

          <tr>

 

173

           <td width="1" bgcolor="#000000"></td>

174

            <td width="355" bgcolor="#BCEBDE">

 

175

             <table border="0" cellpadding="0" cellspacing="0">

176

              <tr>

 

177

               <td width="355" height="10" colspan="3" bgcolor="#BCEBDE"></td>

178

              </tr>

 

179

              <tr>

180

               <td width="355" align="center" style="font-family:Arial, Helvetica, sans-serif; font-size:16pt; font-weight:bold; color:#000000;" colspan="3" bgcolor="#BCEBDE">

 

181

                <!-- A third repeatable header-->

182

                <div block="editable" name="header3" description="Header goes here" id="header3" key="header3" display="plain" style="font-family:Arial, Helvetica, sans-serif; font-size:16pt; font-weight:bold; color:#000000;">

 

183

Main Headline Goes Here

184

                </div>

 

185

               </td>

186

              </tr>

 

187

              <tr>

188

               <td width="355" height="10" colspan="3" bgcolor="#BCEBDE"></td>

 

189

              </tr>

190

              <tr>

 

191

               <td width="355">

192

                <table border="0" cellspacing="0" cellpadding="0">

 

193

                 <tr>

194

                  <td width="5" bgcolor="#BCEBDE"></td>

 

195

                  <td width="345" bgcolor="#BCEBDE" style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#000000;">

196

                   <!-- A third editable body block-->

 

197

                    <div block="editable" name="body3" description="Body goes here" id="body3" key="body3" display="survey" style="font-family:Arial, Helvetica, sans-serif; font-size:10pt; color:#000000;">

198

This body section will use WYSIWYG editor to insert images or text or a

 

199

survey. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent

200

pellentesque odio a lorem. Aliquam mauris. Pellentesque nec dolor.

 

201

                    </div>

202

                  </td>

 

203

                  <td width="5" bgcolor="#BCEBDE"></td>

204

                 </tr>

 

205

                </table>

206

               </td>

 

207

              </tr>

208

              <tr>

 

209

               <td width="355" height="15" colspan="3" bgcolor="#BCEBDE"></td>

210

              </tr>

 

211

             </table>

212

            </td>

 

213

            <td width="1" bgcolor="#000000"></td>

214

           </tr>

 

215

           <tr>

216

            <td height="1" width="357" bgcolor="#000000" colspan="3"></td>

 

217

           </tr>

218

          </table>

 

219

         </div>

220

        </td>

 

221

        <td width="14" bgcolor="#035F39"></td>

222

       </tr>

 

223

      <tr>

224

       <td width="385" height="10" colspan="7" bgcolor="#035F39"></td>

 

225

      </tr>

226

     </table>

 

227

    </td>

228

   </tr>

 

229

  </table>

230

 </td>

 

231

</tr>

232

 <tr>

 

233

  <td width="600" bgcolor="#29A853" align="center" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:14pt; font-weight:bold;">

234

   <a href="http://www.google.com" style="text-decoration:none; color:#ffffff;">Visit Widgets.com!</a>

 

235

  </td>

236

 </tr>

 

237

 <tr>

238

  <td width="600" height="10" bgcolor="#035F39"></td>

 

239

 </tr>

240

 <tr>

 

241

  <td width="600" bgcolor="#035F39" align="center" style="color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-size:10pt; font-weight:bold;">

242

%%!account_address%%  %%!account_telephone%%

 

243

   <a href="%%!unsubscribe_url%%" style="font-family:Arial, Helvetica, sans-serif; color:#ffffff; font-size:8pt;">Unsubscribe</a> | <a href="%%!manage_url%%" style="color:#ffffff; font-size:8pt;">Manage Preferences</a> | <a href="%%!forward_url%%" style="color:#ffffff; font-size:8pt;">Forward to a Friend</a>

244

  </td>

 

245

 </tr>

246

 <tr>

 

247

  <td width="600" height="10" bgcolor="#035F39"></td>

248

 </tr>

 

249

</table>

250

</body>

 

251

</html>                      

Preview of what the example code above looks like:

 

 

Tips, Tricks, and Best Practices For Designing Custom Templates

Designing your own template lets you move beyond the confines of the default templates and opens the door for a lot of creativity and innovative design. We always encourage new and creative templates, but we also suggest that you try and always follow the best practices described below.

Template Checklist

It is good practice to make sure that your template includes the following items before uploading it to the application.

  • Special tags - We require that all messages include special tags. This helps to ensure that every message that is sent via the application is compliant with the CAN-SPAM act. Integrating these tags in your template design will allow you to dictate how where they are displayed in your message. The special tags are:
    • %%!account_address%% - this displays all of your address information in a single line.
    • %%!account_address1%% - The first line of your address.
    • %%!account_address2%% - The second line of your address.
    • %%!account_city%% - Your city.
    • %%!account_state%% - Your state.
    • %%!account_zip%% - Your Zip.
    • %%!account_country%% - Your Country.
  • Unsubscribe or Manage Preferences Link - We require that all messages include either an unsubscribe or manage preferences link so that your contacts can easily unsubscribe or change their information. Here is an example of Unsubscribe link: <a href="%%!unsubscribe_url%%">Click here to unsusbscribe</a>. Here is an example of Manage Preferences link: <a href="%%!manage_url%%">Click here to manage your preferences</a>
  • Forward to a Friend link - A good practice is to include a Forward to a Friend link in your template so that your contacts can very easily forward a copy to their friends or associates. Here is an example of a Forward to a Friend link: <a href="%%!forward_url%%">Click here to forward this message</a>
  • Link to the Online Version - Including a link to the online version of your message will allow your contacts to view your message in their web browser, instead of their email client. If a contact is having trouble viewing the message in their email client, they will at least be able to view your message as you intended. Here is an example of a link to the online version: <a href="%%!message_url%%">View online version</a>

 Chopping Off the <Head> Tag

Most web-based email clients, such as Yahoo Mail, Gmail, AOL, and Hotmail, automatically remove all the content in between the <head> tags of incoming HTML- based messages. They do this because they are trying to display a web page (the message) inside a web page (their email client) and have to ensure that only one set of <head> tags (the head tags from their email client web page) can be present in order to display the resulting web page well.

For this reason, the application will only import the content between the open and close <body> tags. We recommend moving your CSS, and other content that might be within the <head> tags, between the <body> tags. By parsing everything but the <body> tag content when importing, messages based on your template are ensured to have the highest probability of looking the way you intended in your contacts' web-based email client.

CSS vs Inline Styles

We STRONGLY recommend that you code your templates using inline styles as opposed to normal CSS. This approach will provide greater consistency across various email clients. Also, note that we will automatically attempt to move normal CSS to inline styles. Here is an example of standard CSS placed in the head or body:

1

<style type="text/css">

2

<!--

 

3

    .style3 {font-family: "Times New Roman", Times, serif;

4

                font-size: 11pt;

 

5

                color: #ffffff;;

6

             }

 

7

-->     

8

</style>

 

Example of inline CSS:

1

<div style="font-family: Times New Roman, Times, serif; font-size: 11pt; color: #ffffff;">

2

        Content goes here

 

3

</div>

Was this documentation helpful?

Current rating: 5 (1 ratings)
 
 Copyright © 2016 Jonas Club Management