Page Templates          
  
   
 


OpenForum comes with a number of predefined templates that can be found from the /OpenForum/Styles page. The following notes are for those wishing to make changes to templates or create new ones.

There are three different template files that can be applied to an OpenForum page.

  • header.html.template - Contains HTML defining the top of the page
  • footer.html.template - Contains HTML defining the bottom of the page
  • edit-form.html.template - Contains HTML defining the page's edit form

The pages content in sandwiched between the header and footer templates as is the edit-form template, when the page is displayed in edit mode.


OpenForum/Page holds the default header and footer. You can define headers and footers on any page. Alternatively you can link to a template somewhere else.

Within a page template, some standard OpenForum information can be inserted. These are inserted by placing tags in the template. A tag begins with an ampersand & and is terminated with a semicolon ;. So to insert the authors name into a template you would insert the tag &author;. The list of standard page tags is as follows:


Standard Page Tags

  • pageName
  • title
  • author
  • referringPages
  • attachments
  • tags
  • author
  • time
  • insert:(Wiki page)


The insert tag is a special case. It is followed by a reference to a WikiPage. When a page is updated the reference page's contents is pasted in.


Case Study - Vanilla Top (From the Classical Style Set)

We are going to dissect the page template for Vanilla Top as an example of how to create a page template. You will need to know a bit of HTML. You can view the finished result here


page-header-vanilla.html.template First the head of the page is defined, inserting the title and author. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>&title;</TITLE> <META NAME="Generator" CONTENT="OpenForum"> <META NAME="Author" CONTENT="&author;"> The CSS style sheet is defined. In this case the page-vanilla.css references all other style sheets required. <style type="text/css" media="all">@import url("/OpenForum/Styles/Classical/page-vanilla.css");</style> Now the standard Javascript used in the page is imported. Note the pageName tag being used to pick up the page specific Javascript. <script type="text/javascript" src="/OpenForum/Javascript/init.js"></script> <script type="text/javascript" src="/&pageName;/page.js"></script> <script> includeLibrary("/OpenForum/Javascript/author.js"); includeLibrary("/OpenForum/Javascript/ui.js"); </script> </HEAD> Next is the pages body. The onload attribute is set to call the generic init Javascript function. This, in turn, calls all other initialise functions that have been defined. <BODY onload="init();"> <br> <center> <table class="top"> The bosy of the template includes the pages title using the title tag and the top menu using an insert tag that takes the content from the page /OpenForum/TopMenu <tr><td colspan="2" class="toolbar"> <table class="top"> <tr><td class="logo" rowspan="2"><img border="0" alt="Vanilla Wiki" title="Vanilla Wiki" src="/OpenForum/Styles/Classical/Images/vanilla-small.png"></td><td class="title">&title;</td></tr> <tr><td class="toolBar" >&insert:/OpenForum/TopMenu;</td></tr> </table> </td></tr> <tr><td colspan="2"> </td></tr> <tr><td class="topMenu"> The left of the page is to display a site menu. Again an insert tag is used, this time inserting the content from the page /OpenForum/LeftMenu <table class="topMenu"> <tr><td class="boxTopLeft"> </td><td class="boxTop"> </td><td class="boxTopRight"> </td></tr> <tr><td class="boxLeft"> </td><td class="boxMiddle"> &insert:/OpenForum/LeftMenu; </td><td class="boxRight"> </td></tr> <tr><td class="boxBottomLeft"> </td><td class="boxBottom"> </td><td class="boxBottomRight"> </td></tr> <tr><td align="right" colspan="3"><a href="http://www.onestonesoup.org/ProjectOpenForum"><img src="/OpenForum/Images/powered-by.png" border="0"></a></td></tr> </table> </td> <td class="top"> Finally the top of the content box is defined. This consists of three images, top left, top and top right. The images are defined in the CSS style sheet for the page and referenced as styles on the table cell elements. <table class="top"> <tr><td class="boxTopLeft"> </td><td class="boxTop"> </td><td class="boxTopRight"> </td></tr> As the page's content is sandwiched between the header and footer templates, the content box's left and middle cells are defined in the header, with the middle cell being closed in the footer and the right cell also defined in the footer. <tr><td class="boxLeft"> </td><td class="boxMiddle">
page-footer.html.template The footer starts by appending an author and modified time to the bottom of the page content. <table><tr><td class="author">by &author; &time;</td></tr></table> <br/><br/><br/> Then the attachments are inserted by tag and the attach form defined <table class="edit" width="100%"> <tr> <td> <form name="attach" method="post" action="/OpenForum/Actions/Attach?page=&pageName;" enctype="multipart/form-data"> &attachments; <input type="file" name="file"> <input type="submit" value="Attach file" onClick="showMessage('Saving Attachment','Please wait...');"/> </form> </tr> </table> Finally the page content box is closed and the OpenForum Branding applied. </td><td class="boxRight"> </td></tr> <tr><td class="boxBottomLeft"> </td><td class="boxBottom"> </td><td class="boxBottomRight"> </td></tr> <tr><td align="right" colspan="3"><a href="http://www.onestonesoup.org/ProjectOpenForum"><img src="/OpenForum/Images/powered-by.png" border="0"></a></td></tr> </table> </td></tr> <table> </center> The following layers are defined for use by system messages that are displayed to the user. <DIV id="screened" style="position: absolute; top: 0; left: 0; display: none;"><img id="screenedImg" src="/OpenForum/Images/area.png" class="nodeImg"/></DIV> <DIV id="modal" style="position: absolute; top: 0; left: 0; display: none; border: 1px solid; background: #FFFFFF;"></DIV> <DIV id="footer"></DIV> </BODY> </HTML>
by Admin on 21/04/2008 at 10:09 PM