[GitHub/WoltLab/woltlab.github.io.git] / 6.0 / migration / wcf21 / templates / index.html


<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
        <link rel="canonical" href="https://docs.woltlab.com/6.0/migration/wcf21/templates/">
      
      <link rel="icon" href="../../../assets/default.favicon.ico">
      <meta name="generator" content="mkdocs-1.4.0, mkdocs-material-8.5.4">
    
    
        <title>Templates - WoltLab Suite Documentation</title>
      
    
      <link rel="stylesheet" href="../../../assets/stylesheets/main.80dcb947.min.css">
      
        
        <link rel="stylesheet" href="../../../assets/stylesheets/palette.cbb835fc.min.css">
        
          
          <meta name="theme-color" content="#009485">
        
      
      <link rel="stylesheet" href="../../../stylesheets/extra.css">
    
    <script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  </head>
  
  
    <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#wcf-21x-templates" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
        <aside class="md-banner">
          <div class="md-banner__inner md-grid md-typeset">
            
            
    <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>

          </div>
          
        </aside>
      
    </div>
    
      <div data-md-component="outdated" hidden>
        
      </div>
    
    
<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="../../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
      
  <img src="../../../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            WoltLab Suite Documentation
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Templates
            
          </span>
        </div>
      </div>
    </div>
    
    
      <label class="md-header__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="../../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
      
  <img src="../../../assets/logo.png" alt="logo">

    </a>
    WoltLab Suite Documentation
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
    <li class="md-nav__item">
      <a href="../../../getting-started/" class="md-nav__link">
        Getting Started
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
      
      
        <label class="md-nav__link" for="__nav_2">
          PHP API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="PHP API" data-md-level="1">
        <label class="md-nav__title" for="__nav_2">
          <span class="md-nav__icon md-icon"></span>
          PHP API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../php/pages/" class="md-nav__link">
        Pages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/database-objects/" class="md-nav__link">
        Database Objects
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/database-access/" class="md-nav__link">
        Database Access
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/exceptions/" class="md-nav__link">
        Exceptions
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
      
      
        <label class="md-nav__link" for="__nav_2_5">
          API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="API" data-md-level="2">
        <label class="md-nav__title" for="__nav_2_5">
          <span class="md-nav__icon md-icon"></span>
          API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
      
      
        <label class="md-nav__link" for="__nav_2_5_1">
          Caches
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Caches" data-md-level="3">
        <label class="md-nav__title" for="__nav_2_5_1">
          <span class="md-nav__icon md-icon"></span>
          Caches
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../php/api/caches/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/caches_persistent-caches/" class="md-nav__link">
        Persistent Caches
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/caches_runtime-caches/" class="md-nav__link">
        Runtime Caches
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/comments/" class="md-nav__link">
        Comments
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/cronjobs/" class="md-nav__link">
        Cronjobs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/events/" class="md-nav__link">
        Events
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
      
      
        <label class="md-nav__link" for="__nav_2_5_5">
          Form Builder
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
        <label class="md-nav__title" for="__nav_2_5_5">
          <span class="md-nav__icon md-icon"></span>
          Form Builder
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../php/api/form_builder/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/form_builder/structure/" class="md-nav__link">
        Structure
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/form_builder/form_fields/" class="md-nav__link">
        Fields
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/form_builder/validation_data/" class="md-nav__link">
        Validation and Data
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/form_builder/dependencies/" class="md-nav__link">
        Dependencies
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/package_installation_plugins/" class="md-nav__link">
        Package Installation Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/user_activity_points/" class="md-nav__link">
        User Activity Points
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/user_notifications/" class="md-nav__link">
        User Notifications
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/api/sitemaps/" class="md-nav__link">
        Sitemaps
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/code-style/" class="md-nav__link">
        Code Style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/apps/" class="md-nav__link">
        Apps
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../php/gdpr/" class="md-nav__link">
        GDPR
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
      
      
        <label class="md-nav__link" for="__nav_3">
          Languages, Templates & CSS
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
        <label class="md-nav__title" for="__nav_3">
          <span class="md-nav__icon md-icon"></span>
          Languages, Templates & CSS
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../view/languages/" class="md-nav__link">
        Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../view/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../view/template-plugins/" class="md-nav__link">
        Template Plugins
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../view/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" >
      
      
        <label class="md-nav__link" for="__nav_4">
          TypeScript and JavaScript API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
        <label class="md-nav__title" for="__nav_4">
          <span class="md-nav__icon md-icon"></span>
          TypeScript and JavaScript API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../javascript/general-usage/" class="md-nav__link">
        General Usage
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/typescript/" class="md-nav__link">
        TypeScript
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
      
      
        <label class="md-nav__link" for="__nav_4_3">
          New API
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="New API" data-md-level="2">
        <label class="md-nav__title" for="__nav_4_3">
          <span class="md-nav__icon md-icon"></span>
          New API
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../javascript/new-api_writing-a-module/" class="md-nav__link">
        Writing a module
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_data-structures/" class="md-nav__link">
        Data Structures
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_core/" class="md-nav__link">
        Core Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_dom/" class="md-nav__link">
        DOM
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_events/" class="md-nav__link">
        Event Handling
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_ajax/" class="md-nav__link">
        Ajax
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_dialogs/" class="md-nav__link">
        Dialogs
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_browser/" class="md-nav__link">
        Browser and Screen Sizes
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/new-api_ui/" class="md-nav__link">
        User Interface
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/legacy-api/" class="md-nav__link">
        Legacy API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/helper-functions/" class="md-nav__link">
        Helper Functions
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../javascript/code-snippets/" class="md-nav__link">
        Code Snippets
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
      
      
        <label class="md-nav__link" for="__nav_5">
          Package Components
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Package Components" data-md-level="1">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Package Components
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../package/package-xml/" class="md-nav__link">
        package.xml
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
      
      
        <label class="md-nav__link" for="__nav_5_2">
          PIPs
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="PIPs" data-md-level="2">
        <label class="md-nav__title" for="__nav_5_2">
          <span class="md-nav__icon md-icon"></span>
          PIPs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../package/pip/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/acl-option/" class="md-nav__link">
        aclOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/acp-menu/" class="md-nav__link">
        acpMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/acp-search-provider/" class="md-nav__link">
        acpSearchProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/acp-template/" class="md-nav__link">
        acpTemplate
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/acp-template-delete/" class="md-nav__link">
        acpTemplateDelete
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/bbcode/" class="md-nav__link">
        bbcode
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/box/" class="md-nav__link">
        box
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/clipboard-action/" class="md-nav__link">
        clipboardAction
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/core-object/" class="md-nav__link">
        coreObject
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/cronjob/" class="md-nav__link">
        cronjob
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/database/" class="md-nav__link">
        database
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/event-listener/" class="md-nav__link">
        eventListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/file/" class="md-nav__link">
        file
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/file-delete/" class="md-nav__link">
        fileDelete
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/language/" class="md-nav__link">
        language
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/media-provider/" class="md-nav__link">
        mediaProvider
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/menu/" class="md-nav__link">
        menu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/menu-item/" class="md-nav__link">
        menuItem
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/object-type/" class="md-nav__link">
        objectType
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/object-type-definition/" class="md-nav__link">
        objectTypeDefinition
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/option/" class="md-nav__link">
        option
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/page/" class="md-nav__link">
        page
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/pip/" class="md-nav__link">
        pip
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/script/" class="md-nav__link">
        script
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/smiley/" class="md-nav__link">
        smiley
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/sql/" class="md-nav__link">
        sql
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/style/" class="md-nav__link">
        style
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/template/" class="md-nav__link">
        template
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/template-delete/" class="md-nav__link">
        templateDelete
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/template-listener/" class="md-nav__link">
        templateListener
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/user-group-option/" class="md-nav__link">
        userGroupOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/user-menu/" class="md-nav__link">
        userMenu
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/user-notification-event/" class="md-nav__link">
        userNotificationEvent
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/user-option/" class="md-nav__link">
        userOption
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/pip/user-profile-menu/" class="md-nav__link">
        userProfileMenu
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../package/database-php-api/" class="md-nav__link">
        Database PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" checked>
      
      
        <label class="md-nav__link" for="__nav_6">
          Migration
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Migration" data-md-level="1">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Migration
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
      
      
        <label class="md-nav__link" for="__nav_6_1">
          From WoltLab Suite 5.5
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WoltLab Suite 5.5" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_1">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.5
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../wsc55/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc55/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc55/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc55/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc55/deprecations_removals/" class="md-nav__link">
        Deprecations and Removals
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
      
      
        <label class="md-nav__link" for="__nav_6_2">
          From WoltLab Suite 5.4
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WoltLab Suite 5.4" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_2">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.4
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../wsc54/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc54/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc54/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc54/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc54/deprecations_removals/" class="md-nav__link">
        Deprecations and Removals
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
      
      
        <label class="md-nav__link" for="__nav_6_3">
          From WoltLab Suite 5.3
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WoltLab Suite 5.3" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_3">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.3
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../wsc53/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc53/session/" class="md-nav__link">
        Session Handling and Authentication
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc53/javascript/" class="md-nav__link">
        TypeScript and JavaScript
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc53/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc53/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
      
      
        <label class="md-nav__link" for="__nav_6_4">
          From WoltLab Suite 5.2
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WoltLab Suite 5.2" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_4">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 5.2
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../wsc52/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc52/templates/" class="md-nav__link">
        Templates and Languages
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc52/libraries/" class="md-nav__link">
        Third Party Libraries
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
      
      
        <label class="md-nav__link" for="__nav_6_5">
          From WoltLab Suite 3.1
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WoltLab Suite 3.1" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_5">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 3.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../wsc31/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_6" type="checkbox" id="__nav_6_6" >
      
      
        <label class="md-nav__link" for="__nav_6_6">
          From WoltLab Suite 3.0
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WoltLab Suite 3.0" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_6">
          <span class="md-nav__icon md-icon"></span>
          From WoltLab Suite 3.0
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../wsc30/php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc30/javascript/" class="md-nav__link">
        JavaScript API
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc30/templates/" class="md-nav__link">
        Templates
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc30/css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../wsc30/package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--active md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_7" type="checkbox" id="__nav_6_7" checked>
      
      
        <label class="md-nav__link" for="__nav_6_7">
          From WCF 2.1
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="From WCF 2.1" data-md-level="2">
        <label class="md-nav__title" for="__nav_6_7">
          <span class="md-nav__icon md-icon"></span>
          From WCF 2.1
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../php/" class="md-nav__link">
        PHP API
      </a>
    </li>
  

    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          Templates
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        Templates
      </a>
      
        
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#page-layout" class="md-nav__link">
    Page Layout
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#sidebars" class="md-nav__link">
    Sidebars
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#forms" class="md-nav__link">
    Forms
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#icons" class="md-nav__link">
    Icons
  </a>
  
    <nav class="md-nav" aria-label="Icons">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#changed-icon-names" class="md-nav__link">
    Changed Icon Names
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#changed-classes" class="md-nav__link">
    Changed Classes
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#removed-elements-and-classes" class="md-nav__link">
    Removed Elements and Classes
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#simple-example" class="md-nav__link">
    Simple Example
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#full-example" class="md-nav__link">
    Full Example
  </a>
  
    <nav class="md-nav" aria-label="Full Example">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#content-header" class="md-nav__link">
    Content Header
  </a>
  
    <nav class="md-nav" aria-label="Content Header">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#recommended-approach" class="md-nav__link">
    Recommended Approach
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#alternative" class="md-nav__link">
    Alternative
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    <li class="md-nav__item">
      <a href="../css/" class="md-nav__link">
        CSS
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../package/" class="md-nav__link">
        Package Components
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
      
      
        <label class="md-nav__link" for="__nav_7">
          Tutorials
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          Tutorials
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item md-nav__item--nested">
      
      
        <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
      
      
        <label class="md-nav__link" for="__nav_7_1">
          Tutorial Series
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
        <label class="md-nav__title" for="__nav_7_1">
          <span class="md-nav__icon md-icon"></span>
          Tutorial Series
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
    <li class="md-nav__item">
      <a href="../../../tutorial/series/overview/" class="md-nav__link">
        Overview
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tutorial/series/part_1/" class="md-nav__link">
        Part 1
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tutorial/series/part_2/" class="md-nav__link">
        Part 2
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tutorial/series/part_3/" class="md-nav__link">
        Part 3
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tutorial/series/part_4/" class="md-nav__link">
        Part 4
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tutorial/series/part_5/" class="md-nav__link">
        Part 5
      </a>
    </li>
  

    <li class="md-nav__item">
      <a href="../../../tutorial/series/part_6/" class="md-nav__link">
        Part 6
      </a>
    </li>
  

        </ul>
      </nav>
    </li>
  

        </ul>
      </nav>
    </li>
  

  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#page-layout" class="md-nav__link">
    Page Layout
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#sidebars" class="md-nav__link">
    Sidebars
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#forms" class="md-nav__link">
    Forms
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#icons" class="md-nav__link">
    Icons
  </a>
  
    <nav class="md-nav" aria-label="Icons">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#changed-icon-names" class="md-nav__link">
    Changed Icon Names
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#changed-classes" class="md-nav__link">
    Changed Classes
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#removed-elements-and-classes" class="md-nav__link">
    Removed Elements and Classes
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#simple-example" class="md-nav__link">
    Simple Example
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#full-example" class="md-nav__link">
    Full Example
  </a>
  
    <nav class="md-nav" aria-label="Full Example">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#content-header" class="md-nav__link">
    Content Header
  </a>
  
    <nav class="md-nav" aria-label="Content Header">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#recommended-approach" class="md-nav__link">
    Recommended Approach
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#alternative" class="md-nav__link">
    Alternative
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  
  <a href="https://github.com/WoltLab/docs.woltlab.com/edit/6.0/docs/migration/wcf21/templates.md" title="Edit this page" class="md-content__button md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25Z"/></svg>
  </a>


