Main Menu

Powered by TEITOK
© Maarten Janssen, 2014-

TEITOK Help Pages

Customizing your Design

TEITOK is meant as a tool, not as a website. Therefore, TEITOK allows you to customize the design of your corpus site in various ways, to make it look like a part of your university or your project. In principle, every project in TEITOK is fully contained in a folder. But for a research institute with multiple corpora that should all look the same, it is in principle more recommendable to create a central folder for all te design files, and use those in all of the corpora.

Smarty Template

The majority of the customization is done by chaning the template. TEITOK uses the Smarty template engine to display the site content, and the main template is called templates/main.tpl. A template is little more than an HTML page with the actual content replace by variables. A variable has the form {$var} in Smarty, and there are three main variables used in TEITOK:

  • {$title} will display the project title, typically used in the header, in <title>{$title}</title>
  • {$menu} will display the navigation menu, which has a vertical design, so should ideally be in a (fixed) element on the left of the page
  • {$maintext} will display the main content, and should be in a div occupying the majority of the page.

Where the variables end up on the page is determined in the normal HTML fashion, typically by CSS, either inline or in a CSS file. So the following will display the menu in a fixed 150 pixel wide element on the left-hand side of the screen:

    <div style="position: fixed; left: 0px; top: 0px; height: 100%; width: 150px;">{$menu}</div>

The easiest way to get a Smarty template with the style of your university or project is to find a page that has the right layout, save that page, and then replace the menu, title, and main text by Smarty variables. This will give you a page in the right style with all the logos that will display the TEITOK content. Since most sites use very complex designs these days, you most likely will have to modify thing that do not display appropriately afterwards.

The template has to be inside the project folder due to the design of Smarty. So if the template is to be used for multiple projects/corpora, you need to make the templates folder in the project a (symbolic) link to the templates folder in the central design folder.

Style sheets

A lot of the design in TEITOK is done by Cascading Stylesheets (CSS), just like in any other website. But there are several things to take into account in the set-up of the CSS files. The standard set-up of TEITOK uses three different CSS files: teitok.css, htmlstyles.css, and xmlstyles.css. The teitok.css is a common file from the TEITOK project that contains default styles for various modules, such as the highlight bar. It is a file that is located in the Javascript folder of the TEITOK project, so should be loaded from whereever the Javascript files are loaded from. Since they are default styles, it should be the first CSS file to load, so that custom modifications to the styles in teitok.css will override the default style.

The htmlstyles.css is the normal style file for the design of the overall site, and can be replaced by a set of style files depending on the design of the site you are using. By default, the htmlstyles.css is placed in the Resources folder to make it easy to modify from with the environment.

The xmlstyles.css is for the display of the content of the actual TEI/XML files. TEI/XML files in TEITOK are not converted to HTML as they often are (for instance by XSLT style sheets), but are rather directly loaded into the HTML, and then styled using CSS. The xmlstyles.css contains the definitions for that display, and for instance defines the <hi> elements depending on their @rend attribute. It also redefines HTML elements, such as the fact that <s> in TEI is a sentence, and not a strikethrough element, so it removes the strikethrought on that element. Any TEI/XML is always embedded in an HTML element called mtxt, so #mtxt s will only redefine the <s> for the TEI/XML part, and keep it as striketrough in the rest of the page.

To modify the styling of the TEI/XML, the recommended practice is to start from the default xmlstyles.css file. Using the pseudo-elements :before and :after it is also possible to include text in the display, and have for instance deleted elements placed between square brackets. For intance, for transcribed audio files, the default style places the @who element in front of each utterance (each <u> inside the #mtxt element) that has a @who, with a hyphen after the speaker ID, and in dark blue:

    #mtxt u[who]:before { content: attr(who) ' - '; color: #000077; }

Back to index