Vertical Timelines en

Salvatos

Installations 138 Likes 33

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.7 View content

Released 1 month ago

Fixed the line stopping too early at the last event in an era.

Plugin CSS for 1.7


/* BEGIN Salvatos Vertical Timeline */
@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;
	}
	/* 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 .box-title > .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: -1px;
		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 Salvatos Vertical Timeline */