Vertical Timelines
Theme

Vertical Timelines en

Salvatos 44 11

This desktop-only theme distributes your timeline events on either side of an actual vertical line and pops the dates out of the title bar, for a more presentational aesthetic. You also have the option to hide event descriptions by default, only displaying them when the user hovers over an event, giving you a more compact view for long timelines.

Date labels use the colour set for the corresponding event marker (if any) and only display if a date is set. You can override the default colour for those markers (grey) and change the vertical line’s background colour to match.

Configuration

To control all options, add any of the following rules to your campaign CSS, changing the values as desired. You can of course use different settings for different timeline IDs or types by changing the selector accordingly (e.g. .kanka-entity-12345 .timeline {}  or .kanka-type-journal .timeline {}).

.timeline {
/* Line color */
	--svtlinecolor: white;
/* Default colour for markers and date labels (for elements set to Grey; others will honour their setting) */
	--svtbgc: grey;
/* Collapse descriptions? 'none' to collapse, 'block' to show */
	--svtcollapse: none;
/* Add a hint under each collapsed description? 'inline-block' to show, 'none' to hide */
	--svtcollapsehint: none;
/* Add this to align markers and date labels with the top of events rather than the middle */
	--svtmarkerheight: 5px;
}

Customization

If you prefer your date labels to be purely rectangular, you can also add the following rules to your CSS:

/* Disable arrowheads */
.timeline > li:nth-child(2n) .text-muted:after,
.timeline > li:nth-child(2n+1) .text-muted:before {
	display:none;
}
.timeline > li:nth-child(2n) .text-muted {
	right: calc(100% + 50px);
}
.timeline > li:nth-child(2n+1) .text-muted {
	left: calc(100% + 50px);
}

Localization

The hint text for collapsed descriptions is set to English by default, but a French translation is also provided with the theme. You can add your own translations to your campaign CSS by copying and editing the code below. Simply change lang="fr" to match your language code and edit the text between quotation marks. Likewise, you can change the hint text for English (en or en-us) to whatever you prefer :)

html[lang="fr"] .timeline-item:not(:hover):after {
	content: "Survoler pour afficher les détails...";
}

Feel free to suggest your translations be added to the theme out-of-the-box via Discord!


Latest version: 1.2 View Content
Released 3 months ago

Removed a setting that would break the layout at small widths.

Improved the hover area for collapsible descriptions and added an optional hint to expand hidden text. See instructions for how to configure the hint.