Timeline Events Library

TNG's Timeline Chart provides graphical and list views of historical events during your ancestors' lifetimes - but creating the events can be time consuming. This article contains links to a canned set of approximately 410 Timeline Events that can be imported to your TNG installation to get you started. Also included are some stylistic changes to improve the usability and readability of the TNG Timeline, and notes on how to modify the styling and add new events.

Update 19 Jun 2023:

My apologies but the server on which this is hosted had been upgraded and something went awry with the timeline site which I just cannot find the time to sort. I've changed the download link to a new one. I've also not been able to find the time to update it with more recent events, but It'll get you started, and teh instruction to add events are still valid. Paul

Scope

This content was originally developed for my own Family Tree (Our Family History) and it reflects the fact that my ancestry is rooted in Britain. Many people from Britain migrated to the US, so I have also included major US events and, since our family history is shaped by world events, I have included many of those too. On request, I have added Canadian events.

Overall, the content is likely to appeal more to British, American and Canadian family historians, and those whose families migrated between these countries.

Content:

• British monarchs from 1066 onwards - because many Britons want to trace their ancestry back to the Norman Conquest
• British Prime Ministers
• British Scientists and Inventors
• US Presidents
• Significant US wars
• Canadian events
• World Wars / significant conflicts
• Events likely to appeal to a family historian
• Other significant British, American, Canadian and world events

Previews

Here are some actual implementation examples with subtle styling differences to the events table:

Larlee Genealogy:	Daniel McSheffrey LARLEE
Our Family History:	Ellen RICHINGS

A complete preview of the content is available on my development site - here - which uses a fictional John DOE (1066-2019!) who will, due his extreme longevity, show you all the timeline events.

Compatibility with earlier versions of TNG

This events set was created in TNG 12.0.2. Timeline Events have been in the product for a long time and, according to Darrin, the file format hasn't changed, therefore this set should be compatible across TNG versions - but that hasn't been tested.

You cannot MERGE this content into your existing library. There is no native merge function for the timeline events table, so this content will replace your existing timeline events. I am sure it's possible to devise an off-line merge capability, but that's outside the scope of this article.

Installation

Because this is mostly about content and styling, this is NOT a TNG Mod. The installation process steps are:

1. Add CSS

1.1 The following CSS classes make the text float around the images (there is a version for portrait and another for landscape images) and also apply revised style to the headings

/*Apply margin and wrap text around timeline event images*/
/*This is the portrait version*/
.tlimage {
margin: 10px;
border-radius: 16px;
width: 80px;
float: left;
}

/*Apply margin and wrap text around timeline event images*/
/*This is the landscape version*/
.tlimagewide {
margin: 10px;
border-radius: 16px;
width: 120px;
float: left;
}

/*Timeline Event Headings*/
.tlevents2{
font-weight:bold;
font-size: 15px!important;
font-variant: small-caps;
}

/*Remove bullet point from Timeline Event Headings*/
.tlevents2 li {
list-style-type:none!important;
}

/*Set font style for Timeline Events body text*/
.tlevents2 li p, .tlevents2 li p a {
font-weight:normal;
font-size: 13px!important;
font-variant: normal!important;
}

/*This controls the vertical spacing between paragraphs in the event description text*/
.tlevents2 li p {margin-top: 10px!important; margin-bottom:0!important;}

If you are using native TNG (no WordPress) that code should be placed in the mytngstyle.css file in the css folder of the template you are using.

If you are using a WordPress integration, you must place it in the mytngstyle.css file in the css folder in the root of your TNG installation

2. Download the zip file and extract the content

2.1 Download the zip file from here (Note: This links to my personal site because the file exceeds this site's upload limit) 2.1A - This file can no longer be downloaded... the host site is DOWN appears to have been deleted.

2.2 Unzip it locally or upload it to your site and unzip it there

3. Replace the timeline2.php file

3.1 Rename the existing timeline2.php in the root of TNG to something like timeline2OLD.php

3.2 Copy timeline2.php from the extracted zip file into its place

Note: The changes to timeline2.php are benign. They have no impact unless you use the css classes referred to.

4. Restore the Timeline Events backup file

4.1 In TNG > Admin > Utilities, scroll down to Timeline Events and select the middle button in the Action column, to backup your existing file, in case you need to back out the changes you are about to make:

4.2 On your server find go to the file /backups/tng_timelineevents.bak and rename it to, for example tng_timelineeventsOLD.bak so that you can restore if necessary. (NOTE: on later versions of tng, the backup folder is tng_backups)

4.3 From the unzipped archive, copy the file tng_timelineevents.bak to ... genealogy/backups or /tng_backups

4.4 In TNG > Admin > Utilities, scroll down to Timeline Events and select the right-hand button in the ""Action"" Column to "restore" the new file in place of the old.

If you receive a "file already exists" message, go back to step 4.2

5. Copy the Images

• If you are using a native TNG installation, copy the folder tl_images and all its contents to the root of the TNG folder on your server.
• If you are using a WordPress integration, the tl_images folders should be placed in the public folder

If you view a person's record in the front end, you should see a list of events with images, correctly formatted.

If the images do not display, check the path and permissions on the server are correct.

After Installation

After installation is complete you may want to do some of the following to mould the timeline to your requirements

Modify the style

The CSS blocks in Installation Step 1 above are commented to identify which Events Table elements they control, and may be freely edited to amend the style.

Installation Step 1 also identifies where mytngstyle.css is located

Delete unwanted content

It's unlikely you will want to all retain all of the content. The TNG Admin > Timeline Events page is the place to do it. Identifying the items to delete can be a chore - but there's a way to make it easier. The image files are located in a set of folders by category. If you delete a folder the entries in TNG Admin will show the Alt Text instead of the image. This is a quick visual clue of which entries need to be deleted, instead of having to read the text.

Note: there's an issue with the search function in Timeline Events Admin pages. In some versions the search does not include the Event Title. Darrin has a modified version of "'admin_timelineevent.php'" that fixes the issue.

There is no undo facility to restore deleted items. In that event you will have to restore the backup file and image files and start over.

Add your own events

To keep your new events compatible with the other content, copy and paste an existing event description and replace the highlighted sections with the new values:

Finally

I want to add Australian and New Zealand events, because they were migration destinations for some of my ancestors. If anyone knows of a good source for major historical events in those countries, and would like to test my results, please email me at:

Acknowledgements

• Heather Feuerhelm for suggesting content, testing the results and turning my novice attempts with CSS into a useful style for the Events List.
• Erik "XerxX" on the TNG Forum for answering my initial question about CSS that got this whole thing started.
• Steve Davis for providing US content