When my employer asked that I investigate how to theme and style a Simile timeline [1] for an upcoming project, I was really excited to jump right in. Before I got started, I reviewed the available live examples [2] showcased on the Simile website, which as a web designer I would describe as interesting content, with less than inspiring presentation.

Within no time, I had my first timeline up and running in the application’s default classic theme. Then I read the documentation on how to change and customize the timeline’s appearance. What I learned however was disappointing. The standard Theming options are essentially limited to the very basics such as text styles and background colors.

As a designer I desire more control. So I began to review the style sheets, hoping to find better options there. Well, that turned out to be equally disappointing. It’s a fruitless mission to theme with CSS when only about 25% of the HTML selectors have IDs and Classes.

Then it suddenly became clear to me why all the live examples look the way they do. It’s not because they are lacking themes, after all each one of them has its own theme. It’s because there is no clear separation of content from presentation, and that leaves designers, such as me, at a real loss or at least with a big challenge.

I did however meet this particular challenge, and I managed to “theme” a Simile timeline with some styles that I required at a minimum including but not limited to background images, curved corners, dotted borders, and rollover effects. But this was no easy task, and in the end it required that I make changes directly to the source code itself.

My Simile timeline [2] charts the releases of Mac OSX. It’s best viewed in Firefox, Safari and IE 7 respectively. Unfortunately it breaks in IE 6. But no surprise there :)