Using the TimelineJS CSS selectors
If you want to change the way TimelineJS looks, first check out our style and presentation frequently asked questions. In particular, note that there is no way to override the CSS using the iframe embed. You will need to be able to instantiate the Timeline in javascript on your own page. Then, either in style
tags in that page, or in an external stylesheet, you can specify CSS rules changing some or all of TimelineJS's default presentation.
Timeline CSS classes
This table lists the major CSS classes which TimelineJS uses. You may just be able to tweak some of these. However, TimelineJS uses Less for CSS preprocessing, which means that some of the CSS rules are very specific. If just overriding a class doesn't seem to work, read more about Timeline and Less below.
Slide options affect the media and text areas of slides.
tl-timeline
div
tl-slider-container-mask
div
tl-slide
div
.tl-slide-titleslide
(for title slides) or .tl-slide-media-only
(slides without text).
tl-media-content-container
div
tl-media-content
div
tl-credit
div
tl-caption
div
tl-text
div
tl-text-content-container
div
tl-headline-date
h3
tl-headline
h2
.tl-headline-title
.
Note that you will probably need to use the selector h2.tl-headline
to change the appearance
of the slide titles.
tl-text-content
div
p
tags.
tl-slidenav-next
or
tl-slidenav-previous
div
tl-slidenav-icon::before
div
.tl-slidenav-next
or .tl-slidenav-previous
to specify which arrow to render.
tl-slidenav-title
div
.tl-slidenav-next
or .tl-slidenav-previous
to specify which title to render.
tl-slidenav-description
div
.tl-slidenav-next
or .tl-slidenav-previous
to specify which description to render.
Timenav options affect the portion of the timeline that renders the time series.
tl-timenav
div
tl-menubar
div
tl-timemarker
div
.tl-timemarker-active
.
tl-timemarker-content-container
div
.tl-timemarker
(for slides other than the current slide) or .tl-timemarker.tl-timemarker-active
(for the current slide).
tl-timemarker-timespan
div
.tl-timemarker
(for slides other than the current slide) or .tl-timemarker.tl-timemarker-active
(for the current slide).
tl-timemarker-media-container
div
tl-headline
h2
.tl-timemarker .tl-timemarker-content-container .tl-timemarker-content .tl-timemarker-text h2.tl-headline
.
(Yes, ideally it wouldn't need to be so specific, but for now, it does.)
tl-timeaxis
div
tl-timeaxis-background
div
tl-timeaxis-tick:before
div
.tl-timeaxis-major
to target major ticks or .tl-timeaxis-minor
to target minor ticks.
TimelineJS and Less
TimelineJS uses the Less CSS pre-processor to manage the complex number of elements, variables, and conditions needed to make everything look great. One side effect of how we use Less
is that various style rules for TimelineJS are often very specific. Since, in CSS, more specific rules take precedence over less specific ones, you may find it easier to edit Timeline's Less
files and compile your own stylesheet than to work out the exact selector which controls style rules.
A full Less
tutorial is outside the scope of this documentation. In the future, we may be able to provide a few more tips about how our Less
files are organized, but the main thing you need to know is this: even though there are many Less files in our Github repository, you only need to compile TL.Timeline.less
, which links to all of the others. And you don't need to set up our full-fledged development environment to compile Less
. See the Using Less documentation for more information.