• How can I adapt my custom build templates to work with the new creation process
• My old templates give a popup that they need to be adapted, how do I do that?

What does it do?

What our new creation process gives you extra is described here !

How does it work?

In order to get your custom templates ready for this new process, you'll need to adapt some minor things in the template code.

In this document we describe how you can easily adapt your templates.

You need to know that you'll need to make 2 types of adjustments  :

- The building block mechanism has changed

- The extented color mechanism you can use.

Let's start

The building block mechanism has changed

Most likely your old templates worked with the following building blocks :

1. Textfield, link, image, article tags

<ADDEMAR type="image" name="twitter_image" href="link"

src="<?add_userdata?>/Image/template/social_twitter.jpg" width="35" height="35"

style="border:none;" />


2. the 'old' List tags

<ADDEMAR type="list" name="text1">... other html code ... </ADDEMAR>


The list tags provided you the functionality to duplicate these building blocks and 'move' these blocks.

 In the new creation process we bring this flexibility to the whole template.

The code below here explains how you can build up your template structure.

<ADDEMAR type='list' name='header' category="header_boxed">
<ADDEMAR type='listitem' name='Logo_Block'>...html code...</ADDEMAR>
</ADDEMAR>
<ADDEMAR type='list' name='content' category="content_boxed">
    <ADDEMAR type='listitem' name='Simple_Article'>...html code...</ADDEMAR>
    <ADDEMAR type='listitem' name='Separator'>...html code...</ADDEMAR>
    <ADDEMAR type='listitem' name='Left_Image_Article'>...html code...</ADDEMAR>
    <ADDEMAR type='listitem' name='Right_Image_Article'>...html code...</ADDEMAR>
    <ADDEMAR type='listitem' name='Call_To_Action'>...html code...</ADDEMAR>
</ADDEMAR>
<ADDEMAR type='list' name='footer' category="footer_boxed">
    <ADDEMAR type="listitem" name="Five_Social_Media_Info">...html code...</ADDEMAR>
</ADDEMAR>

The above example describes the structure of lists and lisitems.

Please note that this is the code of our standard templates. In this example the html code inside the lisitem tags isn't shown.

Should you build up your own structure / custom template your lisitem source code needs to be placed between the listitem opening and closing tag.

The 'new' List tag

A list tag is the main tag and consist of several listitems tags.  

A list tag contains the following specifications :

• name : this attribute defines the name of the list ( and needs to be different then the caterogy ! )

• category : this attribute defines to which category the list belongs. For the standard templates we use this mechanism to have a division between : header blocks, content and /or footer blocks.

• a number of lisitems

The 'new' Listitem tag :

a listitem is the actual 'source' tag which defines the block. The lisitem tag contains the html code which defines how the block is presented inside the template.

A listitem tag contains the following attribute specifications :

• name : this attribute defines the name of the listitem
  

• img_uri : this attribute defines the thumbnail image which needs to be used inside the popup. We suggest to use the following path

<?add_userdata?>/templates/path_to_image

Let's explain this with an example structure code

This code needs to be placed inside a lisitem tag, as stated below :

<ADDEMAR type='list' name='header category="custom_header">
   <ADDEMAR type='listitem' name='Custom_preheader img_uri="path_to_image">... html code ...</ADDEMAR>

  <ADDEMAR type='listitem' name='Custom_banner' img_uri="path_to_image">... html code ...</ADDEMAR>

</ADDEMAR>

 <ADDEMAR type='list' name='content' category="custom_content">
   <ADDEMAR type='listitem' name='Custom_Logo' img_uri="path_to_image">... html code ...</ADDEMAR>

<ADDEMAR type='listitem' name='Custom_Article' img_uri="path_to_image">... html code ...</ADDEMAR>

<ADDEMAR type='listitem' name='Custom_SocialMedia img_uri="path_to_image">... html code ...</ADDEMAR>
</ADDEMAR>

This will result in a custom template where you have 2 big block regions, named custom header and custom_content, these different blocks conatis  again different moveable blocks.

You could have choosen to put these 'listitem' blocks into one list. However we suggest to have this kind of division keep your different building blocks.

The extented color mechanism you can use.

Our new creation mechanism also allows you to edit the color block per block. 

Let's take a code example to explain what needs to be done to use this mechanism.

<td bgcolor="<ADDEMARSTYLE type='color' iteration='true' name='Block_Background_Color' value='' />">

This code set the bgcolor of the td ( table column in html ) to use an addemar color named Block_Background_Color.

The iteration='true' attribute allows it to be altered within the block.

So you need to add the iteration='true' if you to set the color settings block by block.

We hope this helps you convert your 'old' custom templates.

Should you have question don't hesitate to support@addemar.com or your account manager for more details.