Fiction:Timeline Template

This page will guide you through the process of creating your own interactive timeline similar to the completed one seen below. Keep in mind that this article does not feature all methods which can be used to personalize your own timeline and only describes some of the techniques which can be used to get the effect presented below.

Setting the time periods
The timeline template described on this page is perhaps best used for an epoch-based timeline, featuring a moderate amount of events. Begin by designing a desired number and length of historical periods and then continue to convert it into the timeline format described here.

Setting up the template
Start writing the code using the following table: 

This procudes:

Time period text alignment
You can adjust the text alingment using the following code:  [...] !style="width:34%;background-color:#333333"|Box A !style="width:34%;background-color:#555555"|Box B !style="width:33%;background-color:#777777"|Box C [...]
 * - style="text-align:left/center/right"

Using the setting "left" produces:

Changing period color and length
You can change the values "width" and "background-color" by changing the percentage of total page width occupied by one time period and the color hex code, e.g.:  [...] !style="width:20%;background-color:#61521f"|Box A !style="width:30%;background-color:#a63a6c"|Box B !style="width:50%;background-color:#97c278"|Box C [...]

Marking important events
This tutorial timeline will also feature an event that occurs somewhere in the middle of the Box C. The easiest way to mark it and to make further editing easier is to add another box, Box D, with the exact same settings as Box C, except that it will feature no text:  [...] !style="width:20%;background-color:#61521f"|Box A !style="width:30%;background-color:#a63a6c"|Box B !style="width:25%;background-color:#97c278"|Box C !style="width:25%;background-color:#97c278"| [...] Now the event is marked and a new column has been constructed. Now we will begin adding more text to the template.

Describing the timeline
Let's suppose that we want to add the events which marked the beginning of every successive timeline and the event in the last time period. We will begin by adding an another row to the table: 

Setting box margins
We can make it easier to read (especially when more rows of information come into play), using customizable box borders:  [...] !style="border-style: solid; border-width: 0 0 0 1px"| A !style="border-style: solid; border-width: 0 0 0 1px"| B !style="border-style: solid; border-width: 0 0 0 1px"| C !style="border-style: solid; border-width: 0 0 0 1px"| D [...]

therefore we will get borders on the left margin of the boxes. ##
 * 1) The border-width values are defined clockwise: [TOP] [RIGHT] [DOWN] [LEFT],
 * }

Adding more rows of information
In some cases, you will end up with event descriptions that are longer than the space assigned to them. If you want to avoid the text being split into two rows within the same box, you can use the box margins to "extend" the location of event descriptions further down:  Notice that we had to use another setting "colspan" here. This setting allows us to merge the last two boxes in the new row into a new one, in which the event description can fit easily. However, by default, text will be centered afterwards, therefore we set the entire new row to always align all of the text to the left.

Adding timestamps
We can add another row over the colored boxes, in which we can place even more information: <pre style="display: inline-block;"> {| align="center" style="width:100%" !colspan="999"|Timeline Title !style="width:20%;background-color:#61521f"|<font size=1; color=#000000>Box A [...] This concludes this short tutorial. More tips and tricks will be added in the future.
 * - style="text-align:left"
 * Time A
 * Time B
 * Time C
 * Time D
 * - style="text-align:left"
 * Time D
 * - style="text-align:left"