Fossil

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.

timeline-arrowheads

Set this to 0 to hide arrowheads on primary child lines.

timeline-circle-nodes

Set this to 1 to make check-in nodes circular instead of square.

timeline-color-graph-lines

Set this to 1 to colorize primary child lines.

white-foreground

Set this to 1 if your skin uses white (or any light color) text.
This tells Fossil to generate darker background colors for branches.

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.

.tl-canvas

Set the left and right margins on this class to give the desired amount
of space between the graph and its adjacent columns in the timeline.

Additional Classes

.tl-rail

Think of rails as invisible vertical lines on which check-in nodes are
placed. The more simultaneous branches in a graph, the more rails required
to draw it. Setting the width property on this class determines the
maximum spacing between rails. This spacing is automatically reduced as
the number of rails increases. If you change the width of .tl-node
elements, you'll probably need to change this value, too.

.tl-mergeoffset

A merge line often runs vertically right beside a primary child line. This
class's width property specifies the maximum spacing between the two.
Setting this value to 0 will eliminate the vertical merge lines.
Instead, the merge arrow will extend directly off the primary child line.
As with rail spacing, this is also adjusted automatically as needed.

.tl-nodemark

In the timeline table, the second cell in each check-in row contains an
invisible div with this class. These divs are used to determine the
vertical position of the nodes. By setting the margin-top property,
you can adjust this position.

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.

.tl-node

A node exists for each check-in in the timeline.

Additional Classes

.leaf: Specifies that the check-in is a leaf (i.e. that it has no
children in the same branch).

.merge: Specifies that the check-in contains a merge.

.sel: When the user clicks a node to designate it as the beginning
of a diff, this class is added to both the node itself and the
.tl-canvas element. The class is removed from both
elements when the node is clicked again.

.tl-arrow

Arrows point from parent nodes to their children. Technically, this
class is just for the arrowhead. The rest of the arrow is composed
of .tl-line elements.

There are six additional classes that are used to distinguish the different
types of arrows. However, only these combinations are valid:

.u: Up arrow that points to a child from its primary parent.

.u.sm: Smaller up arrow, used when there is limited space between
parent and child nodes.

.merge.l or .merge.r: Merge arrow pointing either to the left or
right.

.warp: A timewarped arrow (always points to the right), used when a
misconfigured clock makes a check-in appear to have occurred before its
parent (example).

.tl-line

Along with arrows, lines connect parent and child nodes. Line thickness is
determined by the width property, regardless of whether the line is
horizontal or vertical. You can also use borders to create special line
styles. Here's a CSS snippet for making dotted merge lines: