TemplatesAndStyles

Templates and styles

All JForum templates are stored in the directory templates, where each sub-directory is a template name, being the default template name callled default. (Note that it is not possible to use a different template directory than default.) There you will find all HTML files, as well Javascripts, images and CSS files.

The table below describes the main templates:

Filename	Description
header.htm	header for all other templates
bottom.htm	footer contents for all other templates
forum_list.htm	the list of all forums, essentially the board start page
forum_show.htm	the home page of one partricular forum
post_show.htm	the topic view containing all posts
forum_login.htm	the login page
user_new.htm	the user registration form
pm_list.htm	PM inbox and outbox
post_form.htm	the page for writing and editing a post
search.htm	the search form
search_result.htm	the search results
user_profile.htm	shows a user's profile
bookmark_list.htm	lists all bookmarks and watches
recent_thread.htm	the Recent Topcis page
hot_thread.htm	the Hot Topics page
top_list.htm	the list of the top downloads

Note that there are lot more of templates, many of them being referenced by other templates - 'so-called 'includes''. Templates used specifically by the mobile view are in a subdirectory called mobile, and templates used only for administrative screens are in the subdirectory admin.

The template engine

JForum uses FreeMarker as template engine. This means that you don't need to use any Java / JSP code to create the layouts for JForum. It is interesting to take a good look at the FreeMarker manual to learn more about it. In the following section you will find a brief overview of the most common used directives, which should be a good start for starters.

A Freemarker directive starts with ''<#'', and all variables are enclosed by ${}. Inside a directive, you don't use ${} - for example, to output a varialbe value, you write ''${variableName}'', but if you want to use ''variableName'' in an ''<#if>'' statement, you simply do '<#if variableName == "someValue">'.

Assign a variable: To create / change a variable in Freemarker, use the ''<#assign>'' directive:

<#assign name = "My name"/>
<#assign lastName = "Last name"/>
<#assign fullName = name + lastName/>

Conditionals: Conditionals in Freemarker are ''<#if>'', ''<#elseif>'' and ended by ''<#/if>''. You always have to end an ''<#if>'' statement with one '''' statement.

<#if someConditional>
    code code
<#elseif anotherConditional>
    code code code
<#else>
    more code
</#if>

Loops: You use the ''<#list>'' directive to iterate over any kind of collection - Lists or arrays.

<#list collectionName as variableName>
    ${variableName.someProperty}
</#list>

where ''collectionName'' is any kind of array of java.util.Collection, and ''variableName'' is the local variable you will use inside the block.

Calling properties and methods: To call any property or method, just use the dot notation.

${aObject.aProperty}
${aObject.someMethod()}
${aObject.anotherMethod("arg1", 2, "arg3", someFreemarkerVariable)}
<#assign result = someObject.myMethod()/>