Simple Timelines | Custom WA CSS Components | Lothrea

Simple Timelines

This article is depicting a potential future of this world. Some events in here might not have happened yet and will be changed by the actions of the players involved in this world. Until these campaigns have concluded, this article will exist in a superposition between existance and non-existance.   Some version of this article will survive, but who knows what it will be when all of this is over
This is a stub

This article will be expanded upon in the future

Simple timelines are perfect to show of events within your articles. While this doesn't aim to replace the timeline or chronicles feature, it can be very helpful to display the most important events without the reader having to leave the page. It's a nice way to break up your long history sections and make them easier to read.   They can be used standalone, or in columns like you see here. If you want to use them in your own world, just copy the CSS below to your world css and use the bbcode in your articles.   I first saw similar timelines created by Annie Stein for her world Solaris.
431 DAW
Lornan gifts the Tome of Infinite Wisdom to the Boradrinians
308 DAW
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.
Around 200 DAW
Tria claims the Lighthouse of Okodranous
1 DAW
Destruction of Escarl and Kathal'Dir
 
If you run into any issues with this component, or need help to customise it to your world, feel free to leave a comment on this article, or hit me up on discord.
 

Variants

Default

431 DAW
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis nunc. Curabitur ac odio ac leo imperdiet vehicula. Phasellus placerat quis neque id vulputate. Quisque finibus, tortor sit amet mollis finibus, ipsum tortor rhoncus lectus, nec convallis eros tellus mattis libero. Maecenas lobortis at nisl et tincidunt.
308 DAW
Nullam eget risus vitae urna commodo aliquet sed non justo. Nullam nec turpis ac augue sodales venenatis. Ut suscipit tempor risus at bibendum. Vestibulum fermentum ex in purus ultricies, in hendrerit nunc gravida. Aenean sapien sem, pretium quis condimentum sit amet, posuere sed neque. Quisque vitae sapien quis nibh vestibulum euismod. Sed vehicula nisi at nibh sollicitudin tempor. Ut a mauris gravida nisi elementum maximus. Nam iaculis elit porta blandit tincidunt
Around 200 DAW
Donec at erat eu nisl consectetur convallis. Aliquam interdum, arcu a dictum dictum, arcu ligula aliquet massa, id viverra metus nunc commodo turpis. Nam quis venenatis ipsum. Aenean pharetra sollicitudin elit, a ultrices sapien. Maecenas scelerisque elementum magna dignissim tempus. In eu mollis neque
1 DAW
Nulla malesuada dui eget efficitur finibus. Vivamus eget augue vestibulum lorem porta interdum sit amet in sapien. Maecenas nec magna sit amet erat dapibus porttitor. Aenean nibh neque, placerat ultricies justo ut, mollis posuere urna. Nulla scelerisque tellus sed pulvinar blandit. Fusce id gravida nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ut purus sodales, maximus justo nec, condimentum turpis. In nec aliquet libero

Small

To use these small timelines, just add small-timeline class to your outer most container. To have the timeline reverse like you can see on the right side here, add the reverse-timeline class. For the right timeline the outer most container would look like this [container:simple-timeline small-timeline reverse-timeline]

431 DAW
Lornan gifts the Tome of Infinite Wisdom to the Boradrinians
308 DAW
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.
Around 200 DAW
Tria claims the Lighthouse of Okodranous
1 DAW
Destruction of Escarl and Kathal'Dir
431 DAW
Lornan gifts the Tome of Infinite Wisdom to the Boradrinians
308 DAW
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.
Around 200 DAW
Tria claims the Lighthouse of Okodranous
1 DAW
Destruction of Escarl and Kathal'Dir
 

Code

BBCode

You can add as many [container:timeline-event] blocks as you want. Each of them will create a separate entry on your timeline.
[container:simple-timeline]
[container:timeline-event]
[container:timeline-icon][section:ra ra-2x ra-pine-tree] [/section][/container] 
[container:timeline-info]
[b]308 DAW[/b][br]
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.
[/container]
[/container] 
[/container] 
 

CSS