<h1 id="wcf-21x-templates">WCF 2.1.x - Templates<a class="headerlink" href="#wcf-21x-templates" title="Permanent link">#</a></h1>
<h2 id="page-layout">Page Layout<a class="headerlink" href="#page-layout" title="Permanent link">#</a></h2>
<p>The template structure has been overhauled and it is no longer required nor recommended to include internal templates, such as <code>documentHeader</code>, <code>headInclude</code> or <code>userNotice</code>. Instead use a simple <code>{include file='header'}</code> that now takes care of of the entire application frame.</p>
<ul>
<li>Templates must not include a trailing <code>&lt;/body&gt;&lt;/html&gt;</code> after including the <code>footer</code> template.</li>
<li>The <code>documentHeader</code>, <code>headInclude</code> and <code>userNotice</code> template should no longer be included manually, the same goes with the <code>&lt;body&gt;</code> element, please use <code>{include file='header'}</code> instead.</li>
<li>The <code>sidebarOrientation</code> variable for the <code>header</code> template has been removed and no longer works.</li>
<li><code>header.boxHeadline</code> has been unified and now reads <code>header.contentHeader</code></li>
</ul>
<p>Please see the full example at the end of this page for more information.</p>
<h2 id="sidebars">Sidebars<a class="headerlink" href="#sidebars" title="Permanent link">#</a></h2>
<p>Sidebars are now dynamically populated by the box system, this requires a small change to unify the markup. Additionally the usage of <code>&lt;fieldset&gt;</code> has been deprecated due to browser inconsistencies and bugs and should be replaced with <code>section.box</code>.</p>
<p>Previous markup used in WoltLab Community Framework 2.1 and earlier:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span>
<span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="p">&lt;</span><span class="nt">fieldset</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">legend</span><span class="p">&gt;</span><span class="cm">&lt;!-- Title --&gt;</span><span class="p">&lt;/</span><span class="nt">legend</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="cm">&lt;!-- Content --&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">fieldset</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>The new markup since WoltLab Suite 3.0:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span>
<span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="p">&lt;</span><span class="nt">section</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;box&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">h2</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;boxTitle&quot;</span><span class="p">&gt;</span><span class="cm">&lt;!-- Title --&gt;</span><span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;boxContent&quot;</span><span class="p">&gt;</span>
        <span class="cm">&lt;!-- Content --&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">section</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h2 id="forms">Forms<a class="headerlink" href="#forms" title="Permanent link">#</a></h2>
