TNG History Templates

History templates Many 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 view them in my templates. Go to the demo page and choose template 262. There is a button to the HISTORIES pages. Once there, you can choose another template and the histories pages will show up that match that template. 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 newest zip file download is here: https://genealogywebtemplates.com/histories-2023.zip

You do not have to use one of my templates for these files to work. They work with all TNG templates. The styling you need to add to your css file is included.

All of my templates come pre-packaged with a histories folder for your use.

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, I'd like to know that as well.

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.

filezilla

9. After opening the file, highlight the pages you wish to upload and then 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/home.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

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.

Expression Web 4 is a WYSIWYG (What you see is what you get) editor. The example below is what you see in Expression Web and what it looks like online:

Expression Web Editor in "Design" View

View of your file online

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.

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