Templates - Getting Started
Where do you get the templates?
Starting with TNG 7.0 full install, the template files are unzipped in the templates subfolder. So if you go to the location where you unzipped the TNG files, the templates can be found in the templates/templateN folder, where N represents the template number from 1 through 14.
See Templates - Getting Started - Prior to TNG 8.1 for versions prior to TNG v8.1
How do you determine what template you want to use?
The easiest way is to take a look at
- the TNG Template Preview and
- the TNG demo site and try the page displays under the different templates
Items you should look at
- the Home page (index.php) which you will need to modify using Template Settings. When you first access the demo public site, select 1 through 14 and plain, which is the default TNG template to view the various data items in each template's home page
- the individual pages created by TNG can be accessed by selecting a menu entry from the Home page
Decisions you should make
- whether you want a left nav area menu as provided by templates 4 and 7
- whether you only want the pull down menu
How do you setup your site to use a template?
TNG V8.1 introduced the capability to select a template to be used in the Admin >> Setup >> Template Settings which was provided with TNG V8.
If you change the Enable Template Selection: from No to Yes, TNG V8.1 and above will use the files from the templates/templateN folders where the template used is indicated by the Template Number: selected.
If you use template selection (in 8.1.0) and you choose one of the 8 templates, then TNG will use both the index.php in your TNG root path or main index.php file, which was provided in the special folder in the upgrade, *and* the index.php from your chosen template folder. Any call to your home page (index.php) will first load the index.php file that is in the main TNG folder. This script will "exit" and then load the index.php file for your template if it detects that a template has been chosen, and you have enabled Template Switching. |
Note that in TNG V8.1 and above if you leave the Enable Template Selection set to No and the Template Number blank, then TNG continues to use the template files from the TNG root folder, whether that be a template you copied from the templates folder, the default TNG template, or one you created yourself. |
According to Darrin's TNG 8.1.0 announcement email, you should also be able to still use the Template Number to configure your existing conditions. However, this requires that you previously copied the template files to the TNG root folder, and may require that you update the index.php according to the upgrade readmexxx-810.html instructions. Note that I have not tested this approach. --Ken Roy 13:24, 5 January 2011 (UTC)
This is true as this is how my site was configured to use the template configuration for template 4 without switching. I am currently working on the files to be able to use template switching with current version. - Russ Strong 4 Feb 2011
See the Templates - Upgrading TNG 8.1 for additional information on how to upgrade.
How do you change your Home page?
In TNG V8.1 and above you can use the new Template Settings capability to update parameters, image names, and text on your Home page.
See the Template Settings for instructions on using the new TNG V8 Setup >> Configuration >> Template Settings capability.
How do you change the colors used?
- Use the FireFox browser with the Web Developer extension installed to determine the CSS class controlling the area where you want to change the color
- Open the genstyle.css or templatestyle.css
- Copy the definition you want to change
- Paste the copied text in mytngstyle.css
- change the values you want to override and delete all parameters you are not overriding
See Templates - Overriding for examples of overriding some of the template style definitions
How do you change the photos and banners used?
Using a photo editor, such as IrfanView, you can look at the pixel dimensions of the original template photos by selecting Image, Resize and make note of the dimensions of the photo image you want to replace in your template.
Then you can resize (or crop) the photo you want to use to the same dimensions.
Note that if you use a different sized image, you will have to make adjustments to the template source file and may have to also make adjustment to the template formatting.
For detail instructions to make changes to your Home Page, see Template Settings on using the new TNG V8 capability
How do you change the banners used?
Some of the templates use an image for the banner title, but with TNG 7.0 all templates offer an optional text replacement for the graphic image title.
- You can use a photo editing tool like Adobe Photoshop Elements or Microsoft Paint to create a new graphic image title.
- You can use the optional text string and edit it to match your site.
See the information below on what file to change or on how to change the optional text string for each template.
How do you change the tab colors?
Some TNG pages have a series of tabs across the top. You can choose from two different tab styles
- square provided by tngtabs2.css
- slanted provided by tngtabs1.css
as specified in Admin >> Setup >> General Setting >> Site Design >> Tabs Style Sheet
change colors to match
You will want to make your
active tab match the fieldnameback definition
inactive tab match the databack definition
from genstyle.css or the templatestyle.css for the template you have selected.
- If you choose the square style, you can change the colors of these tabs in the tngtabs2.css file.
- If you choose the slanted tab style, you can change the attributes in tngtabs1.css, but the colors are made from image files.
creating new tab images
To create new tab images in a different color, make sure your photos folder has been made writeable, then go to the page switchcolor.php in your browser, for example http://www.yoursite.com/genealogy/switchcolor.php.
The tab images can also be changed by using the readme.html file that you used for the initial full install of TNG, where if you are using the readme.html from your web site in your browser URL, you can then click here: switchcolor.php in the Customizing Your TNG Pages section of the readme.html full install.
Make sure you backup your existing tngtabs.png (inactive tab) and tngtabsactive.png (active tab) files before replacing them with new ones.
You can Display the new tabs to see if you like the color chosen before you decide to save them.
Related links
- TNG Template Preview
- Darrin's demo site can be used to initial determine which template you want to use
- Templates - Getting Started
- Templates - Getting Started - Prior to TNG 8.1 for older versions of TNG
- Templates - Explained
- Templates - Overriding
- Templates - Add new style
- Setup - Site Design