<p>The input tag for session ids <code>SID_INPUT_TAG</code> has been deprecated and no longer yields any content, it can be safely removed. In previous versions forms have been wrapped in <code>&lt;div class="container containerPadding marginTop"&gt;…&lt;/div&gt;</code> which no longer has any effect and should be removed.</p>
<p>If you're using the preview feature for WYSIWYG-powered input fields, you need to alter the preview button include instruction:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;messageFormPreviewButton&#39;</span> <span class="na">previewMessageObjectType</span><span class="o">=</span><span class="s1">&#39;com.example.foo.bar&#39;</span> <span class="na">previewMessageObjectID</span><span class="o">=</span><span class="m">0</span><span class="cp">}</span><span class="x"></span>
</code></pre></div></td></tr></table></div>
<p><em>The message object id should be non-zero when editing.</em></p>
<h2 id="icons">Icons<a class="headerlink" href="#icons" title="Permanent link">#</a></h2>
<p>The old <code>.icon-&lt;iconName&gt;</code> classes have been removed, you are required to use the official <code>.fa-&lt;iconName&gt;</code> class names from FontAwesome. This does not affect the generic classes <code>.icon</code> (indicates an icon) and <code>.icon&lt;size&gt;</code> (e.g. <code>.icon16</code> that sets the dimensions), these are still required and have not been deprecated.</p>
<p>Before:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;icon icon16 icon-list&quot;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<p>Now:</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="p">&lt;</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;icon icon16 fa-list&quot;</span><span class="p">&gt;</span>
</code></pre></div></td></tr></table></div>
<h3 id="changed-icon-names">Changed Icon Names<a class="headerlink" href="#changed-icon-names" title="Permanent link">#</a></h3>
<p>Quite a few icon names have been renamed, the official wiki lists the <a href="https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4">new icon names</a> in FontAwesome 4.</p>
<h2 id="changed-classes">Changed Classes<a class="headerlink" href="#changed-classes" title="Permanent link">#</a></h2>
<ul>
<li><code>.dataList</code> has been replaced and should now read <code>&lt;ol class="inlineList commaSeparated"&gt;</code> (same applies to <code>&lt;ul&gt;</code>)</li>
<li><code>.framedIconList</code> has been changed into <code>.userAvatarList</code></li>
</ul>
<h2 id="removed-elements-and-classes">Removed Elements and Classes<a class="headerlink" href="#removed-elements-and-classes" title="Permanent link">#</a></h2>
<ul>
<li><code>&lt;nav class="jsClipboardEditor"&gt;</code> and <code>&lt;div class="jsClipboardContainer"&gt;</code> have been replaced with a floating button.</li>
<li>The anchors <code>a.toTopLink</code> have been replaced with a floating button.</li>
<li>Avatars should no longer receive the class <code>framed</code></li>
<li>The <code>dl.condensed</code> class, as seen in the editor tab menu, is no longer required.</li>
<li>Anything related to <code>sidebarCollapsed</code> has been removed as sidebars are no longer collapsible.</li>
</ul>
<h2 id="simple-example">Simple Example<a class="headerlink" href="#simple-example" title="Permanent link">#</a></h2>
<p>The code below includes only the absolute minimum required to display a page, the content title is already included in the output.</p>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span>
<span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>

