The first kind of template employed by XenForo is written using HTML 5.

Template code

These templates mark up the content and data that has been returned from the XenForo application for display in a web browser.

There is little to no styling information in XenForo's HTML templates. The HTML serves only to provide a semantic wrapper for the data delivered by the application.

The xen: Template Syntax

Templates can work with dynamic data and pass information to other templates using XenForo's xen: template syntax.

The template syntax is extremely rich and powerful, and it is beyond the scope of this document to investigate it fully, but here are a few useful examples.

<xen:title>Page Title</xen:title>

The contents of the xen:title tag will be used as the title for the page within the <head> element.

<xen:h1>Document Title</xen:h1> If xen:h1 is specified, it allows the document title (shown in an <h1> tag) to be different from that of the page title. If xen:h1 is not set, the page title will be used for the <h1>.
<xen:include template="template_name" /> Includes the named template in its entirety at the insertion point. The included template will have access to all variables and parameters that the including template has.
<xen:require css="style.css" /> Instructs the system to add the 'style.css' template to the CSS output for the current page.
<xen:require js="/path/to/script.js" /> Instructs the system to add a <script type="text/javascript"> tag in the <head> pointing to /path/to/script.js. This can be either a relative or an absolute URL.
<xen:avatar user="$user" size="m" /> The medium-sized (m) avatar (user image) belonging to the user specified in the $user variable will be output. Clicking on the avatar will open the user's member card.
<xen:date time="$datetime" /> The date specified by the unix timestamp in the $datetime variable will be output as a relative timestamp.
<xen:if is="{$conditional}">Conditional content</xen:if> The value of the $conditional variable will be checked, and if it evaluates to a true value, 'Conditional content' will be output to the page. xen:if can be used in conjunction with xen:elseif and xen:else to build more complex conditional branches.

There are many more functions and constructions available in the xen: template syntax, which will be covered more fully in XenForo developer documentation, but the best way to learn about them is to play with the templates.

A Note on CSS Class Names and Element IDs

When customizing templates, there are certain rules and conventions you should follow in order to ensure that functionality remains intact and readability is maintained.

  • Normal CSS classes and element IDs are noted in camel-case format, starting with a lowercase letter.

    Examples:

    • <div id="myDivElement">
    • <span class="spanWithCssClass">
    • <input class="textCtrl" />

  • In some cases, elements will have CSS classes and IDs starting with an uppercase letter. These are used as identifiers for JavaScript functionality.

    Examples:

    • <form class="AutoValidator">
    • <a class="OverlayTrigger">
    • <form id="QuickReply">

    It is vital that these JavaScript-identifying classes and IDs remain unchanged, as modifying them will almost certainly cause functionality to be altered or broken.