TNG Help

Below are instructions for uploading 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 that you've downloaded the template to and then open it by double clicking on the folder to see the files.

8. Find the "template2XX" folder inside TNG and click on it. Do not open it. 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!



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:

<img alt="" src="images/customer1.jpg" class="img-left">

Float Right

Float an image to the right without a border:

<img alt="" src="images/customer1.jpg" class="img-right">

Float an image to the left with a border:

<img alt="" class="img-border" src="images/customer1.jpg">

Float an image to the right with a border:

<img alt=""class="img-right-border" src="images/customer2.jpg">

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

<img alt="" class="img-catalog img-left" src="images/banner1.jpg">

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

<img alt="" class="img-catalog img-right" src="images/customer2.jpg">

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

<img alt="" class="img-round-left"  src="images/banner1.jpg">

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

<img alt="" class="img-round-right"  src="images/customer2.jpg">

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

<img alt="" class="img-frame img-left" src="images/banner1.jpg" >

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

<img alt="" class="img-frame img-right" src="images/customer2.jpg" >

Float an image to the left and curve the corners.

<img alt="" class="img-curved img-left" src="images/customer1.jpg">

Float an image to the right and curve the corners.

<img alt="" class="img-curved img-right" src="images/customer2.jpg">

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

<img alt="" class="img-gallery img-left" src="images/customer1.jpg">

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

<img alt="" class="img-gallery img-right" src="images/customer2.jpg">

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

<img alt="" class="img-rotate-left img-left img-frame" src="images/customer1.jpg">

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

<img alt="" class="img-rotate-right img-right img-frame" src="images/customer2.jpg">

 

 

Buy with Confidence

we accept Visa, MasterCard and PayPal

You can use any major credit card
through PayPal at checkout.

Thanks,
Marsha

Contact Us

Monday-Friday: 9am - 6pm
Saturday: 10am - 5pm
Sunday: Noon - 5pm
Eastern Time Zone