<span class="x">&lt;div class=&quot;section&quot;&gt;</span>
<span class="x">    Hello World!</span>
<span class="x">&lt;/div&gt;</span>

<span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
</code></pre></div></td></tr></table></div>
<h2 id="full-example">Full Example<a class="headerlink" href="#full-example" title="Permanent link">#</a></h2>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
<span class="normal"> 2</span>
<span class="normal"> 3</span>
<span class="normal"> 4</span>
<span class="normal"> 5</span>
<span class="normal"> 6</span>
<span class="normal"> 7</span>
<span class="normal"> 8</span>
<span class="normal"> 9</span>
<span class="normal">10</span>
<span class="normal">11</span>
<span class="normal">12</span>
<span class="normal">13</span>
<span class="normal">14</span>
<span class="normal">15</span>
<span class="normal">16</span>
<span class="normal">17</span>
<span class="normal">18</span>
<span class="normal">19</span>
<span class="normal">20</span>
<span class="normal">21</span>
<span class="normal">22</span>
<span class="normal">23</span>
<span class="normal">24</span>
<span class="normal">25</span>
<span class="normal">26</span>
<span class="normal">27</span>
<span class="normal">28</span>
<span class="normal">29</span>
<span class="normal">30</span>
<span class="normal">31</span>
<span class="normal">32</span>
<span class="normal">33</span>
<span class="normal">34</span>
<span class="normal">35</span>
<span class="normal">36</span>
<span class="normal">37</span>
<span class="normal">38</span>
<span class="normal">39</span>
<span class="normal">40</span>
<span class="normal">41</span>
<span class="normal">42</span>
<span class="normal">43</span>
<span class="normal">44</span>
<span class="normal">45</span>
<span class="normal">46</span>
<span class="normal">47</span>
<span class="normal">48</span>
<span class="normal">49</span>
<span class="normal">50</span>
<span class="normal">51</span>
<span class="normal">52</span>
<span class="normal">53</span>
<span class="normal">54</span>
<span class="normal">55</span>
<span class="normal">56</span>
<span class="normal">57</span>
<span class="normal">58</span>
<span class="normal">59</span>
<span class="normal">60</span>
<span class="normal">61</span>
<span class="normal">62</span>
<span class="normal">63</span>
<span class="normal">64</span>
<span class="normal">65</span>
<span class="normal">66</span>
<span class="normal">67</span>
<span class="normal">68</span>
<span class="normal">69</span>
<span class="normal">70</span>
<span class="normal">71</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">{</span><span class="c">*</span>
<span class="c">    The page title is automatically set using the page definition, avoid setting it if you can!</span>
<span class="c">    If you really need to modify the title, you can still reference the original title with:</span>
<span class="c">    {$__wcf-&gt;getActivePage()-&gt;getTitle()}</span>
<span class="c">*</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;pageTitle&#39;</span><span class="cp">}</span><span class="x">Custom Page Title</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="c">*</span>
<span class="c">    NOTICE: The content header goes here, see the section after this to learn more.</span>
<span class="c">*</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="c">* you must not use `headContent` for JavaScript *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;headContent&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">    &lt;link rel=&quot;alternate&quot; type=&quot;application/rss+xml&quot; title=&quot;</span><span class="cp">{</span><span class="nf">lang</span><span class="cp">}</span><span class="x">wcf.global.button.rss</span><span class="cp">{</span><span class="nf">/lang</span><span class="cp">}</span><span class="x">&quot; href=&quot;…&quot;&gt;</span>
<span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="c">* optional, content will be added to the top of the left sidebar *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;sidebarLeft&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">    …</span>

