TEITOK Help Pages

Customizing your design

TEITOK comes standardly with a very minimal design, and the idea is that you adept that design to your project or institute, to have your corpus have its own look and feel, or look like a part of the infrastructure of your institute or university. For the design, TEITOK uses a Smarty template, which can either be placed in your project (to make it project specific) or in the shared folder to use the template for all corpora on your server (unless they have a local template). An ideal set-up of a Smarty template for TEITOK contains the following elements:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="/Scripts/teitok.css" media="screen">
  <link rel="stylesheet" type="text/css" href="Resources/htmlstyles.css" media="screen">
  <link rel="stylesheet" type="text/css" href="Resources/xmlstyles.css" media="screen">
  <title>{$title}</title>
</head>
<body>

<div id='title'>{$title}</div>
<div id='menu'>{$menu}</div>
<div id='content'>{$maintext}</div>{$maintext}</div>

</body>
</html>

The three variable title, menu, and maintext will be filled in by TEITOK with the title, the navigation menu and the main content respectively. On top of those basic elements more headers and footers can be

The teitok.css file (located in the Javascripts folder of the TEITOK installation) is used to define some necessary TEITOK definitions, and should always be included since new elements can be added for new functionalities in TEITOK. The separation between two style files is done with the idea that the web-site designer takes care of the first, while the second (which is used for the display of the TEI/XML files) is done by the linguist himself since it involves linguistically motivated choices.

Tips

The current page in the navigation menu has a class selected, so can be style using #menu li.selected
If there is a common header/footer file for the university/institute that is kept up-to-date, it can be included with a {fetch file='filename'}

Back to index