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):

Descriptions shown

Descriptions collapsed

Customized theme and labels, by scanime

Latest version 1.8.2 View content

Released 3 months ago

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

Plugin CSS for 1.8.2


/* BEGIN Vertical Timeline by Salvatos */
@media (min-width:768px) {
	/* Set vars */
	.timeline {
		--svtlinecolor: white;
		--svtbgc: grey;
	}
	/* Position events */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"] {
		width: 50%;
		padding-bottom: 25px;
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n+1) {
		left: 0;
		padding-right: 25px;
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n) {
		left: 50%;
		padding-left: 25px;
	}
  	/* Shorten the bar on the last item so it doesn't collide with buttons */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:last-child {
		padding-bottom: 0;
      	margin-bottom: 15px;
	}
	/* Position markers*/
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"] > i {
		position: absolute;
		top: 7px;
		background-color: var(--svtbgc);
		color: white;
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n) > i {
		left: calc(0% - 15px);
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n+1) > i {
		left: calc(100% - 15px);
	}
	/* Position lines */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]::before {
		display: block;
      	width: 6px;
		border-radius: 0;
		background-color: var(--svtlinecolor);
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n)::before {
		left: calc(0% - 2px);
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n+1)::before {
		left: calc(100% - 2px);
	}
	/* Set radius of line start */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) :is(li[id|="timeline-element"]::after, li[id|="timeline-element"]:first-of-type::before) {
		border-top-left-radius: 5px !important;
		border-top-right-radius: 5px !important;
	}
	/* Fix length and set radius of line end */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) :is(li[id|="timeline-element"]::after, li[id|="timeline-element"]:last-of-type::before) {
		display: initial;
		height: calc(100% - 25px);
		border-bottom-left-radius: 5px !important;
		border-bottom-right-radius: 5px !important;
	}
	/* Reshape event blocks */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) .timeline-item {
		margin: 0;
	}
	/* Set date markers */
	.bg-aqua + .timeline-item .text-muted {--svtbgc:#00c0ef;}
	.bg-black + .timeline-item .text-muted {--svtbgc:#111;}
	.bg-brown + .timeline-item .text-muted {--svtbgc: #a35831;}
	.bg-green + .timeline-item .text-muted {--svtbgc:#00a65a;}
	.bg-gray + .timeline-item .text-muted {--svtbgc:#d2d6de;}
	.bg-light-blue + .timeline-item .text-muted {--svtbgc:#3c8dbc;}
	.bg-maroon + .timeline-item .text-muted {--svtbgc:#d81b60;}
	.bg-navy + .timeline-item .text-muted {--svtbgc:#001f3f;}
	.bg-orange + .timeline-item  .text-muted {--svtbgc:#ff851b;}
	.bg-pink + .timeline-item .text-muted {--svtbgc:#ebbde9;}
	.bg-purple + .timeline-item .text-muted {--svtbgc:#605ca8;}
	.bg-red + .timeline-item .text-muted {--svtbgc:#dd4b39;}
	.bg-teal + .timeline-item .text-muted {--svtbgc:#39cccc;}
	.bg-yellow + .timeline-item .text-muted {--svtbgc:#f39c12;}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) .timeline-item-head .text-muted {
		position: absolute;
		top: 7px;
		width: max-content;
		padding: 5px 8px;
		border: 1px solid var(--svtbgc);
		border-radius: 3px;
		box-shadow: 0 1px 1px rgba(0,0,0,.1);
		background-color: var(--svtbgc);
		color: white;
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n) .text-muted {
		right: calc(100% + 80px);
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n+1) .text-muted {
		left: calc(100% + 80px);
	}
	/* Fancy arrowheads */
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n) .text-muted:after,
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n+1) .text-muted:before {
		content: "";
		display: var(--svtarrow);
		position: absolute;
		top: 2px;
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
		border-radius: 50%;
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n) .text-muted:after {
		right: -24px;
		border-right: none;
		border-left: 25px solid var(--svtbgc);
	}
	.kanka-entity-timeline:not(.kanka-tag-horizontaltimeline) li[id|="timeline-element"]:nth-child(2n+1) .text-muted:before {
		left: -24px;
		border-left: none;
		border-right: 25px solid var(--svtbgc);
	}
}
/* END Vertical Timeline by Salvatos */