<span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;boxes&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="c">* optional, content will be added to the top of the right sidebar *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;sidebarRight&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">    …</span>

<span class="x">    </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;boxes&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;headerNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">    &lt;li&gt;&lt;a href=&quot;#&quot; title=&quot;Custom Button&quot; class=&quot;jsTooltip&quot;&gt;&lt;span class=&quot;icon icon16 fa-check&quot;&gt;&lt;/span&gt; &lt;span class=&quot;invisible&quot;&gt;Custom Button&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
<span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;header&#39;</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
<span class="x">    &lt;div class=&quot;paginationTop&quot;&gt;</span>
<span class="x">        </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}</span><span class="x"></span>
<span class="x">            </span><span class="cp">{</span><span class="nf">pages</span> <span class="err">…</span><span class="cp">}</span><span class="x"></span>
<span class="x">        </span><span class="cp">{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
<span class="x">    &lt;/div&gt;</span>
<span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="c">* the actual content *</span><span class="cp">}</span><span class="x"></span>
<span class="x">&lt;div class=&quot;section&quot;&gt;</span>
<span class="x">    …</span>
<span class="x">&lt;/div&gt;</span>

<span class="x">&lt;footer class=&quot;contentFooter&quot;&gt;</span>
<span class="x">    </span><span class="cp">{</span><span class="c">* skip this if you&#39;re not using any pagination *</span><span class="cp">}</span><span class="x"></span>
<span class="x">    </span><span class="cp">{</span><span class="nf">hascontent</span><span class="cp">}</span><span class="x"></span>
<span class="x">        &lt;div class=&quot;paginationBottom&quot;&gt;</span>
<span class="x">            </span><span class="cp">{</span><span class="nf">content</span><span class="cp">}{</span><span class="o">@</span><span class="nv">$pagesLinks</span><span class="cp">}{</span><span class="nf">/content</span><span class="cp">}</span><span class="x"></span>
<span class="x">        &lt;/div&gt;</span>
<span class="x">    </span><span class="cp">{</span><span class="nf">/hascontent</span><span class="cp">}</span><span class="x"></span>

<span class="x">    &lt;nav class=&quot;contentFooterNavigation&quot;&gt;</span>
<span class="x">        &lt;ul&gt;</span>
<span class="x">            &lt;li&gt;&lt;a href=&quot;…&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-plus&quot;&gt;&lt;/span&gt; &lt;span&gt;Custom Button&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
<span class="x">            </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentFooterNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">        &lt;/ul&gt;</span>
<span class="x">    &lt;/nav&gt;</span>
<span class="x">&lt;/footer&gt;</span>

<span class="x">&lt;script data-relocate=&quot;true&quot;&gt;</span>
<span class="x">    /* any JavaScript code you need */</span>
<span class="x">&lt;/script&gt;</span>

<span class="cp">{</span><span class="c">* do not include `&lt;/body&gt;&lt;/html&gt;` here, the footer template is the last bit of code! *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">include</span> <span class="na">file</span><span class="o">=</span><span class="s1">&#39;footer&#39;</span><span class="cp">}</span><span class="x"></span>
</code></pre></div></td></tr></table></div>
<h3 id="content-header">Content Header<a class="headerlink" href="#content-header" title="Permanent link">#</a></h3>
<p>There are two different methods to set the content header, one sets only the actual values, but leaves the outer HTML untouched, that is generated by the <code>header</code> template. This is the recommended approach and you should avoid using the alternative method whenever possible.</p>
<h4 id="recommended-approach">Recommended Approach<a class="headerlink" href="#recommended-approach" title="Permanent link">#</a></h4>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">{</span><span class="c">* This is automatically set using the page data and should not be set manually! *</span><span class="cp">}</span><span class="x"></span>
<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentTitle&#39;</span><span class="cp">}</span><span class="x">Custom Content Title</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentDescription&#39;</span><span class="cp">}</span><span class="x">Optional description that is displayed right after the title.</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>

<span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x">List of navigation buttons displayed right next to the title.</span><span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
</code></pre></div></td></tr></table></div>
<h4 id="alternative">Alternative<a class="headerlink" href="#alternative" title="Permanent link">#</a></h4>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
<span class="normal"> 2</span>
<span class="normal"> 3</span>
<span class="normal"> 4</span>
<span class="normal"> 5</span>
<span class="normal"> 6</span>
<span class="normal"> 7</span>
<span class="normal"> 8</span>
<span class="normal"> 9</span>
<span class="normal">10</span>
<span class="normal">11</span>
<span class="normal">12</span>
<span class="normal">13</span>
<span class="normal">14</span>
<span class="normal">15</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="cp">{</span><span class="nf">capture</span> <span class="na">assign</span><span class="o">=</span><span class="s1">&#39;contentHeader&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">    &lt;header class=&quot;contentHeader&quot;&gt;</span>
<span class="x">        &lt;div class=&quot;contentHeaderTitle&quot;&gt;</span>
<span class="x">            &lt;h1 class=&quot;contentTitle&quot;&gt;Custom Content Title&lt;/h1&gt;</span>
<span class="x">            &lt;p class=&quot;contentHeaderDescription&quot;&gt;Custom Content Description&lt;/p&gt;</span>
<span class="x">        &lt;/div&gt;</span>

<span class="x">        &lt;nav class=&quot;contentHeaderNavigation&quot;&gt;</span>
<span class="x">            &lt;ul&gt;</span>
<span class="x">                &lt;li&gt;&lt;a href=&quot;</span><span class="cp">{</span><span class="nf">link</span> <span class="na">controller</span><span class="o">=</span><span class="s1">&#39;CustomController&#39;</span><span class="cp">}{</span><span class="nf">/link</span><span class="cp">}</span><span class="x">&quot; class=&quot;button&quot;&gt;&lt;span class=&quot;icon icon16 fa-plus&quot;&gt;&lt;/span&gt; &lt;span&gt;Custom Button&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;</span>
<span class="x">                </span><span class="cp">{</span><span class="nf">event</span> <span class="na">name</span><span class="o">=</span><span class="s1">&#39;contentHeaderNavigation&#39;</span><span class="cp">}</span><span class="x"></span>
<span class="x">            &lt;/ul&gt;</span>
<span class="x">        &lt;/nav&gt;</span>
<span class="x">    &lt;/header&gt;</span>
<span class="cp">{</span><span class="nf">/capture</span><span class="cp">}</span><span class="x"></span>
</code></pre></div></td></tr></table></div>

  <hr>
<div class="md-source-file">
  <small>
    
      Last update:
      2021-01-08
    
  </small>
</div>


              </article>
            </div>
          
          
        </div>
        
      </main>
      
        <footer class="md-footer">
  
    
    <nav class="md-footer__inner md-grid" aria-label="Footer" >
      
        
        <a href="../php/" class="md-footer__link md-footer__link--prev" aria-label="Previous: PHP API" rel="prev">
          <div class="md-footer__button md-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
          </div>
          <div class="md-footer__title">
            <div class="md-ellipsis">
              <span class="md-footer__direction">
                Previous
              </span>
              PHP API
            </div>
          </div>
        </a>
      
      
        <a href="../css/" class="md-footer__link md-footer__link--next" aria-label="Next: CSS" rel="next">
          <div class="md-footer__title">
            <div class="md-ellipsis">
              <span class="md-footer__direction">
                Next
              </span>
              CSS
            </div>
          </div>
          <div class="md-footer__button md-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4Z"/></svg>
          </div>
        </a>
      
    </nav>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright © 2020 WoltLab GmbH
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-copyright">
	<a href="https://www.woltlab.com/legal-notice/">Legal Notice</a> 
	<a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": "../../..", "features": ["navigation.tracking"], "search": "../../../assets/javascripts/workers/search.5bf1dace.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version.title": "Select version"}, "version": {"provider": "mike"}}</script>
    
    
      <script src="../../../assets/javascripts/bundle.078830c0.min.js"></script>
      
    
  </body>
</html>