Templates - Explained
The TNG install folder contains the default TNG template, shown as the Plain template on the demo site.
TNG provides several templates that can be used to customize the look and feel of your TNG site. In order to choose a template, take a look at Darrin's demo site and try the pages with the various templates (1 through 14) and then decide which one you want to use.
- TNG 12 supports 1 through 18
- TNG 11 supports 1 through 15
- TNG 10 supports 1 through 14
- TNG 9 supported 1 through 11
- TNG 8 supported 1 through 8
- TNG 7 supported 1 through 8
- TNG 6 supported 1 through 6
| TNG version: | ≥ 8.1 |
TNG 8.0 added a Template Settings capability in the Admin >> Setup where you can specify the template to be used. The index.php file in the TNG root folder provides the switching capability for the template you select in the Admin >> Setup >> Template Settings.
See the Template Settings article for additional details.
| TNG version: | ≤ 8.1 |
See Templates - Explained - Prior to TNG 8.1 for previous versions of TNG
genstyle.css
The genstyle.css defines the standard TNG styles used. If necessary, the templatestyle.css in each specific template provides the specific overrides to the style for the look and feel of that template.
meta.php
The meta.php is included in each page by the tng_header function based on the file being specified in Setup >> Configuration >> General Settings >> Site Design and Specification Custom Meta. It provides the standard TNG meta parameters used. You can add your own <meta> statements to this file. The meta.php provides the $cms[tngpath] for the CSS style sheets so that it works correctly for histories added using the historiestemplate.php
templatestyle.css
The templatestyle.css, which was added in TNG 7.0.0, contains the overrides to the TNG styles defined in the genstyle.css for the specific template and replaces the version of the genstyle.css previously included in the template folder.
The templatestyle.css is also be used to override the tngtabs1.css or tngtabs2.css file for the template.
mytngstyle.css
The mytngstyle.css file in the template folder is designed to provide your overrides to the TNG genstyle.css and the template style sheets -- templatestyle.css, tngtabs1.css or tngtabs2.css files for that template.
If you want to make changes to the TNG styles, the templatestyle.css defined styles, or add your own styles, you should make the overrides or additions in your template mytngstyle.css so that your style changes will not be lost in a future release or upgrade of TNG.
Templates - Overriding provides an example of how to override the styles.
Templates - Add new style provides an example of how to add a style.
The topmenu.php file is included in each page by the tng_header function based on the file being specified in Setup >> Configuration >> General Settings >> Site Design and Specification Custom Header. It provides the banner or top section of each TNG page and for some templates provides the left navigation area menu. The topmenu.php contains the <body> statement but not the end of body </body> statement. So care must be taken when editing this file that your editor does not try to correct the syntax, as normally would happen with editors like FrontPage.
The footer.php file is included in each page by the tng_footer function based on the file being specified in Setup >> Configuration >> General Settings >> Site Design and Specification Custom Footer. It provides the footer of each TNG page.
In TNG v10, the content of the footer was moved to the basicfooter function in genlib.php.
index.php
Each template provides an index.php that can be customized as the home page for your site using the Admin > Setup > Template Settings.
If you make other changes you need to use the index.php from the template folder that matches the look and feel you have chosen for your site and should track your changes, preferable with a Mod Manager .cfg file.
Related links
- Darrin's demo site can be used to initial determine which template you want to use
- How TNG builds a page describes how the different components are used to create the dynamic TNG pages
- Templates - Getting Started
- Templates - Overriding
- Templates - Add new style
- Setup - Site Design
