Template layout is the new default layout for new Elephant versions. In order to make template layout compliant with current table layout versions, template layout makes use of different CSS files.

To activate templates for the whole site, use the template element under layout on the root context. For local templates, those applying to the context where are defined, use the local-template element.

Typical configuration is:

context.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<elephant-context lang="_en">
  <i18n>
    <name>
      <_en>Home</_en>
    </name>
  </i18n>
  <layout>
    <local-template name="landing"/>
    <template name="web"/>
  </layout>
</elephant-context>

webTemplate.html

<#include "header.html"/>

<div class="webBody" style="width:100%;background:#fff;">
  <div style="width:1000px;margin:auto;">
    <table style="width:100%">
      <tr style="vertical-align:top;">
        <#if nav.hasOptions(2,1,true)>
          <td style="width:25%;padding-top:15px;padding-right:15px;">
            ${nav.drawOptions(false,2,1,true)}
          </td>
        
        <td style="padding-top:15px;">
          <#if traversal>${nav.drawTraversal(true)}
          ${body.startConstruction()}
          <#if traversal>${nav.drawTraversal(false)}
          <#if printVersion??>${printVersion}
          <#if fileVersion??>${fileVersion.render()}
        </td>
      </tr>
    </table>
  </div>
</div>

<#include "footer.html"/>

header.html

<div class="header">
  <div style="width:1000px;margin:auto;">
    <table cellpadding="0" cellspacing="0" style="width:100%;height:40px;">
      <tr style="vertical-align:bottom;">
        <td>
          <a href="${constructor.rootWebPath}">
            <img src="${constructor.rootWebPath}/_internal/repository/logo.png"/>
          </a>
        </td>
        <td>
          ${nav.drawTabulator(1)}
        </td>
      </tr>
    </table>
  </div>
</div>
<div style="width:100%;margin-top:43px;">
  <div style="width:1000px;margin:auto;">
    ${nav.drawLocation()}
  </div>
</div>

footer.html

<div class="footer">
  <div style="width:1000px;margin:auto;">
    <table cellpadding="5">
      <tr style="vertical-align:top;">
        <td>${webmap.draw(3)}</td>
        <td width="20%"><#include "credentials.html"/></td>
      </tr>
    </table>
  </div>  
</div>

landingTemplate.html

<#include "header.html"/>

${body.startConstruction()}

<#include "footer.html"/>