Vertical Timelines

Vertical Timelines en

Installations 287 Likes 49

This 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. It only activates when at least 600 pixels are available for the timeline’s width, automatically adjusting to screen size and whether or not the navigation panel is open.

Date labels are only shown if a date is set and use the colour set for the corresponding event marker, except for Gray which defaults to your theme’s Neutral color. The main line uses your theme’s Secondary color.

Customization

To control all options, add any of the following rules to your campaign CSS in Settings > Theming, 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 defaults to theme’s Secondary */
	--svtlinecolor: hsl(var(--s));
/* Marker background colour defaults to theme’s Neutral (when set to Gray) */
	--svtbgc: hsl(var(--n));
/* Marker text colour defaults to theme’s Neutral (when set to Gray) */
	--svtbgt: hsl(var(--nc));
}

Straight dates

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-neutral-content:after,
.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) .timeline > li:nth-child(2n+1) .text-neutral-content:before {
	display:none;
}
.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) .timeline > li:nth-child(2n) .text-neutral-content {
	right: calc(100% + 50px);
	border-radius: .25rem;
}
.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) .timeline > li:nth-child(2n+1) .text-neutral-content {
	left: calc(100% + 50px);
	border-radius: .25rem;
}

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 2.1

Released 2 months ago

  • Small fix to the horizontal alignment of date labels relative to events.
  • Adding a tiny bit of padding to the event collapse toggle for more consistent spacing in the header.