{% extends "base.html" %} {% block content %}

## Changing the Appearance of your Timeline

For more technically capable creators, you can override or extend TimelineJS's CSS to have more control over how your timeline looks. To do this, you must be able to create CSS files and host them at a URL where TimelineJS can find them.

### Fonts and Typography

For simple typographic styling, such as bold or italic text, you can use basic HTML tags in the `headline`, `text`, `media credit`, and `media caption` fields. You can also use tags which support the `style` attribute, such as `<p>`, `<span>`, and `<div>`. More complete documentation of HTML usage is beyond the scope of this document, but the web is full of tutorials. (Note that in limited cases, TimelineJS may strip some HTML markup that could be a potential security problem.)

The easiest way to change the fonts TimelineJS uses is to select from one of the list in the "Optional settings" section of step 3 of the Timeline authoring tool. However, if none of those font combinations work for you, you can create your own.

To create your own, you can download a model copy of a typical font CSS file from our CDN. You may want to put it through a CSS formatter before you start to edit it. If you are familiar with LESS, you may prefer to work from our LESS files on GitHub. If you set up Timeline as an `npm` project, then after you edit those files, you can run `npm run dist` to compile the LESS into CSS. You'll find your generated font CSS file in the `dist/css/fonts` directory.

Whether you use `npm` or simply edit a copy of one of the provided font CSS files, it's up to you to put this file on a web server. If you're using the embed code to publish your timeline, then you should change the `src` attribute of your `iframe` so that it has a parameter `font` with the URL to your font CSS as the value. This URL demonstrates setting the font with a URL, albeit in this case a URL to one of our provided font sets.

If, instead of the embed, you are directly instantiating the timeline in your page using JavaScript, see this documentation for more details.

### Other CSS presentation

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.

If you want to change more than just typography, the basics are similar. You can create a Timeline CSS file by editing a copy of the main CSS file, or by checking out TimelineJS from GitHub and using `npm` to set up the development environment, and then editing the LESS files TimelineJS uses. If you are instantiating the timeline using JavaScript, you may also be able to selectively override CSS with `<style>` tags in the page.

Assuming you've created your own CSS file and put it on a web server somewhere, if you are using `iframe` embeds, you can edit the `src` of your embed to tell TimelineJS to load your CSS. Add a parameter called `theme` and set its value to the URL for your custom CSS. (At one point we considered providing alternative themes with TimelineJS, but we haven't made the time to fully complete and test any.)

See below for more details on various CSS classes which TimelineJS uses.

### 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.

Slide options affect the media and text areas of slides.

Class Name
Element Type?
Notes
`tl-timeline`
`div`
Added to the initial div containing the timeline. Contains entire element.
`tl-slider-container-mask`
`div`
A wrapper around the slides. Background colors or images can be set here.
`tl-slide`
`div`
Each complete set of slide items. May appear in conjunction with `.tl-slide-titleslide` (for title slides) or `.tl-slide-media-only` (slides without text).
`tl-media-content-container`
`div`
Contains the media, its credit, and its caption.
`tl-media-content`
`div`
Contains the media item. Use this to add borders, padding and more.
`tl-credit`
`div`
The media item's credit.
`tl-caption`
`div`
The media item's caption.
`tl-text`
`div`
The slide's text plus padding. Add background color to the text portion of the slide here.
`tl-text-content-container`
`div`
The slide's text minus padding.
`tl-headline-date`
`h3`
The date that appears over the slide's headline.
`tl-headline`
`h2`
The slide's headline. Title slides have the additional class `.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`
The text of the slide, in `p` tags.
`tl-slidenav-next`
or `tl-slidenav-previous`
`div`
The navigation and text for moving forward and back. Use in conjunction with the following selectors to render the navigation arrows and text.
`tl-slidenav-icon::before`
`div`
Inserts the navigation arrow. Preface with `.tl-slidenav-next` or `.tl-slidenav-previous` to specify which arrow to render.
`tl-slidenav-title`
`div`
The title of the next/previous slide. Preface with `.tl-slidenav-next` or `.tl-slidenav-previous` to specify which title to render.
`tl-slidenav-description`
`div`
The description of the next/previous slide. Appears on hover. Preface with `.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.

Class Name
Element Type?
Notes
`tl-timenav`
`div`
The timeline element. Change the background color here.
`tl-menubar`
`div`
The zoom icons.
`tl-timemarker`
`div`
All of the elements that make up the markers (flags and lines) on the timenav. The marker of the current slide also has the class `.tl-timemarker-active`.
`tl-timemarker-content-container`
`div`
The flag of the marker. You can set the flag's background color and text color here. When writing styles for this selector, preface this selector with `.tl-timemarker` (for slides other than the current slide) or `.tl-timemarker.tl-timemarker-active` (for the current slide).
`tl-timemarker-timespan`
`div`
The width of the marker. This draws the translucent background behind markers if your event has a start and end date. When writing styles for this selector, preface this selector with `.tl-timemarker` (for slides other than the current slide) or `.tl-timemarker.tl-timemarker-active` (for the current slide).
`tl-timemarker-media-container`
`div`
The icon or thumbnail representing the media in the timeline flag.
`tl-headline`
`h2`
The text of the flag. Set color and font family here. Note that this is the same class used for the headline in the main slide body. If you want to change only the headline in the navigation, use `.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`
The ticks representing the timescale.
`tl-timeaxis-background`
`div`
The appearance of the background for the tick marks.
`tl-timeaxis-tick:before`
`div`
The line drawing the tick. Set the background color to change the color of the line. Preface with `.tl-timeaxis-major` to target major ticks or `.tl-timeaxis-minor` to target minor ticks.
{% endblock %} {% block scripts %}
{% endblock %}