The first kind of template employed by XenForo is written using HTML 5.
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.
The contents of the xen:title tag will be used as the title for the page within the <head> element.
||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>.|
||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.|
||Instructs the system to add the 'style.css' template to the CSS output for the current page.|
||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.|
||The date specified by the unix timestamp in the $datetime variable will be output as a relative timestamp.|
||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.
- <div id="myDivElement">
- <span class="spanWithCssClass">
- <input class="textCtrl" />
- <form class="AutoValidator">
- <a class="OverlayTrigger">
- <form id="QuickReply">