Template layout

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.

Table layout

Template layout

default-site.css

default-template-site.css

default-navigator.css

default-template-navigator.css

default-navigator-site.css

default-template-navigator-site.css

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"/>
Printer version
English08/11/13 15:32Lluís Turró Cutiller
English01/09/18 19:05Lluís Turró Cutiller