TNG Help

Below are instructions for uploading and/or installing your new TNG template from Genealogy Web Templates.

After you purchase the template, unzip the file. You will find a "readme" file, a "histories" folder and the template folder. You will need to ftp the template (transfer the template) from your computer to your host. I use Filezilla, but you can use any ftp program you like.

FTP & Uploading

How to FTP

There are a few FTP programs that you can use to upload your file to the web. Most of the interfaces look very similiar. Below is a screenshot of "Filezilla." You will need the information shown below on all of the programs.

Filezilla

1. Host - Your domain name/url goes here

2. Username - This is the FTP username you created with the host (your server company)

3. Password - This is the FTP password you created with the host - It may or may not be the same as your password to sign into your control panel with your host.

4. The Local Site - This is where you will navigate to in order to find your web. These files are on your computer and are listed on the left in filezilla.

5. The Remote Site - This is the host or web files which are listed on the right in filezilla.

6. You will click on the public_html in order to upload your files. Find the tng/templates folder.

filezilla

7. Navigate to your folder or desktop where you've downloaded and unzipped the template. Open it by double clicking on the folder to see the files. With my downloads, the template folder is inside the TNG folder (which also contains a histories folder as well as other files). You will upload only the template folder. The name of the folder will be template200, template201, template245, etc. Do NOT upload the folder labeled TNGv14-241, TNGv14-219, TNGv14-269, etc., you must open that folder to find your template.

8. On the "remote site" find the "templates" folder inside TNG and click on it to open it. You will be able to see all of the TNG templates listed. Right click and choose "upload" or drag the files from the local site (your computer) to the remote site (the web) into the templates folder.

9. Go to your template setting page and choose the template. Click Save.

You're ready to go with your new look!

Installing Your New Template

For most of you, Darrin has the template settings built into TNG and all you have to do is to upload the new template; however, he and I have decided that my newest templates can be installed when they are purchased. Below are the instructions for your template installation.

Replace the XXX with your template number.

You will need to upload the template as well as the “templatemsgs-marshaXXX” and the template_importer.php
Upload the template to your templates folder (see above instructions for uploading your template) – make sure that you are only uploading the folder that is named templateXXX
Upload the templatemsgs-marshaXXX and the template_importer.php to the root file of TNG, not in the templates folder
Go to this page in your browser: https://yourdomainname.com/template_importer.php?filename=templatemsgs-marshaXXX
You will get this message:
Template Importer
Importing new template settings from templatemsgs-marshaXXX into the database (template XXX)...
Your template variables have been imported.
Go to your template settings page and select the template.

If you need any help, I can do this for you.

My Site Name and Links in the Header Aren't Showing

When your site's name and/or links to the left in your header aren't showing up OR they are showing up some, but not correctly means that you don't have the latest version of TNG that has the header variables. There are three fixes for this:

Install the latest update for TNG - Darrin just put these variables in place at the end of August 2023.
Install the variables yourself. It's easy.
Contact me and I will install them. I need your ftp information, the language(s) you use and the name you want to use for both variables. If you have more than one language you will need to send me the translations for each language. If you added any variables that were not in the language files from TNG, please let me know as the new file will overwrite your language file.

Here's how you do it:

Open the TNG folder and find the languages folder.

Find your language. I use English-UTF8. If you are unsure which to use, use your language's UTF8 file. Open the folder.

Open the admintext folder for your language. Each language has its own admintext.php file.

When you open the admintext.php file, you should see the following code at the top of your page. You may or may not have numbers showing you the line numbers on your editing program. I use Expression Web 4 to edit, so it shows the line numbers. If you want to download a free version of EW4 for PCs not Macs, you can get it on my site here: EW4.exe. Do NOT use MS Word.

5. Paste in these two lines at the bottom of the template section:
$admtext['headerlink'] = "Header Link";
$admtext['headerlinktext'] = "Header Link Name";

6. Change ONLY the highlighted words above to text in your own language. Be careful not to delete the " (quote) or ; (semicolon)

Do not change #5 to your language.

When you are sending me the translations, please send them in this format:
I used Google Translate, so it may not be exactly correct.

Italian-UTF8
headerlink = Collegamento dell'intestazione
headerlinktext = Testo del collegamento dell'intestazione