This first block defines the colors used by the timeline. Depending on your theme, the colors set here might look weird, or won't work at all. Change them to fit your world.   Copy this CSS into your World CSS or Article CSS.
.simple-timeline{
--first-bg-color: var(--sp-light-l);
--second-bg-color: var(--sp-dark);
--hover-bg-color: var(--sp-danger-l);
 
--first-icon-color: var(--sp-dark);
--second-icon-color: var(--sp-light-l);
--hover-icon-color: var(--sp-light);
}
.simple-timeline .timeline-event {
display: flex;
align-items: center;
}
 
.simple-timeline .timeline-event .timeline-info {
display: block;
border-left-style: solid;
border-left-width: 5px;
padding: 10px 0 10px 15px;
transition: 250ms ease-in-out;
flex-grow: 1;
border-color: var(--first-bg-color);
}
 
.simple-timeline .timeline-event .timeline-icon {
border: 1px solid black;
border-radius: 50%;
padding: 5px;
text-align: center;
line-height: 55px;
width: 45px;
height: 45px;
margin-right: 10px;
color: var(--first-icon-color);
background: var(--first-bg-color);
transition: 250ms ease-in-out;
position: relative;
}
 
.simple-timeline .timeline-event .timeline-icon::after {
content: url(attr);
position: absolute;
background: var(--first-bg-color);
top: 50%;
top: calc(50% - 2px);
height: 4px;
left: 43px;
width: 10px;
transition: 250ms ease-in-out;
}
 
 
.simple-timeline .timeline-event:nth-child(2n) .timeline-icon,
.simple-timeline .timeline-event:nth-child(2n) .timeline-icon::after {
background: var(--second-bg-color);
color: var(--second-icon-color);
}
 
.simple-timeline .timeline-event:nth-child(2n) .timeline-info {
border-color: var(--second-bg-color);
}
 
.simple-timeline .timeline-event:hover .timeline-info {
border-color: var(--hover-bg-color);
}
 
.simple-timeline .timeline-event:hover .timeline-icon,
.simple-timeline .timeline-event:hover .timeline-icon::after {
background: var(--hover-bg-color);
color: var(--hover-icon-color);
}
 
 
.simple-timeline.small-timeline .timeline-event .timeline-icon {
width: 30px;
height: 30px;
font-size: 60%;
line-height: 30px;
}
 
.simple-timeline.small-timeline .timeline-event .timeline-info {
font-size: 70%;
}
 
.simple-timeline.small-timeline .timeline-event .timeline-icon::after {
left: 30px;
}
 
 
.simple-timeline.reverse-timeline .timeline-event {
flex-direction: row-reverse;
}
 
.simple-timeline.reverse-timeline .timeline-event .timeline-info {
border-left: none;
border-right-style: solid;
border-right-width: 5px;
padding: 10px 15px 10px 0;
}
 
.simple-timeline.reverse-timeline .timeline-event .timeline-icon::after {
left: unset;
right: 29px;
}
 
.simple-timeline.reverse-timeline .timeline-event .timeline-icon {
margin-right: none;
margin-left: 10px;
}
Work in Progress

This article is still heavily WIP and can change at any moment

Available for Grandmaster and above
Simple Timelines make heavy use of containers and sections and are therefor only available for Grandmasters and above

 
Articles using this feature
 


Cover image: by Satrium with Midjourny

Comments

Please Login in order to comment!
Apr 11, 2024 23:04 by E. Christopher Clark

These look excellent! How generous of you to share the code. Well done!

Now it's time for the awkward wave.
Apr 13, 2024 18:31

Thank you! I always love when I can inspire people, or help people out with some amazing things, so I'm always happy to share my code.

Worldember is coming! Want to find more of my things: SatriumHub
Apr 12, 2024 12:28 by Dr Emily Vair-Turnbull

Thank you so much for being so generous and sharing your code. These look amazing and would definitely be helpful to break down longer history sections!

Emy x   Etrea | Vazdimet
Apr 13, 2024 18:33

That's exactly why I wanted them. Was working on the history section of the Golden Coast and just needed something to break it down a bit more.

Worldember is coming! Want to find more of my things: SatriumHub