Horizontal Timelines en

This desktop-only theme allows you to display timeline elements horizontally on select timelines. Each event’s marker descends from the main line and is accompanied by the date, and the event name and description block appears underneath.

This plugin also hides the right sidebar (pins, profile and external links) from view to maximize horizontal space on the selected entities. Other than this, most visual aspects of the timeline are customizable.

Setup

Since horizontal timelines work best with shorter event names and descriptions (or no description at all) and aren’t suitable for all use cases, this theme does not apply to all timelines by default. To activate it on a specific timeline, you must give it the tag "Horizontal Timeline". You can hide this tag from view in your entities with the Hidden from header and tooltip option, but the tag entity itself should not be private, otherwise the theme will not apply for other users.

Customization

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

.kanka-tag-horizontaltimeline {
/* Timeline spine color */
	--sht-spine-color: #4494c4;
/* Timeline spine thickness */
	--sht-spine-width: 5px;
/* Scrollbar background color */
	--sht-gutter: transparent;
/* Scrollbar slider color */
	--sht-slider: #4494c4;
/* Default marker background color (i.e. only markers set to the default Grey); use "var(--sht-spine-color)" to match the spine’s color */
	--sht-marker-bg: var(--timeline-element-border);
/* Default marker icon color (i.e. only markers set to the default Grey) */
	--sht-marker-color: inherit;
/* The following 3 values control the minimum, ideal and maximum width of timeline items */
	--sht-min-width: 300px;
	--sht-ideal-width: 15vw;
	--sht-max-width: 600px;
/* Hide the description text of events; "none" to hide, "block" to show */
	--sht-hide-description: block;
}

Note that the --sht-hide-description: none; parameter is less useful now that timeline elements have a configurable default state. I am keeping it available for cases where you have existing timelines and you don’t want to update every item after deciding to hide them for this plugin. If you use it, you may also want to add the following rule to hide the collapse/expand toggle:

/* Hide collapse toggle from Horizontal Timeline items */
.kanka-tag-horizontaltimeline .timeline-item i[class*="fa-chevron"] {
	--fa-display: none;
}

Centered event markers

To center event markers as shown in one of the screenshots, please use the code below. Note that dates should then either be moved back to the element’s header or hidden completely – both rules are provided below and you should only keep one.

/* Centered markers */
.kanka-tag-horizontaltimeline .timeline > li::before {
	left: 50%;
}
.kanka-tag-horizontaltimeline .timeline > li > :is(.fa, .fab, .far, .fas, .ra) {
	left: calc(50% - 13px);
}
/* Move date back to event header */
.kanka-tag-horizontaltimeline .timeline > li .box-title .text-muted {
	position: relative;
	top: unset;
	left: unset;
}
/* Hide date */
.kanka-tag-horizontaltimeline .timeline > li .box-title .text-muted {
	display: none;
}

Date customization

To customize the date tags, you can use the following selector and apply the desired properties for font, background, border, etc. If your campaign uses a general background image, you will likely want to give your dates at least a background color and some padding.

.kanka-tag-horizontaltimeline .timeline > li .text-muted {...}

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