Templating Manual For PROG Templates

Here are some template rules to follow for Koha 3.0 : The goal is to have a prog template directory, that :

• is as simple as possible to help template designers creating their own set of templates
• is XHTML valid
• can be configured through css

Some rules :

• template always begins by

    <!-- TMPL_INCLUDE NAME="doc-head-open.inc" -->Koha -- TITLE<!-- TMPL_INCLUDE NAME="doc-head-close.inc" -->
    <!-- TMPL_INCLUDE NAME="menus.inc" -->
    <!-- TMPL_INCLUDE NAME="menu-MODULE.inc" --> where MODULE is one of the Koha modules (catalogue, acquisition, ...)

• template always end by :

    <!-- TMPL_INCLUDE NAME="intranet-bottom.inc" -->

• use <div id=“TEMPLATENAME_what_this_bloc_is_done_for”> </div> for each logical bloc. For example, if a page contains a bloc for borrower informations, one for borrower debts, one for borrower reserves, it's a good idea to have 3 different blocs. (Usually a bloc begins by a <h2> header ?)
• all action buttons inside a bloc are in a <div id=“action”> </div>, and placed AFTER the blocs. We should avoid having more than 1 action div.
• use h1 for page main title
• use h2 for bloc level title
• write forms with : <p><label>text</label><input type=”…”></p>, NOT with <table>
• use <table> as few as possible (and only where tables are useful)
• don't use <caption> at the beginning of tables, at least not for table title. As most blocs are not table, the caption does not exist everywhere. Use h2 instead
• filtering a list : on pages that show a list that can be filtered, the filter is put in the result table, after the <th> line. A <filter> button on the last column submit the form. Here is an exemple of a filtered list in a table:

<form action="" method="post">
  <table>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>country</th>
      <th>information</th>
      <th>actions</th>
    </tr>
 
    <tr class="filter">
      <td><input type="text" name="id" /></td>
      <td><input type="text" name="name" /></td>
      <td>
        <select name="country">
          <option value="1">France</option>
          <option value="2">New Zealand</option>
          <option value="3">USA</option>
        </select>
      </td>
      <td></td>
      <td><input type="submit" name="filter" value="Filter" /></td>
    </tr>
 
    <tr>
      <td>23</td>
      <td>Paul</td>
      <td>France</td>
      <td>tall guy</td>
      <td>
        <a href="">edit</a>
        <a href="">delete</a>
      </td>
    </tr>
 
    <tr>
      <td>12</td>
      <td>Chris</td>
      <td>New Zealand</td>
      <td>love kiwis</td>
      <td>
        <a href="">edit</a>
        <a href="">delete</a>
      </td>
    </tr>
 
 
    <tr>
      <td>45</td>
      <td>Joshua</td>
      <td>USA</td>
      <td>linguistics</td>
      <td>
        <a href="">edit</a>
        <a href="">delete</a>
      </td>
    </tr>
 
  </table>
</form>

(this chapter to be refined, as head/3.0 template system is not completly ready)

1. Go to the prog templates and search for /includes/ directory
2. copy the content of the directory wherever you want on your disk
3. go to Koha » Parameters » SystemPreferences » includespath » modify » enter the complete path of your new local /includes/ directory
4. You can now modify it's content, it will be reflected in Koha

You can modify menus content (general menu & each module menu), the look of all your templates (through the css).