Timeline Theme Colors


Could you please help me with defining custom colors for the Timeline plug-in?

I am trying to customize the colors of the Timeline's ClassicTheme and have just 2 bands, but so far no luck.


Changing the colors on the timeline is a bit tricky, but possible. The easiest thing to do is take a look at SIMILE's CSS file governing the default timeline theme, and add your own using the same selectors. You can get a sense of what selectors are involved by looking at the timeline-bundle.css file in SIMILE's code repository. If you'd like to change the color of the two bands, for example, you could use the following in a CSS file, changing background-color to whatever values you'd like:

.timeline-band-0 .timeline-ether-bg{background-color:#eee !important;}
.timeline-band-1 .timeline-ether-bg{background-color:#ccc !important;}

.timeline-band-0 is the top band, and .timeline-band-1 is the bottom band.