Templates - Getting Started
From TNG Wiki
TNG Templates - Getting Started
Where do you get the templates for TNG?
in TNG 7.0 on a full install
In TNG 7.0 full install, the template files are unzipped in the templates subfolder. So if you unzipped the files directly into a WampServer environment for example to a genealogy folder, the templates can be found in the genealogy/templates/templateN folder, where N represents the template number from 1 through 7.
in all TNG versions
In all TNG versions, the templates are available as downloads in the Pre-built Templates section of the TNG download page which shows a preview of the Home page and an Individual page for each of the 7 templates available with TNG (6 templates only in previous version)
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 to include your own text is displayed when you first access the demo public site, so select 1 through 7 and plain, which is the default TNG template to view the various data items in each template's home page
- the individual pages displays 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?
You have to copy all the files from the unzipped template folder to your TNG install folder.
Backup default template files
First backup the following TNG default template files:
- topmenu.php,
- footer.php,
- index.php,
- templatestyle.css
by renaming the files or copying them to another location
Copy template files
Then copy all the files from the template folder for the template you selected.
For example, if you chose template 3, then copy all the files from the unzipped genealogy/templates/template3 folder and paste them in your TNG install folder.
You must overlay the existing files, which is why you should create a backup first.
How do you change your Home page?
- Care should be exercised if you use FrontPage or Dreamweaver to use those two products as ASCII editors only and not allow them to fix what it perceives as errors
- Replace the Lorem ipsum dolor sit amet... text on the index.php (used in the Home pages of template 4, 5, and 7)
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 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.
Photos in Home Page
Template 1
|
|
<img src="<?php echo $cms['tngpath']; ?>home-photo.jpg" alt="" width="200" height="150" border="0" align="left"/> |
|
<img src="<?php echo $cms['tngpath']; ?>home-title.gif" alt="" width="395" height="159" hspace="10" border="0" /> |
Optionally, you can comment out line 21 of template 1 index.php
<!-- <img src="<?php echo $cms['tngpath']; ?>home-title.gif" alt="" width="395" height="159" hspace="10" border="0" /> -->
and remove the start comments ( <!-- ) on line 29 and end comments ( --> ) on line 35, and change the Our Family<br />History text on line 32 to your own personal text rather than creating a text image.
This option also allows you to use a $text['ourhist'] variable by changing line 32 to use
<?php echo "$text['ourhist'] \n"; ?>
which will echo the $text variable from the language text.php files so your home page title changes with a dynamic language switch.
The English/text.php has
$text['ourhist'] = "Our Family History";
and in the French/text.php
$text['ourhist'] = "L'histoire de notre famille";
which you can override in your cust_text.php file to use a different text value.
Template 2
|
|
<img src="<?php echo $cms['tngpath']; ?>homeheader.gif" alt="" width="443" height="114" class="noimgborder" /> |
|
|
<img src="<?php echo $cms['tngpath']; ?>mainphoto.jpg" alt="" width="327" height="460" class="noimgborder" /> |
Optionally, you can comment out line 41 of template 2 index.php
<!-- <img src="<?php echo $cms['tngpath']; ?>homeheader.gif" alt="" width="443" height="114" class="noimgborder" /> -->
and remove the start comments ( <!-- ) on line 46 and end comments ( --> ) on line 54, and change the Our Family<br />Genealogy Pages on line 50 to your own personal text rather than creating a text image.
This option also allows you to use the $text['ourpages'] variable by changing line 50 to use <?php echo "$text['ourpages'] \n"; ?> which will echo the $text variable from your language text.php files so your home page title changes with a dynamic language switch.
The English/text.php has
$text['ourpages'] = "Our Family Genealogy Pages";
and the French/text.php
$text['ourpages'] = "La généalogie de notre famille";
which you can also override to use a different text value in your language cust_text.php
Template 3
|
|
<img src="<?php echo "$cms[tngpath]"; ?>title.gif" alt="" class="titleimg" width="630" height="93" /> |
|
|
<img src="<?php echo $cms['tngpath']; ?>mainphoto.jpg" alt="" width="327" height="460" class="noimgborder" /> |
Optionally, you can comment out line 20 of template 3 index.php
<!-- <img src="<?php echo "$cms[tngpath]"; ?>title.gif" alt="" class="titleimg" width="630" height="93" /> -->
and remove the start comments ( <!-- ) on line 25 and end comments ( --> ) on line 33, and change the Our Family History on line 29 to your own personal text rather than creating a text image.
This option also allows you to use a $text variable by changing line 29 to use <?php echo "$text[myheader] \n"; ?> which will echo the $text variable from your language cust_text.php files so your home page title changes with a dynamic language switch.
Template 4
|
|
<a href="searchform.php"><img src="<?php echo $cms['tngpath']; ?>search4.gif" alt="<?php echo $text['mnusearchfornames']; ?>" class="searchimg" /></a> |
|
|
<img src="<?php echo $cms['tngpath']; ?>smallphoto.jpg" alt="" class="smallphoto" width="71" height="100" /> |
|
|
<img src="<?php echo $cms['tngpath']; ?>title.gif" alt="<?php echo $text['ourpages']; ?>" class="banner" width="468" height="100" /> |
|
|
<img src="<?php echo $cms['tngpath']; ?>bigphoto.jpg" alt="" class="bigphoto" width="300" height="172" /><br /> |
Template 5
|
|
<img src="<?php echo $cms['tngpath']; ?>mediumphoto.jpg" alt="" class="indexphoto" width="160" height="121" /><br /><br /> |
Title is in text format, so you need to change the text line 37 in template 5 index.php
Our Family History and Ancestry
Optionally you can use a $text variable by changing line 37 to use <?php echo "$text[template5title] \n"; ?> with the variables saved in your language cust_text.php files so your page title changes with a dynamic language switch. For example, you could have in your English/cust_text.php
$text[template5title] = "Our Family History and Ancestry";
and in your French/cust_text.php
$text[template5title] = "L'histoire de notre famille et nos ancêtres";
Depending on the length of your text string, you may need to increase the width of the banner class, for example
.banner {
width: 750px; /* was 585px; */
}
Photos in topmenu banner
The following photos or images are used in the TNG provided templates.
Template 1
|
|
<a href="index.php"><img src="header-title.gif" alt="" width="620" height="72" border="0" /></a> |
|
|
|
Template 2
|
|
<img src="<?php echo $cms['tngpath']; ?>headerphoto.jpg" alt="" class="headerimg" width="70" height="99" /> |
|
|
<img src="<?php echo $cms['tngpath']; ?>headertitle.gif" alt="<?php echo $text['ourpages']; ?>" width="312" height="78" class="noimgborder" /> |
Template 3
|
|
<img src="<?php echo $cms['tngpath']; ?>headerphoto.jpg" alt="" class="headerphoto" width="186" height="110" /> |
|
|
<img src="<?php echo $cms['tngpath']; ?>headertitle.gif" alt="" class="menutitle" /> |
Template 4
|
|
<a href="searchform.php"><img src="<?php echo $cms['tngpath']; ?>search4.gif" alt="<?php echo $text['mnusearchfornames']; ?>" class="searchimg" /></a> |
|
|
<td><img src="<?php echo $cms['tngpath']; ?>smallphoto.jpg" alt="" class="smallphoto" width="71" height="100" /></td> |
|
|
<img src="<?php echo $cms['tngpath']; ?>title.gif" alt="<?php echo $text['ourpages']; ?>" class="banner" width="468" height="100" /> |
Template 5
|
|
<img src="<?php echo $cms['tngpath']; ?>smallphoto.jpg" alt="" class="smallphoto" width="100px" height="76" /></td> |
Title is in text format, so you need to change the text line 24 in template 5 topmenu.php
Our Family History and Ancestry
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.
Template 1
You can create your own graphic text image to be used instead of the header-title.gif.
Or you can comment out line 2 of template 1 topmenu.php
<!-- <a href="index.php"><img src="<?php echo $cms['tngpath']; ?>header-title.gif" alt="" width="620" height="72" border="0" /></a> -->
and remove the start comments ( <!-- ) on line 9 and end comments (--> ) on line 19, and change the Our Family History on line 14 to your own personal text rather than creating a text image.
Optionally you could also use a $text variable <?php echo "$text[ourhist] \n"; ?> which is defined in the language text file
English/text.php
$text['ourhist'] = "Our Family History";
and French/text.php
$text['ourhist'] = "Histoire de notre famille";
which you can override to use a different text value in your language cust_text.php file
Template 2
You can create your own graphic text image to be used instead of the headertitle.gif
Or you can comment out line 18 of template 2 topmenu.php
<!-- <img src="<?php echo $cms['tngpath']; ?>headertitle.gif" alt="<?php echo $text['ourpages']; ?>" width="312" height="78" class="noimgborder" /> -->
and remove the start comments ( <!-- ) on line 23 and end comments ( --> ) on line 29, and change the Our Family<br />Genealogy Pages on line 26 to your own personal text rather than creating a text image.
This option also allows you to use the <?php echo "$text['ourpages'] \n"; ?> variable in language text.php files so your home page title changes with a dynamic language switch.
You can then override the text value for $text['ourpages'] in your language cust_text.php
Template 3
You can create your own graphic text image to be used instead of the headertitle.gif
Or you can comment out line 12 of template 3 topmenu.php
<!-- <img src="<?php echo $cms['tngpath']; ?>headertitle.gif" alt="" class="menutitle" /> -->
and remove the start comments ( <!-- ) on line 17 and end comments ( --> ) on line 23, and change the Our Family History on line 20 to your own personal text rather than creating a text image.
Optionally you could also use the $text['ourhist'] variable <?php echo "$text['ourhist'] \n"; ?> using the variable saved in your language text.php files so your page title changes with a dynamic language switch. The English/text.php has
$text['ourhist'] = "Our Family History";
and the French/text.php
$text['ourhist'] = "L'histoire de notre famille";
You can also override the text value in your language cust_text.php
Template 4
You can create your own graphic text image to be used instead of the title.gif
Or you can comment out line 70 of template 4 topmenu.php
<!-- <img src="<?php echo $cms['tngpath']; ?>title.gif" alt="<?php echo $text['ourpages']; ?>" class="banner" width="468" height="100" /> -->
and remove the start comments ( <!-- ) on line 75 and end comments ( --> ) on line 82, and change the Our Family on line 78 and change the Genealogy Pages on line 79 to your own personal text rather than creating a text image.
Optionally you could also use a $text variable in line 78 <?php echo "$text[myfamily] \n"; ?> and in line 79 <?php echo "$text[mygenealogypages] \n"; ?> with the variables saved in your language cust_text.php files so your page title changes with a dynamic language switch. For example, you could have in your English/cust_text.php
$text[myfamily] = "Our Family"; $text[mygenealogypages] = "Genealogy Pages";
and in your French/cust_text.php
$text[myfamily] = "Notre famille"; $text[mygenealogypages] = "Pages de généalogie";
Template 5
Title is in text format, so you need to change the text line 37 in template 5 index.php
Our Family History and Ancestry
Optionally you can use a $text variable by changing line 37 to use <?php echo "$text[template5title] \n"; ?> with the variables saved in your language cust_text.php files so your page title changes with a dynamic language switch. For example, you could have in your English/cust_text.php
$text[template5title] = "Our Family History and Ancestry";
and in your French/cust_text.php
$text[template5title] = "L'histoire de notre famille et nos ancêtres";
Depending on the length of your text string, you may need to increase the width of the banner class, for example
.banner {
width: 750px; /* was 585px; */
}
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
- Darrin's demo site can be used to initial determine which template you want to use
- Templates - Getting Started
- Templates - Explained
- Templates - Overriding
- Templates - Add new style
- Setup - Site Design