Danish-UTF8
headerlink = Overskriftslink
headerlinktext = Overskriftslinktekst

Romanian-UTF8
headerlink = Link antet
headerlinktext = Text link antet

You don't have to send me English Translations, just tell me English.

Making a Link on the Template settings page

In TNG templates there are link options to other pages or sites. Here's how to do them.

To link to a page INSIDE your web:

The link above shows what you would put in the "Link" box for a link inside your web. The "Link Name" is your choice.

The link above shows how to put a link to another folder in your web. This one goes to the "histories" folder and "place1.php" inside of the histories folder. The "Link Name" is your choice.

If there is no link name offered, this means that you will have "MORE" or "See More" on your page. You will not have a choice of naming your link.

What if you want to link to a person but the template settings page doesn't give you the option of choosing the person or the tree? Here's how to do it:

1. Go to your surnames page (or whatever page you use to find someone)

2. Find your person's name and click on it to take you to their page. I chose Adeline Bourgeois

3. When you get to their page in your browser, you should see something like this:

4. Copy the "getperson" information as shown below.

5. Paste the "getperson" information in the link section and name your link whatever you'd like.

What if I want to link to a page on the internet?

You have two options for this. You can have the link appear in the same window or you can have the browser open a new window.

1. Appearing in the same window:

Just type in (or copy & paste) the address of the site you want to link to. This one goes to TNG and I've named the link, "TNG - The BEST"
You can name your links anything you'd like if there is a Link Text Box. Otherwise they typically say, "MORE".

2. Appearing in a new window:

Just type in (or copy & paste) the address of the site you want to link to. This one goes to Genealogy Web Templates and I've named the link, "Genealogy Web Templates". The difference between staying on the same browser and going to another browser is that you are going to add the words: target="_blank The beginning and ending hyperlink quotes is already coded in my templates. Make sure to remember to put in the underscore _.

I want to put my email address in a link.

1. Your email link:

Just type in the words: "mailto:" and then add your email address. The address would be: mailto:your email

2. Your email link that has the subject line filled in:

To include a subject line, after your email address type in ?subject=Your_Subject. You will notice that I have an "underscore _ " between words. This is done so you won't get extra characters in your subject line. My templates contain the quotes for the link. If you are using a different template you may have to add the quotes before and after the link.

Text and Image Styles in the CSS file

For text and image coding in the input boxes on the Template Settings page, take a look below

There are six heading tags used in my templates. Your colors and sizes will depend upon which template your purchased. If you are using a template from TNG, some of the heading tags may be defined as a distinct color and size. If not, they'll just be the default font color & size.

Heading 1 <h1>Your Text Here</h1>

Heading 2 <h2>Your Text Here</h2>

Heading 3 <h3>Your Text Here</h3>

Heading 4 <h4>Your Text Here</h4>

Heading 5 <h5>Your Text Here</h5>

Heading 6 <h6>Your Text Here</h6>

The Drop Cap can be done by applying the dropcap class to the paragraph.

<p class="dropcap">First Letter of your paragraph</p>

Text

Most of my templates have different colors and sizes that can be used on text as well as aligning text to the right. You can check your specific css file for those. Examples of this include:

text align left <p class="left">

text-align center <p class="center">

text-align right <p class="right">

text tiny 65% <p class="tiny">

text small 85% p class="small">

text medium 90% <p class="medium">

text large 120% <p class="large">

text xlarge 180% <p class="xlarge">

Image Coding

All of my templates have image coding to style the look of the image. If you like one of these styles and it's not included in your template, just let me know and I'll send you the code.

Float Left

Float an image to the left without a border:

Float Right

Float an image to the right without a border:

Float an image to the left with a border:

Float an image to the right with a border:

Float an image to the left with a border and a shadow:

Float an image to the right with a border and a shadow:

Make a square image appear to be round and float it to the left. [looks square in Design view]

Make a square image appear to be round and float it to the right. [looks square in Design view]

Float an image to the left and add a frame to it:

Float an image to the right and add a frame to it:

Float an image to the left and curve the corners.

Float an image to the right and curve the corners.

Float an image to the left and add padding and a light border.

Float an image to the right and add padding and a light border.

Float an image to the left and tilt it to the left.

Float an image to the right and tilt it to the right.