TNG History Templates

History templatesMany of you want additional pages in your TNG site. I've created a couple of different styles from Darrin's basic history template. You can see them here: https://genealogywebtemplates.com/tng/histories/index.php I like the two column with the navigation on the left. This way, your users can see all of your pages from everywhere in the histories folder. Also, just because the page is listed as places.php, doesn't mean it's only for places. If you have a Fred Jones family, you can just copy the "place" page and rename it to jonesFred.php. I like using last names first in my genealogy files because I don't want to look through 100's of Freds to find my Fred Jones.

The zip file download is here: https://genealogywebtemplates.com/histories-new.zip

You do not have to use one of my templates for these files to work. They work with all TNG templates.

The instructions are included in the zip file, but I've also included a bit of html coding below.

Should you decide you use my histories files, please let me know how they work for you or if you have any difficulites with them. If you had a histories file before July 8th, please download the new one. I had a couple of errors that I corrected. If you find any errors, please let me know and I'll get those corrected.

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">

Tip for Editing

For the histories pages, all you need to do is to type where I have text. If you don't have an editing program, I use Expression Web 4. It has been discontinued by Microsoft; however it still works great for editing. I have a copy of it to download here, if you want to install it. It contains a "Design" view which will show you where most of the text goes and it won't be in code view unless you choose that tab. It's great for people that are not that familiar with html. I do not have a Mac version.

FTP & Uploading

You will need ftp access to upload the histories files. I use Filezilla, but you can use any ftp program that you like.

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/histories folder.



filezilla

7. Navigate to your histories-new file (or wherever you placed your new history page) and then open it by double clicking on the folder to see the files.

8. Find the "histories" folder inside TNG and double click on it to open it.

When you are ready to upload, highlight the file(s), right click and choose "upload" or drag the files from the local site (your computer) to the remote site (the web).



The url (web address) will be "http://yourdomainname.com/histories/yourwebpage.php" It may be something different if you have tng inside a main web.

For coding in the input boxes in the Template Settings page, take a look at the bottom of this page for TNG Specific Coding.
https://genealogywebtemplates.com/quickhtml.asp

If you have any problems, please don't hesitate to email or call. If you have any suggestions for this page, I'd LOVE to have them!

Marsha

 

 

Buy with Confidence

we accept Visa, MasterCard and PayPal

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

Thanks,
Marsha

Contact Us

1-919-847-4756
Raleigh, NC

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