Home Page TNG V7
In TNG V7, you must manually edit your home page to make changes to text. You should:
- 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"/> |
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; */ }
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; */ }
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
- Home Pages - Getting Started