Customizing the Core Template

Page Sections

All Tripal modules manage their own theme files for the Drupal nodes they create.  However, the Tripal Core module provides a generic set of theming files for all other modules. The screenshot below from the Tripal 2.x Demo site shows an example of the layout provided by the Tripal Core module.   The Tripal 2.x demo site uses the Garland theme, and this theme controls the layout of each page, the colors and the style for elements on the page.   Garland provides a left-hand sidebar that can contain blocks of content (including custom blocks, menus, etc.).  The lighter colored middle section contains the page contents.  This content section is where Tripal adds content derived from the Chado database.  The Tripal core module divides the content section into two subsections: a table of contents and the data section. 

Before the page is finally constructed, the Tripal Core module inspects all of the content that has been added to the page by all Tripal modules (and others as well) and constructs the Table of Contents (TOC) section.  After the page is constructed JavaScript is employed to hide all content except the first item in the table of contents.  As site visitors click the items in the TOC, JavaScript is employed to toggle the visibility of each content section.

Core Module's Theme Directories

The Tripal Core module's theme directory is organized the same as all other Tripal modules.  The tree of the Tripal Core theme directory is as follows:

├── css
│   └── tripal.css
├── images
│   └── TripalLogo-sm.png
├── js
│   └── tripal.js
└── templates
    └── node--chado-generic.tpl.php

The template file named "node--chado-generic.tpl.php" is responsible for the two-column layout as well as the JavaScript described previously for toggling the visibility of the content sections.

Customizing the Core Theme

It is possible to change or override completely the look-and-feel provided by the Tripal Core Theme.  To make changes, first copy the node--chado-generic.tpl.php template from the Tripal Core Module directory into the directory of your default theme.   You can leave the original template in the Tripal Core Module and Drupal will preferentially use the file in the theme directory. 

Use PHP, JavaScript and CSS as desired within the node--chado-generic.tpl.php file to customize the look and feel you desire.  The following important variables are available to the template file:

Variable Description
$content A PHP associative array containing the various content sections that should be displayed on the page.  Use the PHP function 'render' to convert this variable to HTML after any last minute customizations are made:  render($content);
$content['tripal_toc']['#markup'] Within the $content variable is the pre-constructed Table of Contents.  The HTML representation for the TOC  is in the '#markup' element.
.tripal-data-block The CSS selector assigned to each of the content sections
.tripal_toc_list_item_link The CSS selector assigned to each of the links in the TOC
#[id]-tripal-data-block The CSS selector id assigned to each block of content.  The "id" is a unqiue name for each content block.  Each element in the TOC has this same id. Thus the id of the TOC element can be used to construct the name of the data block that it corresponds to.

To retrieve the list of all PHP variables available within the template place the following code somewhere in the node--chado-generic.tpl.php file (requires the Devel module is installed):