TNG Timeline Events

Tne Next Generation of sitebuilding's Tiemline Chart
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.


This content was originally developed for my own Family Tree 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.


  • 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



Here are some 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

TNG does not have a 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.


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

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*/

font-size: 15px!important;
font-variant: small-caps;

/*Remove bullet point from Timeline Event Headings*/

.tlevents2 li {

/*Set font style for Timeline Events body text*/
.tlevents2 li p, .tlevents2 li p a {
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.1 Download the zip file from here

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

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 will have no impact unless you use the css classes referred  to.  The revised page has been sent to Darrin for consideration for inclusion in the core product.

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 .


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


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


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.

  1. 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.
  2. 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

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.  Please make a copy of the file before making changes, in case you need to rollback.

Installation Step 1 also identifies where mytngstyle.css is located


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.


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.





Adding your own events

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

Image Format

Use jpg file type to reduce disc space, unless your image has a shape that is not rectangular (for example, an oval portrait), in which case use a png file with a transparent background.  (jpg files don't support transparency and will replace the background with white which would spoil this effect:)

The images in the library are 300px wide by variable px deep, to give users some flexibility to increase the size of the thumbnails without losing image quality.  Whatever size you capture your images at, the .tlimage and .tlimagewide  css classes will constrain them to 80px and 120px respectively.  You can adjust the size of the thumbnails to your preference (see Margin around Image section above)



I am thinking of adding Australian and New Zealand events, because they were major migration destination points 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 leave me a reply to this post


Steven Davis and Heather Feuerhelm for suggesting content, testing the results and assisting with my fumbling attempts with CSS.  Erik  “XerxX” on the TNG Forum for answering my initial question about CSS that got this whole thing started

  1. Your site is really an inspiration. The lay-out of these timeline events is fantastic, it looks great and it’s such interesting “side information” to any tree… As soon as I find the time, I will create my own events on your format in order to link them more to my local history (Belgium)… When I make my “how did I construct my website”, you are one of the helpful people who will certainly not be forgotten!

    PS just two remarks: when going to your glossary, under TNG, the link you provide to your website starts with thhps in stead of https, which obviously doesn’t work. Once on your website, the media on your timeline don’t display… You just get the “broken link” image, like a small ripped picture. On my site, it works perfectly following your instructions.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>