Home Page TNG V7

From TNG_Wiki
Jump to navigation Jump to search

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

Template 1 home page photo

  • file name is home-photo.jpg
  • dimensions are 200 x 150 pixels
  • used in line 20 of index.php

<img src="<?php echo $cms['tngpath']; ?>home-photo.jpg" alt="" width="200" height="150" border="0" align="left"/>

Template 1 home page title
  • file name is home-title.gif
  • dimensions are 395 x 159 pixels
  • used in line 21 of index.php

<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

Template 2 home page header

  • file name is homeheader.gif
  • dimensions are 443 x 114 pixels
  • used in line 41 of index.php

<img src="<?php echo $cms['tngpath']; ?>homeheader.gif" alt="" width="443" height="114" class="noimgborder" />

Template 2 home page photo

  • file name is mainphoto.jpg
  • dimensions are 327 x 460 pixels
  • used in line 146 of index.php

<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

Template 3 home page header

  • file name is title.gif
  • dimensions are 630 X 93 pixels
  • used in line 20 of index.php

<img src="<?php echo "$cms[tngpath]"; ?>title.gif" alt="" class="titleimg" width="630" height="93" />

Template 3 home page photo

  • file name is mainphoto.jpg
  • dimensions are 530 x 303 pixels
  • used in line 40 of index.php

<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

Template 4 Search

  • file name is search4.gif
  • dimensions are 109 x 35 pixels
  • used in line 21 of topmenu.php

<a href="searchform.php"><img src="<?php echo $cms['tngpath']; ?>search4.gif" alt="<?php echo $text['mnusearchfornames']; ?>" class="searchimg" /></a>

Template 4 photo

  • file name is smallphoto
  • dimensions are 71 x 100 pixels
  • used in line 82 of index.php

<img src="<?php echo $cms['tngpath']; ?>smallphoto.jpg" alt="" class="smallphoto" width="71" height="100" />

Template 4 title

  • file name is title.gif
  • dimensions are 468 x 100 pixels
  • used in line 83 of topmenu.php which can optional replaced with text only title if you don't want to create a text image

<img src="<?php echo $cms['tngpath']; ?>title.gif" alt="<?php echo $text['ourpages']; ?>" class="banner" width="468" height="100" />

Template 4 title

  • file name is bigphoto.jpg
  • dimensions are 300 x 171 pixels
  • used in line 100 of index.php which can optional replaced with text only title if you don't want to create a text image

<img src="<?php echo $cms['tngpath']; ?>bigphoto.jpg" alt="" class="bigphoto" width="300" height="172" /><br />

Template 5

Template 3 home page photo

  • file name is mediumphoto.jpg
  • dimensions are 160 x 121 pixels
  • used in line 135 of index.php

<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

Template 1 banner

  • file name is header-title.gif
  • dimensions are 620 x 72 pixels
  • used in line 2 of topmenu.php

<a href="index.php"><img src="header-title.gif" alt="" width="620" height="72" border="0" /></a>

Template 1 photo (optional)

  • file name is header-image.gif
  • dimensions are 93 x 72 pixels
  • optionally used in line 10 of topmenu.php with text only heading in line 14 if you don't want to create a text image


Template 2

Template 2 photo

  • file name is headerphoto.jpg
  • dimensions are 70 x 99 pixels
  • used in line 12 of topmenu.php

<img src="<?php echo $cms['tngpath']; ?>headerphoto.jpg" alt="" class="headerimg" width="70" height="99" />

Template 2 title

  • file name is headertitle.gif
  • dimensions are 312 x 78 pixels
  • used in line 18 of topmenu.php which can optional replaced with text only title if you don't want to create a text image

<img src="<?php echo $cms['tngpath']; ?>headertitle.gif" alt="<?php echo $text['ourpages']; ?>" width="312" height="78" class="noimgborder" />

Template 3

Template 2 photo

  • file name is headerphoto.jpg
  • dimensions are 186 x 110 pixels
  • used in line 9 of topmenu.php

<img src="<?php echo $cms['tngpath']; ?>headerphoto.jpg" alt="" class="headerphoto" width="186" height="110" />

Template 2 title

  • file name is headertitle.gif
  • dimensions are 563 x 86 pixels
  • used in line 12 of topmenu.php which can optional replaced with text only title if you don't want to create a text image

<img src="<?php echo $cms['tngpath']; ?>headertitle.gif" alt="" class="menutitle" />

Template 4

Template 4 Search

  • file name is search4.gif
  • dimensions are 109 x 35 pixels
  • used in line 9 of topmenu.php

<a href="searchform.php"><img src="<?php echo $cms['tngpath']; ?>search4.gif" alt="<?php echo $text['mnusearchfornames']; ?>" class="searchimg" /></a>

Template 4 photo

  • file name is smallphoto
  • dimensions are 71 x 100 pixels
  • used in line 88 of topmenu.php

<td><img src="<?php echo $cms['tngpath']; ?>smallphoto.jpg" alt="" class="smallphoto" width="71" height="100" /></td>

Template 4 title

  • file name is title.gif
  • dimensions are 468 x 100 pixels
  • used in line 70 of topmenu.php which can optional replaced with text only title if you don't want to create a text image

<img src="<?php echo $cms['tngpath']; ?>title.gif" alt="<?php echo $text['ourpages']; ?>" class="banner" width="468" height="100" />

Template 5

Template 5 topmenu photo

  • file name is smallphoto.jpg
  • dimensions are 100 x 76 pixels
  • used in line 19 of topmenu.php

<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