<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Templates - DND 5th Edition</title>
    
    
    
    <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/init.combined.js"></script>
    <script  type="text/javascript">
        var URL_HOST = 'www.wikidot.com';
        var URL_DOMAIN = 'wikidot.com';
        var USE_SSL =  true ;
        var URL_STATIC = 'https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327';
        // global request information
        
        var WIKIREQUEST = {};
        WIKIREQUEST.info = {};
        
        WIKIREQUEST.info.domain = "dnd5e.wikidot.com";
        WIKIREQUEST.info.siteId = 1475899;
        WIKIREQUEST.info.siteUnixName = "dnd5e";
        WIKIREQUEST.info.categoryId = 11887291;
        WIKIREQUEST.info.themeId = 2386862;
        WIKIREQUEST.info.requestPageName = "help:templates";
        OZONE.request.timestamp = 1755515707;
        OZONE.request.date = new Date();
        WIKIREQUEST.info.lang = 'en';
                WIKIREQUEST.info.pageUnixName = "help:templates";
        WIKIREQUEST.info.pageId = 48865958;
                        WIKIREQUEST.info.lang = "en";
        OZONE.lang = "en";
        var isUAMobile = !!/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    </script>
    
    


    
        <script  type="text/javascript">
    
        require.config({
            baseUrl: URL_STATIC + '/common--javascript',
            paths: {
                'jquery.ui': 'jquery-ui.min',
                'jquery.form': 'jquery.form'
            }
        });
    
    </script>
    
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
            
    
    
    
    
    <meta http-equiv="content-language" content="en"/>
    <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/WIKIDOT.combined.js"></script>
            <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.2.0/bootstrap.min.js"></script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        
        <link href="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    
    <style type="text/css" id="internal-style">
        
        /* modules */
        
                /* bootstrap */
            @import url(https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.2.0/bootstrap.min.css);
                
        /* theme */
                    @import url(https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--theme/bootstrap-base/css/style.css);
                    @import url(https://dnd5e.wdfiles.com/local--theme/standard-yellow/style.css);
            </style>
    
            <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        
        
    <link rel="shortcut icon" href="/local--favicon/favicon.gif"/>
    <link rel="icon" type="image/gif" href="/local--favicon/favicon.gif"/>
    
            <link rel="apple-touch-icon" href="/common--images/apple-touch-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="/common--images/apple-touch-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="/common--images/apple-touch-icon-114x114.png" />
        
        
            <link rel="alternate" type="application/wiki" title="Edit this page" href="javascript:WIKIDOT.page.listeners.editClick()"/>
    
        <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-18234656-1']);
        _gaq.push(['_setDomainName', 'none']);
        _gaq.push(['_setAllowLinker', true]);
        _gaq.push(['_trackPageview']);

        _gaq.push(['old._setAccount', 'UA-68540-5']);
        _gaq.push(['old._setDomainName', 'none']);
        _gaq.push(['old._setAllowLinker', true]);
        _gaq.push(['old._trackPageview']);

            </script>
    
    <script type="text/javascript">
        window.google_analytics_uacct = 'UA-18234656-1';
        window.google_analytics_domain_name = 'none';
    </script>
    
        <link rel="manifest" href="/onesignal/manifest.json" />
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" acync=""></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(function() {
          OneSignal.init({
            appId: null,
          });
        });
    </script>
        
