Faithlife Corporation

Business Hours

Monday – Saturday
6 AM – 6 PM PDT
Local: 4:44 PM

Creating Your Own Timeline

This article describes the process of creating your own timelines for the Timelines Addin. We’ll start off with the tutorial that is documented in the Timelines Addin help, and then continue from there with a few additional features.

To create your own timeline, you need to have a working knowledge of XML, because the data for each timeline is stored in an XML file. It will also help to have some knowledge of HTML.

This process is best explained with a tutorial, so let’s create a timeline of United States Presidents.

For our new timeline to be shown in the Timelines feature of Libronix DLS, we must put the timeline data file in a particular place. Open the “My Documents” folder, then open the “Libronix DLS” folder, and then open the “Timelines” folder. If there is no “Timelines” folder, you will need to create it inside the “Libronix DLS” folder. Make sure you spell the name of the folder correctly.

We’ll create our timeline data file in the “Timelines” folder. Let’s call it “USPresidents.xml”. You can use your favorite text or XML editor to create the file.

You can also view or download the completed file: USPresidents.xml. (To view the file in your browser, simply click on the link. To download the file, right-click on the link, select “Save Target As...”, and place the file in the “Timelines” folder described above.)

Let’s start the XML file with the standard XML declaration.

<?xml version="1.0"?>

The document element of our XML file is <lbx-timeline>.

<lbx-timeline category="Timelines" name="USPresidents">

The “category” attribute must be set to “Timelines”, and the “name” attribute should be set to the name of the file (minus the “.xml”).

Next is the <metadata> element, which provides a title and description for the timeline.

<metadata>
<title>U.S. Presidents</title>
<about>Shows the lives and terms of office of the American Presidents.</about>
</metadata>

The <title> and <about> elements contain the title and description that will be displayed for this timeline under the Choose Timelines dialog. (The <about> element is optional.)

Now we’ll start the <event-group> element that will contain all of our timeline events.

<event-group>
<title>Presidents of the United States of America</title>
<desc>The terms of office of the American Presidents.</desc>

The <title> and <desc> elements contain information about this group of events. This information is displayed at the top of the group of events when the timeline is displayed. (The <desc> element is optional.)

Now we’ll start an <event> element for our first event, the signing of the Declaration of Independence.

<event>
<date point="1776-07-04" />

The <date> element indicates the date of the event. This event is a “point” event – that is, it occurred at a particular point in time, not a span of time – so the <date> element uses the “point” attribute to specify the day. The format for a particular date is “YYYY-MM-DD”, where YYYY is the full year, MM is the month, and DD is the day.

If only the year is known, the month and day can be omitted. For example:

<date point="1776" />

Years earlier than a.d. 1000 do not need to be padded:

<date point="273" />

Years b.c. should start with a minus (“-”):

<date point="-960" />

If the date is approximate, start it with a “c”:

<date point="c1776" />
<date point="c273" />
<date point="c-960" />

Now we’ll give the event a title.

<title>The <i>Declaration of Independence</i> Signed</title>

The <title> element contains the title of the event as displayed in the timeline. Notice how HTML tags can be used for simple formatting; in this case, the <i> element is used for italics.

We’re done with this event, so we’ll close it and add an event for George Washington.

</event>
<event>
<date start="1789" end="1797" />
<title>George Washington</title>
<desc>Known as the Father of his country.</desc>
</event>

This event covers a range of dates, so it uses the “start” and “end” attributes rather than the “point” attribute.

Note also that the optional <desc> element can be used for events as well.

We’ll add two more Presidents and leave the rest as an exercise for the reader.

<event>
<date start="1797" end="1801" />
<title>John Adams</title>
</event>
<event>
<date start="1801" end="1809" />
<title>Thomas Jefferson</title>
</event>

We close the event group and the document element and we’re done!

</event-group>
</lbx-timeline>

Save the file, click Tools > Timelines in Libronix DLS, open the Choose Timelines dialog, check “U.S. Presidents”, and click OK to see our new timeline!

Additional Features

There are other features not mentioned in the tutorial above; they are described in this section.

Hyperlinks

You can add hyperlinks to the titles and/or descriptions of timeline events by using HTML. Just use an <a> element with an “href” attribute that uses the libronixdls protocol. For example, to open your default Internet browser to a page that describes George Washington:

<title><a href="libronixdls:web|url=http://www.whitehouse.gov/history/presidents/gw1.html">
George Washington</a></title>

This hyperlink jumps to Genesis 1 in your default Bible:

<desc>See <a href="libronixdls:keylink|ref=[en]Bible:Gen%201">Genesis 1</a></desc>

If you decide to use a protocol other than libronixdls, be sure to include a “target” attribute set to “_blank” to ensure that the hyperlink opens a new browser window. This example will open the Logos home page in Internet Explorer:

<desc><a target="_blank" href="//www.logos.com">Logos Bible Software</a></desc>

Images

You can also add images to the descriptions of timeline events by using HTML, if you have a valid URL that points to that image. Use an <img> element with a “src” attribute that it set to the URL of that image. Also be sure to set the “height” and “width” attributes to the pixel height and pixel width of the image to ensure that the timeline displays properly.

<desc><img src="http://www.whitehouse.gov/history/presidents/images/georgewashington.jpg"
 align="left" height="50" width="50" /> Known as the Father of his country.</desc>

More Event Groups

Each timeline has at least one <event-group> element that contains all of the <event> elements. If you want to create a hierarchical arrangement of events, you can place additional <event-group> elements anywhere you would put an <event> element.

Collapsed Event Groups

Event groups can be expanded and collapsed with the mouse when viewing a timeline, but event groups usually start out expanded when first displayed. If you want an event group to be collapsed by default, set the “collapsed” attribute on the <event-group> element to “true”.

<event-group collapsed="true">

Setting Event Colors

Timeline events are generally displayed with arbitrary colors. If you’d like to decide which colors will be used by which events, you can simply set the “color” attribute of any <event> element to an HTML-style RGB color value. For example, “#ADD8E6” is light blue.

<event color="#ADD8E6">

Matching Similar Events

Sometimes you’ll want to ensure that two or more events are displayed with the same color, even if you don’t care exactly what that color is. Find the <event> elements for each of the similar events and set their “group” attribute to the exact same text.

<event group="WhigParty">

Text Formatting

Since event titles and descriptions support arbitrary HTML, there are a lot of options for changing the formatting of the text displayed by a timeline. Feel free to experiment!