Customizing the Timeline Graph

Beginning with version 1.33, Fossil gives users and skin authors significantly more control over the look and feel of the timeline graph.

Basic Style Options

Fossil includes several options for changing the graph's style without having to delve into CSS. These can be found in the details.txt file of your skin or under Admin/Skins/Details in the web UI.

Advanced Styling

If the above options aren't enough for you, it's time to get your hands dirty with CSS. To get started, I recommend first copying all the graph-related CSS rules to your stylesheet. Then it's simply a matter of making the necessary changes to achieve the look you want. So, next, let's look at the various graph elements and what purpose they serve.

Each element used to construct the timeline graph falls into one of two categories: visible elements and positioning elements. We'll start with the latter, less obvious type.

Positioning Elements

These elements aren't intended to be seen. They're only used to help position the graph and its visible elements.

Visible Elements

These are the elements you can actually see on the timeline graph: the nodes, arrows, and lines. Each of these elements may also have additional classes attached to them, depending on their context.

Default Timeline Graph CSS

.tl-canvas {
  margin: 0 6px 0 10px;
.tl-rail {
  width: 18px;
.tl-mergeoffset {
  width: 2px;
.tl-nodemark {
  margin-top: 5px;
.tl-node {
  width: 10px;
  height: 10px;
  border: 1px solid #000;
  background: #fff;
  cursor: pointer;
.tl-node.leaf:after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 4px;
  height: 4px;
  background: #000;
.tl-node.sel:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: red;
.tl-arrow {
  width: 0;
  height: 0;
  transform: scale(.999);
  border: 0 solid transparent;
.tl-arrow.u {
  margin-top: -1px;
  border-width: 0 3px;
  border-bottom: 7px solid #000;
} {
  border-bottom: 5px solid #000;
.tl-line {
  background: #000;
  width: 2px;
.tl-arrow.merge {
  height: 1px;
  border-width: 2px 0;
.tl-arrow.merge.l {
  border-right: 3px solid #000;
.tl-arrow.merge.r {
  border-left: 3px solid #000;
.tl-line.merge {
  width: 1px;
.tl-arrow.warp {
  margin-left: 1px;
  border-width: 3px 0;
  border-left: 7px solid #600000;
.tl-line.warp {
  background: #600000;