This is just a draft written after some successful tests in changing the Timeline theme.

Create your own theme

Here is how to easily create your own theme. Our starting point will be the ClassicTheme found here.

Copy the content of the file to a new JS file which will be your own theme file. Then, delete this part of the code :

Timeline.ClassicTheme.implementations = [];

Timeline.ClassicTheme.create = function(locale) {
    if (locale == null) {
        locale = Timeline.Platform.getDefaultLocale();
    }
    
    var f = Timeline.ClassicTheme.implementations[locale];
    if (f == null) {
        f = Timeline.ClassicTheme._Impl;
    }
    return new f();
};

You're left with the declaration of the theme and the implementation of a method called _Impl. First of all, replace all the ClassicTheme in the code by your theme name, let's say MyNewTheme. Then change the first line in order to copy the ClassicTheme's prototype to yours :

Timeline.MyNewTheme = Timeline.ClassicTheme;

Finally, just play with the values you can find in _Impl to modify the default theme. The properties names are quite self-explanatory ;)

You may also create new CSS classes to apply to the markers and to the event bubble.

Apply the theme to your Timeline

Each band of the Timeline may have its own theme. The theme are chosen when you create each band with createBandInfo(), using the "theme" parameter.

To apply your brand new theme, add this line to your call to createBandInfo() :

theme: Timeline.MyNewTheme.create()

Here is a complete example of a call I made to createBandInfo() :

var bandInfos = [
		Timeline.createBandInfo({
			eventSource: eventSource,
			date	   : date.toGMTString(),
			width: "70%",
			intervalUnit: Timeline.DateTime.MONTH,
			intervalPixels: 200,
			theme: Timeline.OLanceTheme.create()      // My theme is created here ...
		}),
		Timeline.createBandInfo({
			eventSource: eventSource,
			showEventText: false,
			trackHeight: 0.5,
			trackGap: 0.2,
			date	   : date.toGMTString(),
			width: "30%",
			intervalUnit: Timeline.DateTime.YEAR,
			intervalPixels: 400,
			theme: Timeline.OLanceTheme.create()      // ... and here !
		})
	];

And voilà ! don't forget to include your own JS file in your web page...