Change Background Color for Simile Timeline

[Gabe]

Hello,

I have had some trouble figuring out how to change the background
color of my timeline. Right now, I have tried using the following
code in the onLoad() method:

var theme = Timeline.ClassicTheme.create();
theme.ether.backgroundColors[0] = "#AA0000";
theme.ether.backgroundColors[1] = "#f2b36e";
theme.ether.backgroundColors[2] = "#f2b36e";

As you can see, I have three different bands in my timeline. I have
applied my theme variable to each band info section as seen below:

var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource1,
date: "3000 BC",
width: "20%",
intervalUnit: Timeline.DateTime.CENTURY,
intervalPixels: 60,
theme: theme
}), ...etc

This method does not change the background color of the timeline. It
continues to stay gray.

Is there another way to do this, or does anyone see a problem with
what I have done?

Thanks!

-Gabe

[Michael Nosal]

In Timeline 2.3.1, a change was made to switch from using the theme.ether.backgroundColors array to use the .timeline-ether-bg CSS class name instead.
If you look in /src/webapp/api/styles/ethers.css, at the end of the file you'll see:
.timeline-band-0 .timeline-ether-bg{background-color:#eee}
.timeline-band-1 .timeline-ether-bg{background-color:#ddd}
.timeline-band-2 .timeline-ether-bg{background-color:#ccc}
.timeline-band-3 .timeline-ether-bg{background-color:#aaa}

This says that the first band will get background color #eee, the second will get #ddd, etc.

Your colors would look like:
.timeline-band-0 .timeline-ether-bg{background-color:#aa0000}
.timeline-band-1 .timeline-ether-bg{background-color:#f2b36e}
.timeline-band-2 .timeline-ether-bg{background-color:#f2b36e}

You can add these rules to your own stylesheet that is loaded after the ethers.css stylesheet, or include them in your .html file directly inside a <style> element (again, after the ethers.css file has been loaded).

--Mike

[Gabe]

Great, that worked well. Thanks for the help!