Vertical Timelines

Vertical Timelines en

Installations 189 Likes 39

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.

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, like .kanka-entity-12345 .timeline {...}  or .kanka-type-journal .timeline {...} (click here to learn about designing your own entity selectors).

.timeline {
/* Line color */
	--svtlinecolor: white;
/* Default colour for markers and date labels (for elements set to Grey; others will honour their setting) */
	--svtbgc: grey;
}

Customization

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

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

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed): Support me on Ko-fi.com

Latest version 1.8.2

Released 3 months ago

Additional tweak to the bar's length to prevent it from colliding with buttons.