<style>
.admins-only, li.admins-only{  display: none; }
</style>
<script data-cfasync="false">window.nitroAds=window.nitroAds||{createAd:function(){return new Promise(e=>{window.nitroAds.queue.push(["createAd",arguments,e])})},addUserToken:function(){window.nitroAds.queue.push(["addUserToken",arguments])},queue:[]};</script>
<script data-cfasync="false" async src="https://s.nitropay.com/ads-143.js"></script>
<style>
.image-box .col-md-12 {
    padding: 0;
    float: none;
}
.image-box {
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box * {  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right {  margin: 4px auto; }
.image-box.image-box-left.force-float-true {
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true {
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading {
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box-modal .modal-header p {  margin: 0; }
.image-box-modal .image-box-heading {
    font-size: 125%;
    font-weight: 500;
}

.image-box .image-box-heading p {  margin: 0; }
.image-box .image-box-image {  margin: 0; }
.image-box .image-box-image p {  margin: 0; }
.image-box .image-box-image img,
.image-box-modal .image-box-image img {  margin: 0 auto; }
.image-box .image-box-link {
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover {
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box-modal .image-box-link[href=none] {  pointer-events: none; }
.image-box .image-box-caption {
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box-modal .image-box-caption {  text-align: center; }
.image-box .image-box-caption p:last-child,
.image-box-modal .image-box-caption p:last-child {  margin: 0; }
.image-box.image-box-primary {  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading {
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption {  color: #428BCA; }
.image-box.image-box-info {  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading {
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover {  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption {  color: #5BC0DE; }
.image-box.image-box-success {  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading {
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover {  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption {  color: #5CB85C; }
.image-box.image-box-danger {  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading {
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover {  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption {  color: #D9534F; }
.image-box.image-box-warning {  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading {
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover {  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption {  color: #F0AD4E; }

@media(min-width: 992px) {
    .image-box {  width: auto; }
    .image-box.image-box-left {
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right {
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<style>
.image-box .col-md-12{
    padding: 0;
    float: none;
}
.image-box{
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box *{  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right{  margin: 4px auto; }
.image-box.image-box-left.force-float-true{
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true{
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading{
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box .image-box-heading p{  margin: 0; }
.image-box .image-box-image{  margin: 0; }
.image-box .image-box-image p{  margin: 0; }
.image-box .image-box-image img{  margin: 0 auto; }
.image-box .image-box-link{
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover{
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box .image-box-link[href=none]{  pointer-events: none; }
.image-box .image-box-caption{
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box .image-box-caption p:last-child{  margin: 0; }
.image-box.image-box-primary{  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading{
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption{  color: #428BCA; }
.image-box.image-box-info{  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading{
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover{  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption{  color: #5BC0DE; }
.image-box.image-box-success{  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading{
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover{  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption{  color: #5CB85C; }
.image-box.image-box-danger{  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading{
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover{  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption{  color: #D9534F; }
.image-box.image-box-warning{  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading{
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover{  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption{  color: #F0AD4E; }

@media(min-width: 992px){
    .image-box{  width: auto; }
    .image-box.image-box-left{
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right{
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--modules/js/misc/NewPageHelperModule.js"></script>
</head>
<body id="html-body">
<div id="skrollr-body">
<!---------------------------------------------------------
  Standard Template Layout
  Developed by the Wikidot Community
  Version: 1.01.141118
---------------------------------------------------------->
<a name="page-top"></a>

<div class="container-wrap-wrap">
<div class="container-wrap">
 
<header class="header-wrap" role="banner">
  <div class="container header">
    <div class="site-title">
      <h1><a href="/"><span>DND 5th Edition</span></a></h1>
      <h2><span>community wiki</span></h2>
    </div>
    <div class="login-status">
      <a href="javascript:;" onclick="WIKIDOT.page.listeners.createAccount(event)" class="login-status-create-account btn">Create account</a> <span>or</span> <a href="javascript:;" onclick="WIKIDOT.page.listeners.loginClick(event)" class="login-status-sign-in btn btn-primary">Sign in</a> 
    </div>
    <div id="search-top-box" class="form-search">
    <form id="search-top-box-form" action="dummy" class="input-append">
        <input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="Search this site" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"/><input class="button btn" type="submit" name="search" value="Search"/>
    </form>
</div>
  </div>
 
  
  <nav class="top-bar-wrap navbar navbar-default" role="navigation">
    <div class="container top-bar">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-target">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Home</a>
      </div>
      <div class="collapse navbar-collapse navbar-top-target">
        

<ul class="nav navbar-nav">
<li><a href="/main:about">About <span class="fa fa-info-circle"><span style="white-space: pre-wrap;">&nbsp;</span></span></a></li>
<li><a href="/system:join">Membership <span class="fa fa-user"><span style="white-space: pre-wrap;">&nbsp;</span></span></a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Help Docs <span class="fa fa-question-circle"><span style="white-space: pre-wrap;">&nbsp;</span></span></a>
<ul class="dropdown-menu">
<li><a href="/help:_home">User Guide</a></li>
<li><a href="/help:first-time-user">First Time User</a></li>
<li><a href="/help:quick-reference">Quick Reference</a></li>
<li><a href="/help:creating-pages">Creating Pages</a></li>
<li><a href="/help:editing-pages">Editing Pages</a></li>
<li><a href="/help:navigation-bars">Navigation Bars</a></li>
<li><a href="/help:using-modules">Using Modules</a></li>
<li><a href="/help:templates">Templates</a></li>
<li><a href="/help:css-themes">CSS Themes</a></li>
</ul>
</li>
<li class="dropdown admins-only"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-cog"><span style="white-space: pre-wrap;">&nbsp;</span></span></a>
<ul class="dropdown-menu">
<li><a href="/_admin">Site Manager</a></li>
<li><a href="/nav:top">Edit Top Bar</a></li>
<li><a href="/nav:side">Edit Side Bar</a></li>
<li><a href="/css:_home">CSS Manager</a></li>
<li><a href="/system:recent-changes">Recent Changes</a></li>
<li><a href="/system:list-all-pages">List All Pages</a></li>
</ul>
</li>
</ul>



<div style="display : none;">
</div>

      </div>
    </div>
  </nav>
  
 
  <div class="header-extra-div-1"><span></span></div>
  <div class="header-extra-div-2"><span></span></div>
  <div class="header-extra-div-3"><span></span></div>
</header>
 
<main class="content-wrap" role="main">
  <div class="container content">
    <div class="row">
    
      <nav class="side-bar-wrap col-md-3">
        <div class="side-bar">
          <div class="side-bar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-side-target">
              <span>Menu</span>
            </button>
          </div>
          <div class="collapse navbar-collapse navbar-side-target">
            

<div class="text-center" style="margin-bottom: 12px;"><div class="error-block">You should be logged in to clone a site.</div></div>
<h1 ><span>Site Navigation</span></h1>
<ul>
<li><a href="/help:_home">User Guide</a></li>
<li><a href="/help:first-time-user">First Time User</a></li>
</ul>
<ul>
<li><a href="/main:about">About</a></li>
<li><a href="/main:contact">Contact</a></li>
<li><a href="/legal:_home">Legal</a></li>
<li><a href="/forum:start">Discussion Forums</a></li>
<li><a href="/system:members">Members</a></li>
</ul>
<h1 ><span>Create a Page</span></h1>

<div class="new-page-box" style="text-align: center; margin: 1em 0;">
	<form action="dummy.html" method="get" onsubmit="WIKIDOT.modules.NewPageHelperModule.listeners.create(event);">
		<input class="text" name="pageName" type="text" size="20" maxlength="128" style="margin: 1px"/>
				<input type="submit" class="button" value="New page" style="margin: 1px;"/>
																
	</form>
</div>

                    
            <!-- wikidot_below_sidebar_160x600 -->
<div id="wad-dnd5e-below-sidebar" class="wd-adunit wd-ad-np wd-adunit-below_sidebar"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-below-sidebar', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 160, 600 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  },
  "mediaQuery": "(min-width: 1000px)"
  });
</script>
        
    

            <div style="display: none"></div>
          </div>
        </div>
      </nav>
      
      <div class="main-content-wrap col-md-9">
      
        <div class="main-content">
          <div class="page-title page-header"><span>Templates</span></div>
          <div class="breadcrumbs"><a href="/help:_home">User Guide</a> &raquo; Templates</div>
          
        
            <!-- wikidot_top_728x90 -->
<div id="wad-dnd5e-above-content" class="wd-adunit wd-ad-np wd-adunit-above_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-above-content', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 728, 90 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  },
  "mediaQuery": "(min-width: 768px)"
  });
</script>
<div id="wad-dnd5e-above-content-mobile" class="wd-adunit wd-ad-np wd-adunit-above_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-above-content-mobile', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 320, 50 ], [320, 100] ],
  "report": {
    "enabled": true,
    "icon": true,
    "wording": "Report Ad",
    "position": "top-right"
  },
  "mediaQuery": "(min-width: 320px) and (max-width: 767px)"
  });
</script>
        
    

<div id="page-content">

<p>In the <a href="/help:creating-pages">Creating Pages</a> help page, you were introduced to the usefulness of categories, especially when working in tandem with the ListPages module. Yet, we can ask an additional question: if pages in a category are meant to be related to one another, then is it possible to automatically force each page to have the same layout? Of course, the answer is yes!</p>
<table style="margin:0; padding:0">
<tr>
<td style="margin:0; padding:0">
<div id="toc">
<div id="toc-action-bar"><a href="javascript:;" onclick="WIKIDOT.page.listeners.foldToc(event)">Fold</a><a style="display: none" href="javascript:;" onclick="WIKIDOT.page.listeners.unfoldToc(event)">Unfold</a></div>
<div class="title">Table of Contents</div>
<div id="toc-list">
<div style="margin-left: 1em;"><a href="#toc0">Live Templates</a></div>
<div style="margin-left: 1em;"><a href="#toc1">Static Templates</a></div>
<div style="margin-left: 1em;"><a href="#toc2">Data Forms</a></div>
</div>
</div>
</td>
</tr>
</table>
<h1 id="toc0"><span>Live Templates</span></h1>
<p>Wikidot offers support for what are called Live Templates. Live Templates on a per category basis force all pages in a particular category to be formatted the same general way. For example, if you wanted for all pages in the &quot;article&quot; category to have a byline, then live templates will allow you to accomplish that without your users/writers needing to write the byline themselves.</p>
<div class="alert alert-info">
<p>If you recall from the <a href="/help:using-modules">Using Modules</a> help page, this is is similar to how you format the results of the ListPages module.</p>
</div>
<p>So, let's go ahead and see how we can make a live template with a byline.</p>
<p>In order to access the live template for a category, you must go to the <tt><em>category</em>:_template</tt> page. For example, the live template for this &quot;help&quot; category is located at <tt><a class="newpage" href="/help:_template">help:_template</a></tt>. You can edit this page like any normal wiki page, and every category has its own distinct live template.</p>
<p>For our &quot;article&quot; category, located at <tt>article:_template</tt>, we want to format the page as such:</p>
<div class="code">
<pre>
<code>By AUTHOR
Published DATE

CONTENT</code>
</pre></div>
<p>The question is, how do we replace the all-caps words with their respective ideas? Live templates use what are called <em>page variables</em>, which are the same as used for the ListPages module. A page variable, like <tt>%%created_by%%</tt>, will be replaced by whoever created the page in question. Therefore, your live template page will have <tt>By %%created_by%%</tt> on the first line, but your individual pages will suddenly have &quot;By Timothy Foster&quot; at the top of the page.</p>
<p>Using page variables, our live template for the &quot;article&quot; category will now look like this:</p>
<div class="code">
<pre>
<code>By %%created_by%%
Published %%created_at%%

%%content%%</code>
</pre></div>
<p>Now, if you have a page called <tt>article:first-post</tt>, you will see the following:</p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<p><span class="panel-title">Page Source</span></p>
</div>
<div class="panel-body">
<div class="code">
<pre>
<code>This is my first post!

**I am excited!**</code>
</pre></div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<p><span class="panel-title">Result</span></p>
</div>
<div class="panel-body">
<p>By Timothy Foster<br />
Published 23 Jul 2014, 10:57</p>
<p>This is my first post!</p>
<p><strong>I am excited!</strong></p>
</div>
</div>
</div>
</div>
<p>To find out all the possible page variables you can use, be sure to visit the <a href="http://www.wikidot.com/doc:templates" target="_blank">Wikidot Documentation</a>.</p>
<h1 id="toc1"><span>Static Templates</span></h1>
<p>Static templates are different from live templates. Live templates will automatically conform page data to a format. Static templates, on the other hand, pre-fill the edit box with code that will achieve a particular format. If you have a template and set it to a category, then every page created in that category will start off with code determined by the template. Since this code resides in the edit box, the user creating the page may, if desired, remove all the code and start off on a clean slate, though merely having the code there encourages otherwise.</p>
<div class="alert alert-warning">
<p>Therefore, unlike live templates, page content is <strong>not</strong> automatically conformed to a format. Live templates force a format, whereas static templates merely suggest. Static templates allows for some user customization, which may be desired in some cases.</p>
</div>
<p>In order to define a template, you must create a page in the &quot;template&quot; category. You then edit this page like any normal pages, but since the template is static (not live), using page variables (like <tt>%%content%%</tt>) will not do anything. Instead, you would need to somehow alert the user where pieces of information ought to go.</p>
<p>The below represents an example of a static template page, <tt>template:article</tt>:</p>
<div class="code">
<pre>
<code>By AUTHOR
Published DATE

YOUR CONTENT HERE</code>
</pre></div>
<p>In order to set a template page to a category, though, you need to access the <a href="/_admin">Site Manager</a>. The below represents a step by step process:</p>
<div class="row">
<div class="col-md-7">
<ul>
<li>From the Dashboard, click on &quot;Appearance &amp; Behavior&quot;.</li>
<li>Look for the &quot;Page templates&quot; option.</li>
<li>Select the category for which you want to apply a static template.</li>
<li>Select the static template you want to use.</li>
<li>Click &quot;Save&quot;, and you're done!</li>
</ul>
</div>
<div class="col-md-5">
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diTemplatesne;">
<p>Templates</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" data-toggle="modal" data-target="#u-Templates" href=""><img src="http://css.wikidot.com/local--files/csi:help-templates/wd_templates.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diThis is what it looks like in the Site Managerne;">
<p>This is what it looks like in the Site Manager</p>
</div>
</div>
<div id="u-Templates" class="image-box-modal modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="diTemplatesne;">
<p><span class="modal-title image-box-heading">Templates<a class="close" data-dismiss="modal" href=""><span style="white-space: pre-wrap;">×</span></a></span></p>
</div>
<div class="modal-body">
<div class="image-box-image"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help-templates/wd_templates.png"><img src="http://css.wikidot.com/local--files/csi:help-templates/wd_templates.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
</div>
<div class="modal-footer" style="diThis is what it looks like in the Site Managerne;">
<div class="image-box-caption">
<p>This is what it looks like in the Site Manager</p>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
<h1 id="toc2"><span>Data Forms</span></h1>
<p>Using a live template gives you a good degree of control over a page's format, but it does not give you very much control over the user's page content. Data forms, however, allow you to customize the edit field itself so that users are prompted to input the precise information you want them to. If, for instance, you want your users to input a name, date of birth, and short biography, then using dataforms would be perfect.</p>
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diSample Formne;">
<p>Sample Form</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help-templates/wd_forms.png"><img src="http://css.wikidot.com/local--files/csi:help-templates/wd_forms.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diThis is what a typical form edit field looks likene;">
<p>This is what a typical form edit field looks like</p>
</div>
<div style="display: none !important;">

</div>
</div>
<p>Data Forms work on a per-category basis, just like live templates. In fact, establishing Data Forms requires the use of the live template page! The start of every data form is always the same; on the live template page, the following code is pasted at the bottom of the edit field:</p>
<div class="code">
<pre>
<code>====
[[form]]
fields:

[[/form]]</code>
</pre></div>
<p>After the word &quot;fields:&quot;, you specify what kind of edit fields you want to be present. The above image, for example, uses the below code:</p>
<div class="code">
<pre>
<code>fields:
  author:
    type: text
    label: Author
  date:
    type: date
    label: Date
  content:
    type: wiki
    height: 8
    label: Content</code>
</pre></div>
<p>In total, there are 11 different field types (ranging from standard text to file attachments), and each type has a variety of options. All these field types and options are specified on the live template page using the format above. This page serves only as an introduction, so to learn more, be sure to visit <a href="http://www.wikidot.com/doc-data-forms:start" target="_blank">Wikidot's Documentation</a> or ask <a href="http://community.wikidot.com" target="_blank">the Community</a>.</p>
<p>In order to use the values that a user places, you can use <em>form variables</em>. Form variables work just like page variables. In the above example, if I wanted to use the value inputted into the <tt>author</tt> field, I would use <tt>%%form_data{author}%%</tt>. To use the <tt>content</tt> field, I would use <tt>%%form_data{content}%%</tt>. You can learn more about these on the <a href="http://www.wikidot.com/doc-data-forms:start" target="_blank">documentation</a>.</p>
</div>




        
            <!-- floating video element -->
<div id="wad-dnd5e-floating-video" style="position: fixed; right: 0; bottom: 0;"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-floating-video', {
  "refreshTime": 30,
  "format": "floating",
  "mediaQuery": "(min-width: 1025px)"
  });
</script>
        
    


        
                        <!-- wikidot_bottom_300x250 -->
<div id="wad-dnd5e-below-content" class="wd-adunit wd-ad-np wd-adunit-below_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-below-content', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 300, 250 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  }
  });
</script>
                    
    


          
          <div class="page-info-break"></div>
          <div class="page-options-container"></div>
          <div id="action-area" style="display: none;"></div>
        </div>
      </div>
    </div>
  </div>
</main>
 
<footer class="footer-wrap" role="contentinfo">
  <div class="container footer">
    <div class="options" style="display: block; visibility: visible;">
    <a href="http://www.wikidot.com/doc" id="wikidot-help-button">Help</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:terms-of-service" id="wikidot-tos-button">Terms of Service</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:privacy-policy" id="wikidot-privacy-button">Privacy</a>
    &nbsp;|
    <a href="javascript:;" id="bug-report-button" onclick="WIKIDOT.page.listeners.pageBugReport(event)">Report a bug</a>
    &nbsp;|
    <a href="javascript:;" id="abuse-report-button" onclick="WIKIDOT.page.listeners.flagPageObjectionable(event)">Flag as objectionable</a>
    <span id="consent-box" style="display:none">
        &nbsp;|
        <a href="javascript:;"  onclick="window.__cmp('showModal');">Update cookie settings</a>
    </span>

    <script>
    if (window["nitroAds"] && window["nitroAds"].loaded) {
        document.getElementById("consent-box").style.display = window["__tcfapi"] ? "" : "none";
        } else {
        document.addEventListener(
                "nitroAds.loaded",
                () =>
                (document.getElementById("consent-box").style.display = window["__tcfapi"] ? "" : "none")
                );
    }
    </script>
</div>
Powered by <a href="http://www.wikidot.com">Wikidot.com</a>
    <div class="license-area">Unless otherwise stated, the content of this page is licensed under <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a></div>
  </div>
  <div class="extrac-div-1"><span></span></div>
  <div class="extrac-div-2"><span></span></div>
  <div class="extrac-div-3"><span></span></div>
</footer>
 

</div> <!-- container-wrap -->
 
<div class="extra-div-1"><span></span></div>
<div class="extra-div-2"><span></span></div>
<div class="extra-div-3"><span></span></div>
<div class="extra-div-4"><span></span></div>
<div class="extra-div-5"><span></span></div>
<div class="extra-div-6"><span></span></div>
</div> <!-- container-wrap-wrap -->
</div>
<div id="dummy-ondomready-block" style="display: none;" ></div>
    <!-- Google Analytics load -->
    <script type="text/javascript">
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>




<div id="page-options-bottom-tips" style="display: none;">
    <div id="edit-button-hovertip">
        Click here to edit contents of this page.    </div>
</div>
<div id="page-options-bottom-2-tips"  style="display: none;">
    <div id="edit-sections-button-hovertip">
        Click here to toggle editing of individual sections of the page (if possible).         Watch headings for an &quot;edit&quot; link when available.    </div>
    <div id="edit-append-button-hovertip">
        Append content without editing the whole page source.    </div>
    <div id="history-button-hovertip">
        Check out how this page has evolved in the past.    </div>
    <div id="discuss-button-hovertip">
        If you want to discuss contents of this page - this is the easiest way to do it.    </div>
    <div id="files-button-hovertip">
        View and manage file attachments for this page.    </div>
    <div id="site-tools-button-hovertip">
        A few useful tools to manage this Site.    </div>
    <div id="backlinks-button-hovertip">
        See pages that link to and include this page.    </div>
    <div id="rename-move-button-hovertip">
        Change the name (also URL address, possibly the category) of the page.    </div>
    <div id="view-source-button-hovertip">
        View wiki source for this page without editing.    </div>
    <div id="parent-page-button-hovertip">  
        View/set parent page (used for creating breadcrumbs and structured layout).    </div>
            <div id="abuse-report-button-hovertip">
            Notify administrators if there is objectionable content in this page.        </div>
        <div id="bug-report-button-hovertip">
            Something does not work as expected? Find out what you can do.        </div>
        <div id="wikidot-help-button-hovertip">
            General Wikidot.com documentation and help section.        </div>
        <div id="wikidot-tos-button-hovertip">
            Wikidot.com Terms of Service - what you can, what you should not etc.        </div>
        <div id="wikidot-privacy-button-hovertip">
            Wikidot.com Privacy Policy.          
        </div>
    </div>
</body>
</html>